Login sosial & identitas gabungan

Autentikasi sosial adalah alur autentikasi multilangkah yang memungkinkan Anda dapat memproses login pengguna ke sebuah akun atau menautkan pengguna dengan akun yang sudah ada.

Platform native dan web mendukung pembuatan kredensial yang kemudian dapat diteruskan ke metode signInWithCredential atau linkWithCredential. Atau, di platform web, Anda dapat memicu proses autentikasi melalui pop-up atau pengalihan.

Google

Sebagian besar konfigurasi sudah disiapkan saat menggunakan Login dengan Google di Firebase, tetapi Anda harus memastikan kunci SHA1 mesin Anda telah dikonfigurasi untuk digunakan dengan Android. Anda dapat melihat cara membuat kunci di dokumentasi autentikasi.

Pastikan penyedia login "Google" diaktifkan di Firebase Console.

Jika pengguna Anda login dengan Google, setelah mendaftarkan akun secara manual, penyedia autentikasi mereka akan otomatis beralih ke Google, disebabkan oleh konsep penyedia tepercaya Firebase Authentication. Anda dapat mempelajari lebih lanjut tentang hal tersebut di sini.

iOS+ dan Android

Di platform native, library pihak ketiga diperlukan untuk memicu alur autentikasi.

Instal plugin google_sign_in resmi.

Setelah diinstal, picu alur login 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 menyediakan dukungan untuk menangani alur autentikasi secara otomatis menggunakan project Firebase Anda. Contoh:

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

GoogleAuthProvider googleProvider = GoogleAuthProvider();

googleProvider.addScope('https://www.googleapis.com/auth/contacts.readonly');
googleProvider.setCustomParameters({
  'login_hint': '[e-mail]'
});

Berikan kredensial ke metode signInWithPopup. Tindakan ini akan memicu jendela baru muncul yang meminta pengguna untuk login ke project Anda. Atau, Anda dapat menggunakan signInWithRedirect untuk menjaga proses autentikasi tetap berada 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': '[e-mail]'
  });

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

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

Google Play Game

Anda dapat mengautentikasi pengguna di game Android menggunakan Login Play Game.

Android

Ikuti petunjuk untuk penyiapan Google di Android, lalu konfigurasikan layanan Play Game dengan informasi aplikasi Firebase Anda.

Hal berikut akan memicu alur login, membuat kredensial baru dan membuat pengguna login:

final googleUser = await GoogleSignIn(
  signInOption: SignInOption.games,
).signIn();

final googleAuth = await googleUser?.authentication;

if (googleAuth != null) {
  // Create a new credential
  final credential = GoogleAuthProvider.credential(
    accessToken: googleAuth.accessToken,
    idToken: googleAuth.idToken,
  );

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

Facebook

Sebelum memulai, siapkan Aplikasi Developer Facebook dan ikuti proses penyiapan untuk mengaktifkan Login dengan Facebook.

Pastikan penyedia login "Facebook" diaktifkan di Firebase Console. dengan Rahasia dan ID Aplikasi Facebook ditetapkan.

iOS+ dan Android

Di platform native, library pihak ketiga diperlukan untuk menginstal Facebook SDK 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 login, buat kredensial Facebook, lalu buat pengguna login:

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 menyediakan dukungan untuk menangani alur autentikasi secara otomatis menggunakan detail aplikasi Facebook yang disediakan di Firebase console. Contoh:

Buat penyedia Facebook, dan berikan cakupan izin tambahan apa pun yang ingin diperoleh dari pengguna.

Pastikan URI pengalihan OAuth dari Firebase console ditambahkan sebagai URI Pengalihan OAuth yang valid di Aplikasi Facebook Anda.

FacebookAuthProvider facebookProvider = FacebookAuthProvider();

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

Berikan kredensial ke metode signInWithPopup. Tindakan ini akan memicu jendela baru muncul yang meminta pengguna untuk login 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);
}

Catatan: Firebase tidak akan menetapkan properti User.isEmailVerified ke true jika pengguna Anda login dengan Facebook. Jika pengguna Anda login menggunakan penyedia yang memverifikasi email (misalnya, login dengan Google), properti tersebut akan ditetapkan ke true (benar). Untuk mengetahui informasi selengkapnya, baca masalah ini.

Apple

iOS+

Sebelum mulai, konfigurasi Login dengan Apple dan aktifkan Apple sebagai penyedia login.

Berikutnya, pastikan aplikasi Runner Anda memiliki kemampuan "Login dengan Apple".

Android

Sebelum mulai, konfigurasi Login dengan Apple dan aktifkan Apple sebagai penyedia login.

Web

Sebelum mulai, konfigurasi Login dengan Apple dan aktifkan Apple sebagai penyedia login.

import 'package:firebase_auth/firebase_auth.dart';

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

Microsoft

iOS+

Sebelum mulai, konfigurasi Microsoft Login untuk iOS dan tambahkan skema URL kustom ke Runner (langkah 1).

Android

Sebelum mulai, konfigurasi Microsoft Login untuk Android.

Jangan lupa untuk menambahkan sidik jari SHA-1 aplikasi.

Web

Sebelum mulai, konfigurasi Microsoft Login untuk Web.

import 'package:firebase_auth/firebase_auth.dart';

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

Twitter

Pastikan penyedia login "Twitter" diaktifkan di Firebase Console dengan Kunci API dan Rahasia API ditetapkan. Pastikan URL pengalihan Firebase OAuth (mis. my-app-12345.firebaseapp.com/__/auth/handler) ditetapkan sebagai URL callback Autorisasi di halaman setelan aplikasi di konfig aplikasi Twitter.

Anda mungkin juga perlu meminta peningkatan akses API bergantung pada aplikasi Anda Google.

iOS+

Anda perlu mengonfigurasi skema URL kustom seperti yang dijelaskan pada panduan iOS langkah 1.

Android

Jika Anda belum menentukan sidik jari SHA-1 aplikasi, lakukanlah dari halaman Settings di Firebase console. Baca artikel Mengautentikasi Klien untuk mengetahui detail tentang cara mendapatkan sidik jari SHA-1 aplikasi.

Web

Dapat langsung difungsikan.

import 'package:firebase_auth/firebase_auth.dart';

Future<void> _signInWithTwitter() async {
  TwitterAuthProvider twitterProvider = TwitterAuthProvider();

  if (kIsWeb) {
    await FirebaseAuth.instance.signInWithPopup(twitterProvider);
  } else {
    await FirebaseAuth.instance.signInWithProvider(twitterProvider);
  }
}

GitHub

Pastikan Anda telah menyiapkan Aplikasi OAuth dari Setelan Developer GitHub dan bahwa penyedia login "GitHub" diaktifkan di Firebase Console dengan Client ID dan Rahasia ditetapkan, dengan URL callback yang ditetapkan di aplikasi GitHub.

iOS+ dan Android

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

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

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

  return await FirebaseAuth.instance.signInWithProvider(githubProvider);
}

Web

Di web, GitHub SDK menyediakan dukungan untuk menangani alur autentikasi secara otomatis menggunakan detail aplikasi GitHub yang disediakan di Firebase console. Pastikan bahwa URL callback di Firebase console ditambahkan sebagai URL callback pada aplikasi GitHub Anda di konsol developer.

Contoh:

Buat penyedia GitHub dan berikan kredensial ke metode signInWithPopup. Tindakan ini akan memicu jendela baru muncul yang meminta pengguna untuk login 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);
}

Yahoo

Pastikan penyedia login "Yahoo" diaktifkan di Firebase Console dengan Kunci API dan Rahasia API ditetapkan. Pastikan juga URI pengalihan Firebase OAuth Anda (misalnya, my-app-12345.firebaseapp.com/__/auth/handler) ditetapkan sebagai URI pengalihan di konfigurasi Jaringan Developer Yahoo aplikasi Anda.

iOS+

Sebelum mulai, konfigurasi Yahoo Login untuk iOS dan tambahkan skema URL kustom ke Runner (langkah 1).

Android

Sebelum mulai, konfigurasi Yahoo Login untuk Android.

Jangan lupa untuk menambahkan sidik jari SHA-1 aplikasi.

Web

Dapat langsung difungsikan.

import 'package:firebase_auth/firebase_auth.dart';

Future<UserCredential> signInWithYahoo() async {
  final yahooProvider = YahooAuthProvider();
  if (kIsWeb) {
    await _auth.signInWithPopup(yahooProvider);
  } else {
    await _auth.signInWithProvider(yahooProvider);
  }
}

Menggunakan token akses OAuth

Dengan menggunakan AuthProvider, Anda dapat mengambil token akses yang terkait dengan penyedia dengan membuat permintaan berikut.

final appleProvider = AppleAuthProvider();

final user = await FirebaseAuth.instance.signInWithProvider(appleProvider);
final accessToken = user.credential?.accessToken;

// You can send requests with the `accessToken`

Menautkan Penyedia Autentikasi

Jika ingin menautkan penyedia ke pengguna saat ini, Anda dapat menggunakan metode berikut: ```dart await FirebaseAuth.instance.signInAnonymously();

final appleProvider = AppleAuthProvider();

if (kIsWeb) { await FirebaseAuth.instance.currentUser?.linkWithPopup(appleProvider);

// Anda juga dapat menggunakan linkWithRedirect } else { await FirebaseAuth.instance.currentUser?.linkWithProvider(appleProvider); }

// Pengguna anonim Anda kini diupgrade agar dapat terhubung dengan Login dengan Apple ```

Mengautentikasi ulang dengan penyedia

Pola yang sama dapat digunakan dengan reauthenticateWithProvider yang dapat digunakan untuk mengambil kredensial baru untuk operasi sensitif yang memerlukan login terbaru.

final appleProvider = AppleAuthProvider();

if (kIsWeb) {
  await FirebaseAuth.instance.currentUser?.reauthenticateWithPopup(appleProvider);
  
  // Or you can reauthenticate with a redirection
  // await FirebaseAuth.instance.currentUser?.reauthenticateWithRedirect(appleProvider);
} else {
  await FirebaseAuth.instance.currentUser?.reauthenticateWithProvider(appleProvider);
}

// You can now perform sensitive operations