Lihat yang baru dari Firebase di Google I/O 2022. Pelajari lebih lanjut

Identitas gabungan & login sosial

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Otentikasi sosial adalah alur autentikasi multi-langkah, yang memungkinkan Anda memasukkan pengguna ke akun atau menautkannya dengan akun yang sudah ada.

Baik platform asli maupun dukungan web membuat kredensial yang kemudian dapat diteruskan ke metode signInWithCredential atau linkWithCredential . Atau pada platform web, Anda dapat memicu proses otentikasi melalui popup atau redirect.

Google

Sebagian besar konfigurasi sudah disiapkan saat menggunakan Google Sign-In dengan Firebase, namun Anda perlu memastikan kunci SHA1 mesin Anda telah dikonfigurasi untuk digunakan dengan Android. Anda dapat melihat cara membuat kunci pada dokumentasi otentikasi .

Pastikan penyedia masuk "Google" diaktifkan di Firebase Console .

Jika pengguna Anda masuk dengan Google, setelah mendaftarkan akun secara manual, penyedia autentikasi mereka akan otomatis berubah menjadi Google, karena konsep Firebase Authentications dari penyedia tepercaya. Anda dapat mengetahui lebih lanjut tentang ini di sini .

iOS+ dan Android

Pada platform asli, perpustakaan pihak ketiga diperlukan untuk memicu aliran otentikasi.

Instal plugin resmi google_sign_in .

Setelah terinstal, picu alur masuk dan buat kredensial baru:

import 'package:google_sign_in/google_sign_in.dart';

Future<UserCredential> signInWithGoogle() async {
  // Trigger the authentication flow
  final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();

  // Obtain the auth details from the request
  final GoogleSignInAuthentication? googleAuth = await googleUser?.authentication;

  // Create a new credential
  final credential = GoogleAuthProvider.credential(
    accessToken: googleAuth?.accessToken,
    idToken: googleAuth?.idToken,
  );

  // Once signed in, return the UserCredential
  return await FirebaseAuth.instance.signInWithCredential(credential);
}

Web

Di web, Firebase SDK memberikan dukungan untuk menangani alur autentikasi secara otomatis menggunakan proyek Firebase Anda. Sebagai contoh:

Buat penyedia autentikasi Google, dengan memberikan cakupan izin tambahan apa pun yang ingin Anda peroleh dari pengguna:

GoogleAuthProvider googleProvider = GoogleAuthProvider();

googleProvider.addScope('https://www.googleapis.com/auth/contacts.readonly');
googleProvider.setCustomParameters({
  'login_hint': 'user@example.com'
});

Berikan kredensial ke metode signInWithPopup . Ini akan memicu jendela baru yang meminta pengguna untuk masuk ke proyek Anda. Atau Anda dapat menggunakan signInWithRedirect untuk menjaga proses otentikasi di jendela yang sama.

Future<UserCredential> signInWithGoogle() async {
  // Create a new provider
  GoogleAuthProvider googleProvider = GoogleAuthProvider();

  googleProvider.addScope('https://www.googleapis.com/auth/contacts.readonly');
  googleProvider.setCustomParameters({
    'login_hint': 'user@example.com'
  });

  // Once signed in, return the UserCredential
  return await FirebaseAuth.instance.signInWithPopup(googleProvider);

  // Or use signInWithRedirect
  // return await FirebaseAuth.instance.signInWithRedirect(googleProvider);
}

Facebook

Sebelum memulai, siapkan Aplikasi Pengembang Facebook Anda dan ikuti proses penyiapan untuk mengaktifkan Login Facebook.

Pastikan penyedia masuk "Facebook" diaktifkan di Firebase Console . dengan ID Aplikasi Facebook dan kumpulan Rahasia.

iOS+ dan Android

Pada platform asli, perpustakaan pihak ketiga diperlukan untuk menginstal SDK Facebook dan memicu alur autentikasi.

Instal plugin flutter_facebook_auth .

Anda harus mengikuti langkah-langkah dalam dokumentasi plugin untuk memastikan bahwa SDK Facebook Android & iOS telah diinisialisasi dengan benar. Setelah selesai, picu alur masuk, buat kredensial Facebook, dan masukkan pengguna:

import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';

Future<UserCredential> signInWithFacebook() async {
  // Trigger the sign-in flow
  final LoginResult loginResult = await FacebookAuth.instance.login();

  // Create a credential from the access token
  final OAuthCredential facebookAuthCredential = FacebookAuthProvider.credential(loginResult.accessToken.token);

  // Once signed in, return the UserCredential
  return FirebaseAuth.instance.signInWithCredential(facebookAuthCredential);
}

Web

Di web, Firebase SDK memberikan dukungan untuk menangani alur autentikasi secara otomatis menggunakan detail aplikasi Facebook yang disediakan di Firebase console. Sebagai contoh:

Buat penyedia Facebook, berikan cakupan izin tambahan apa pun yang ingin Anda peroleh dari pengguna.

Pastikan bahwa OAuth redirect URI dari Firebase console ditambahkan sebagai OAuth Redirect URI yang valid di Aplikasi Facebook Anda.

FacebookAuthProvider facebookProvider = FacebookAuthProvider();

facebookProvider.addScope('email');
facebookProvider.setCustomParameters({
  'display': 'popup',
});

Berikan kredensial ke metode signInWithPopup . Ini akan memicu jendela baru yang meminta pengguna untuk masuk ke aplikasi Facebook Anda:

Future<UserCredential> signInWithFacebook() async {
  // Create a new provider
  FacebookAuthProvider facebookProvider = FacebookAuthProvider();

  facebookProvider.addScope('email');
  facebookProvider.setCustomParameters({
    'display': 'popup',
  });

  // Once signed in, return the UserCredential
  return await FirebaseAuth.instance.signInWithPopup(facebookProvider);

  // Or use signInWithRedirect
  // return await FirebaseAuth.instance.signInWithRedirect(facebookProvider);
}

apel

iOS+

Sebelum Anda mulai, konfigurasikan Masuk dengan Apple dan aktifkan Apple sebagai penyedia masuk .

Selanjutnya, pastikan aplikasi Runner Anda memiliki kemampuan "Masuk dengan Apple".

Android

Sebelum Anda mulai, konfigurasikan Masuk dengan Apple dan aktifkan Apple sebagai penyedia masuk .

Web

Sebelum Anda mulai, konfigurasikan Masuk dengan Apple dan aktifkan Apple sebagai penyedia masuk .

import 'package:firebase_auth/firebase_auth.dart';

Future<UserCredential> signInWithApple() async {
  final appleProvider = AppleAuthProvider();
  if (kIsWeb) {
    await _auth.signInWithPopup(appleProvider);
  } else {
    await _auth.signInWithAuthProvider(appleProvider);
  }
}

Microsoft

iOS+

Sebelum Anda mulai mengonfigurasi Microsoft Login untuk iOS dan menambahkan skema URL khusus ke Runner Anda (langkah 1) .

Android

Sebelum Anda mulai mengkonfigurasi Microsoft Login untuk Android .

Jangan lupa untuk menambahkan sidik jari SHA-1 aplikasi Anda.

Web

Sebelum Anda mulai mengkonfigurasi Microsoft Login untuk Web .

import 'package:firebase_auth/firebase_auth.dart';

Future<UserCredential> signInWithMicrosoft() async {
  final microsoftProvider = MicrosoftAuthProvider();
  if (kIsWeb) {
    await _auth.signInWithPopup(microsoftProvider);
  } else {
    await _auth.signInWithAuthProvider(microsoftProvider);
  }
}

Twitter

Pastikan penyedia masuk "Twitter" diaktifkan di Konsol Firebase dengan Kunci API dan Rahasia API.

iOS+ dan Android

Pada platform asli, perpustakaan pihak ketiga diperlukan untuk menginstal SDK Twitter dan memicu alur autentikasi.

Instal plugin twitter_login :

dependencies:
  twitter_login: ^4.0.1

Pastikan untuk hati-hati melalui langkah-langkah konfigurasi twitter_login dan mendaftarkan URL panggilan balik di Portal Pengembang Twitter dengan skema URL yang cocok

import 'package:twitter_login/twitter_login.dart';

Future<UserCredential> signInWithTwitter() async {
  // Create a TwitterLogin instance
  final twitterLogin = new TwitterLogin(
    apiKey: '<your consumer key>',
    apiSecretKey:' <your consumer secret>',
    redirectURI: '<your_scheme>://'
  );

  // Trigger the sign-in flow
  final authResult = await twitterLogin.login();

  // Create a credential from the access token
  final twitterAuthCredential = TwitterAuthProvider.credential(
    accessToken: authResult.authToken!,
    secret: authResult.authTokenSecret!,
  );

  // Once signed in, return the UserCredential
  return await FirebaseAuth.instance.signInWithCredential(twitterAuthCredential);
}

Web

Di web, SDK Twitter memberikan dukungan untuk menangani alur autentikasi secara otomatis menggunakan detail aplikasi Twitter yang disediakan di Firebase console. Pastikan bahwa URL panggilan balik di konsol Firebase ditambahkan sebagai URL panggilan balik di aplikasi Twitter Anda di konsol pengembang mereka.

Sebagai contoh:

Buat penyedia Twitter dan berikan kredensial ke metode signInWithPopup . Ini akan memicu jendela baru yang meminta pengguna untuk masuk ke aplikasi Twitter Anda:

Future<UserCredential> signInWithTwitter() async {
  // Create a new provider
  TwitterAuthProvider twitterProvider = TwitterAuthProvider();

  // Once signed in, return the UserCredential
  return await FirebaseAuth.instance.signInWithPopup(twitterProvider);

  // Or use signInWithRedirect
  // return await FirebaseAuth.instance.signInWithRedirect(twitterProvider);
}

GitHub

Pastikan Anda telah menyiapkan Aplikasi OAuth dari Pengaturan Pengembang GitHub dan penyedia masuk "GitHub" diaktifkan di Konsol Firebase dengan ID Klien dan Rahasia disetel, dengan URL panggilan balik disetel di aplikasi GitHub.

iOS+ dan Android

Untuk platform asli, Anda perlu menambahkan google-services.json dan GoogleService-Info.plist .

Untuk iOS, tambahkan skema URL khusus seperti yang dijelaskan pada panduan iOS langkah 1.

Future<UserCredential> signInWithGitHub() async {
  // Create a new provider
  GithubAuthProvider githubProvider = GithubAuthProvider();

  return await _auth.signInWithAuthProvider(githubProvider);
}

Web

Di web, GitHub SDK memberikan dukungan untuk menangani alur autentikasi secara otomatis menggunakan detail aplikasi GitHub yang disediakan di Firebase console. Pastikan bahwa URL panggilan balik di konsol Firebase ditambahkan sebagai URL panggilan balik di aplikasi GitHub Anda di konsol pengembang.

Sebagai contoh:

Buat penyedia GitHub dan berikan kredensial ke metode signInWithPopup . Ini akan memicu jendela baru yang meminta pengguna untuk masuk ke aplikasi GitHub Anda:

Future<UserCredential> signInWithGitHub() async {
  // Create a new provider
  GithubAuthProvider githubProvider = GithubAuthProvider();

  // Once signed in, return the UserCredential
  return await FirebaseAuth.instance.signInWithPopup(githubProvider);

  // Or use signInWithRedirect
  // return await FirebaseAuth.instance.signInWithRedirect(githubProvider);
}