聯合身分與社交登入

社群媒體驗證是多步驟驗證流程,可讓您讓使用者登入帳戶,或將使用者連結至現有帳戶。

原生平台和網頁都支援建立憑證,可將憑證傳遞至 signInWithCredentiallinkWithCredential 方法。或者,您也可以在網站平台上透過彈出式視窗或重新導向觸發驗證程序。

Google

使用 Firebase 搭配 Google 登入時,大部分的設定都已完成,但您必須確保已將機器的 SHA1 金鑰設定為可與 Android 搭配使用。如要瞭解如何產生金鑰,請參閱驗證說明文件

確認已在 Firebase 主控台中啟用「Google」登入供應商。

如果使用者已手動註冊帳戶,然後透過 Google 登入,系統會根據 Firebase 驗證服務的受信任供應商概念,自動將驗證服務供應商變更為 Google。詳情請參閱這篇文章

iOS 和 Android

在原生平台上,您必須使用第三方程式庫才能觸發驗證流程。

安裝官方 google_sign_in 外掛程式。

安裝完成後,請觸發登入流程並建立新的憑證:

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

網頁

在網站上,Firebase SDK 可支援使用 Firebase 專案自動處理驗證流程。例如:

建立 Google 驗證提供者,提供您想從使用者取得的任何額外權限範圍

GoogleAuthProvider googleProvider = GoogleAuthProvider();

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

將憑證提供給 signInWithPopup 方法。這會觸發新視窗顯示,提示使用者登入專案。或者,您也可以使用 signInWithRedirect,讓驗證程序保持在同一個視窗中。

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

Google Play 遊戲 (僅限 Android)

確認已在 Firebase 主控台中啟用「Play 遊戲」登入供應器。請按照這些操作說明設定 Play 遊戲 Firebase 專案。

請按照這篇文章的說明,使用 Firebase 應用程式設定 Play 遊戲服務。

Android

Future<void> _signInWithPlayGames() async {
  // Get server auth code from 3rd party provider
  // See PR description for details on how you might get the server auth code:
  // https://github.com/firebase/flutterfire/pull/12201#issue-2100392487
  final serverAuthCode = '...';
  final playGamesCredential = PlayGamesAuthProvider.credential(
                                          serverAuthCode: serverAuthCode);

  await FirebaseAuth.instance
    .signInWithCredential(playGamesCredential);
}

Facebook

開始前,請先設定 Facebook 開發人員應用程式,並按照設定程序啟用 Facebook 登入功能。

請確認已在 Firebase 主控台中啟用「Facebook」登入供應商,並設定 Facebook 應用程式 ID 和密鑰。

iOS 和 Android

在原生平台上,您必須使用第三方程式庫才能安裝 Facebook SDK 並觸發驗證流程。

安裝 flutter_facebook_auth 外掛程式。

您必須按照外掛程式說明文件中的步驟操作,確保 Android 和 iOS 版 Facebook SDK 已正確初始化。完成後,觸發登入流程,建立 Facebook 憑證,並讓使用者登入:

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

網頁

在網頁上,Firebase SDK 可支援使用 Firebase 主控台提供的 Facebook 應用程式詳細資料,自動處理驗證流程。例如:

建立 Facebook 供應器,提供您想從使用者取得的任何額外權限範圍

請確認 Firebase 主控台的 OAuth 重新導向 URI 已新增為 Facebook 應用程式中的有效 OAuth 重新導向 URI。

FacebookAuthProvider facebookProvider = FacebookAuthProvider();

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

將憑證提供給 signInWithPopup 方法。這會觸發新視窗,提示使用者登入 Facebook 應用程式:

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

Apple

iOS+

開始前,請先設定 Apple 登入功能,並啟用 Apple 做為登入供應商

接著,請確認您的 Runner 應用程式具備「使用 Apple 帳戶登入」功能。

Android

開始前,請先設定 Apple 登入功能,並啟用 Apple 做為登入供應商

網頁

開始前,請先設定 Apple 登入功能,並啟用 Apple 做為登入供應商

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

僅限 Apple 平台登入

您也可以透過下列方法,在 iOS+ 平台上使用 Apple 登入功能:

// Implement a function that generates a nonce. See iOS documentation for how to create a nonce:
// https://firebase.google.com/docs/auth/ios/apple#sign_in_with_apple_and_authenticate_with_firebase
String rawNonce = createNonce();
// Create a SHA-256 hash of the nonce. Consider using the `crypto` package from the pub.dev registry.
String hashSHA256String = createHashSHA256String(rawNonce);
// Use the hash of the nonce to get the idToken. Consider using the `sign_in_with_apple` plugin from the pub.dev registry.
String idToken = await getIdToken();

final fullName = AppleFullPersonName(
  familyName: 'Name',
  givenName: 'Your',
);
// Use the `rawNonce` and `idToken` to get the credential
final credential = AppleAuthProvider.credentialWithIDToken(
  idToken,
  rawNonce,
  fullName,
);

await FirebaseAuth.instance.signInWithCredential(credential);

撤銷 Apple 驗證權杖

Apple 平台上的 Apple 登入功能會傳回授權碼,可用於使用 revokeTokenWithAuthorizationCode() API 撤銷 Apple 授權權杖。

import 'package:firebase_auth/firebase_auth.dart';

Future<UserCredential> signInWithApple() async {
  final appleProvider = AppleAuthProvider();

  UserCredential userCredential = await FirebaseAuth.instance.signInWithPopup(appleProvider);
  // Keep the authorization code returned from Apple platforms
  String? authCode = userCredential.additionalUserInfo?.authorizationCode;
  // Revoke Apple auth token
  await FirebaseAuth.instance.revokeTokenWithAuthorizationCode(authCode!);
}

Apple Game Center (僅限 Apple)

請確認您已在 Firebase 主控台中啟用「Game Center」登入供應器。請按照這些操作說明設定 Game Center Firebase 專案。

您必須先透過 Game Center 登入,才能取得 Firebase Game Center 憑證,並透過 Firebase 登入。以下是相關操作說明,讓您瞭解如何進行。

iOS+

Future<void> _signInWithGameCenter() async {
  final credential = GameCenterAuthProvider.credential();
  await FirebaseAuth.instance
      .signInWithCredential(credential);
}

Microsoft

iOS+

開始設定 Microsoft 適用於 iOS 的登入服務,並將自訂網址配置新增至 Runner (步驟 1)

Android

事前準備:設定 Microsoft 登入服務 (Android 版)

別忘了新增應用程式的 SHA-1 指紋。

網頁

開始前,請先設定 Microsoft 網頁登入服務

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

請確認已在 Firebase 控制台中啟用「Twitter」登入服務供應器,並設定 API 金鑰和 API 密鑰。請確認 Twitter 應用程式設定中的應用程式設定頁面,已將 Firebase OAuth 重新導向 URI (例如 my-app-12345.firebaseapp.com/__/auth/handler) 設為授權回呼網址。

您可能還需要根據應用程式要求提升的 API 存取權

iOS+

您必須按照iOS 指南第 1 步驟所述,設定自訂網址通訊協定。

Android

如果您尚未指定應用程式的 SHA-1 指紋,請前往 Firebase 控制台的設定頁面進行指定。如要進一步瞭解如何取得應用程式 SHA-1 指紋,請參閱「驗證用戶端」一文。

網頁

開箱即用。

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

請確認您已透過 GitHub 開發人員設定設定 OAuth 應用程式,且已在 Firebase 控制台中啟用「GitHub」登入供應器,並設定用戶端 ID 和密鑰,以及在 GitHub 應用程式中設定回呼網址。

iOS 和 Android

針對原生平台,您需要新增 google-services.jsonGoogleService-Info.plist

針對 iOS,請按照iOS 指南第 1 步驟所述新增自訂網址通訊協定。

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

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

網頁

在網路上,GitHub SDK 可支援使用 Firebase 控制台提供的 GitHub 應用程式詳細資料,自動處理驗證流程。請確認 Firebase 主控台中的回呼網址已新增至開發人員控制台的 GitHub 應用程式中,做為回呼網址。

例如:

建立 GitHub 供應器,並將憑證提供給 signInWithPopup 方法。這會觸發新視窗,提示使用者登入 GitHub 應用程式:

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

請確認您已在 Firebase 控制台中啟用「Yahoo」登入服務供應器,並設定 API 金鑰和 API 密鑰。此外,請確認您的 Firebase OAuth 重新導向 URI (例如 my-app-12345.firebaseapp.com/__/auth/handler) 已在應用程式的 Yahoo 開發人員網路設定中設為重新導向 URI。

iOS+

開始前,請先設定 iOS 版 Yahoo 登入,並將自訂網址配置新增至 Runner (步驟 1)

Android

開始前,請先設定 Android 版 Yahoo 登入服務

別忘了新增應用程式的 SHA-1 指紋。

網頁

開箱即用。

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

使用 OAuth 存取權杖

使用 AuthProvider 時,您可以透過提出以下要求,擷取與提供者相關聯的存取權杖。

final appleProvider = AppleAuthProvider();

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

// You can send requests with the `accessToken`

連結驗證提供者

如要將供應者連結至目前使用者,請使用下列方法:

await FirebaseAuth.instance.signInAnonymously();

final appleProvider = AppleAuthProvider();

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

  // You can also use `linkWithRedirect`
} else {
  await FirebaseAuth.instance.currentUser?.linkWithProvider(appleProvider);
}

// You're anonymous user is now upgraded to be able to connect with Sign In With Apple

向供應商重新驗證

reauthenticateWithProvider 可用於擷取敏感作業的最新憑證,這些作業需要最近登入。因此,您可以使用相同的模式搭配 reauthenticateWithProvider

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