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

Identitas gabungan & login sosial

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 Instalasi .

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+ dan Android

Sebelum Anda mulai mengonfigurasi Masuk dengan Apple dan mengaktifkan Apple sebagai penyedia masuk .

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

Instal plugin sign_in_with_apple , serta paket crypto :

dependencies:
  sign_in_with_apple: ^3.0.0
  crypto: ^3.0.1
import 'dart:convert';
import 'dart:math';

import 'package:crypto/crypto.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:sign_in_with_apple/sign_in_with_apple.dart';

/// Generates a cryptographically secure random nonce, to be included in a
/// credential request.
String generateNonce([int length = 32]) {
  const charset =
      '0123456789ABCDEFGHIJKLMNOPQRSTUVXYZabcdefghijklmnopqrstuvwxyz-._';
  final random = Random.secure();
  return List.generate(length, (_) => charset[random.nextInt(charset.length)])
      .join();
}

/// Returns the sha256 hash of [input] in hex notation.
String sha256ofString(String input) {
  final bytes = utf8.encode(input);
  final digest = sha256.convert(bytes);
  return digest.toString();
}

Future<UserCredential> signInWithApple() async {
  // To prevent replay attacks with the credential returned from Apple, we
  // include a nonce in the credential request. When signing in with
  // Firebase, the nonce in the id token returned by Apple, is expected to
  // match the sha256 hash of `rawNonce`.
  final rawNonce = generateNonce();
  final nonce = sha256ofString(rawNonce);

  // Request credential for the currently signed in Apple account.
  final appleCredential = await SignInWithApple.getAppleIDCredential(
    scopes: [
      AppleIDAuthorizationScopes.email,
      AppleIDAuthorizationScopes.fullName,
    ],
    nonce: nonce,
  );

  // Create an `OAuthCredential` from the credential returned by Apple.
  final oauthCredential = OAuthProvider("apple.com").credential(
    idToken: appleCredential.identityToken,
    rawNonce: rawNonce,
  );

  // Sign in the user with Firebase. If the nonce we generated earlier does
  // not match the nonce in `appleCredential.identityToken`, sign in will fail.
  return await FirebaseAuth.instance.signInWithCredential(oauthCredential);
}

Web

Sebelum Anda mulai mengonfigurasi Masuk dengan Apple dan mengaktifkan Apple sebagai penyedia masuk .

import 'package:firebase_auth/firebase_auth.dart';

Future<UserCredential> signInWithApple() async {
  // Create and configure an OAuthProvider for Sign In with Apple.
  final provider = OAuthProvider("apple.com")
    ..addScope('email')
    ..addScope('name');

  // Sign in the user with Firebase.
  return await FirebaseAuth.instance.signInWithPopup(provider);
}

Alternatifnya adalah menggunakan signInWithRedirect . Dalam hal ini browser akan menavigasi keluar dari aplikasi Anda dan Anda harus menggunakan getRedirectResult untuk memeriksa hasil otentikasi selama startup aplikasi.

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.

import 'package:github_sign_in/github_sign_in.dart';

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);
}