使用 FirebaseUI 輕鬆將登入新增至您的 iOS 應用

FirebaseUI是一個建立在 Firebase 驗證 SDK 之上的程式庫,它提供了可在您的應用程式中使用的嵌入式 UI 流。 FirebaseUI 具有以下優點:

  • 多個提供者:電子郵件/密碼、電子郵件連結、電話驗證、Google 登入、Facebook 登入和 Twitter 登入的登入流程。
  • 帳戶管理:處理帳戶管理任務的流程,例如帳戶建立和密碼重設。
  • 匿名帳戶連結:自動將匿名帳戶連結到身分提供者的流程。
  • 可自訂:自訂 FirebaseUI 的外觀以符合您的應用程式。此外,由於 FirebaseUI 是開源的,因此您可以分叉專案並根據您的需求進行自訂。

在你開始之前

  1. 將 Firebase 新增到您的 Apple 專案

  2. 將 FirebaseUI 新增到您的 Podfile:

    pod 'FirebaseUI'
    

    如果您願意,可以只新增 Auth 元件和要使用的提供者:

    pod 'FirebaseUI/Auth'
    
    pod 'FirebaseUI/Google'
    pod 'FirebaseUI/Facebook'
    pod 'FirebaseUI/OAuth' # Used for Sign in with Apple, Twitter, etc
    pod 'FirebaseUI/Phone'
    
  3. 如果您尚未將應用程式連線至 Firebase 項目,請從Firebase 控制台執行此操作。

設定登入方法

在使用 Firebase 登入使用者之前,您必須啟用並設定您想要支援的登入方法。

電子郵件地址和密碼

Firebase 控制台中,開啟「驗證」部分並啟用電子郵件和密碼驗證。

  1. Firebase 控制台中,開啟「驗證」部分。在登入方法標籤上,啟用電子郵件/密碼提供者。請注意,必須啟用電子郵件或密碼登入才能使用電子郵件連結登入。

  2. 在同一部分中,啟用電子郵件連結(無密碼登入)登入方法,然後按一下「儲存」

  3. 您可以透過使用FIREmailLinkAuthSignInMethod初始化FUIEmailAuth實例來啟用電子郵件連結登入。您還需要提供一個有效的FIRActionCodeSettings對象,並將handleCodeInApp設為 true。

迅速

var actionCodeSettings = ActionCodeSettings()
actionCodeSettings.url = URL(string: "https://example.appspot.com")
actionCodeSettings.handleCodeInApp = true
actionCodeSettings.setAndroidPackageName("com.firebase.example", installIfNotAvailable: false, minimumVersion: "12")

let provider = FUIEmailAuth(authUI: FUIAuth.defaultAuthUI()!,
                            signInMethod: FIREmailLinkAuthSignInMethod,
                            forceSameDevice: false,
                            allowNewEmailAccounts: true,
                            actionCodeSetting: actionCodeSettings)

Objective-C

FIRActionCodeSettings *actionCodeSettings = [[FIRActionCodeSettings alloc] init];
actionCodeSettings.URL = [NSURL URLWithString:@"https://example.appspot.com"];
actionCodeSettings.handleCodeInApp = YES;
[actionCodeSettings setAndroidPackageName:@"com.firebase.example"
                    installIfNotAvailable:NO
                           minimumVersion:@"12"];

id<FUIAuthProvider> provider = [[FUIEmailAuth alloc] initWithAuthUI:[FUIAuth defaultAuthUI]
                                                       signInMethod:FIREmailLinkAuthSignInMethod
                                                    forceSameDevice:NO
                                              allowNewEmailAccounts:YES
                                                  actionCodeSetting:actionCodeSettings];
  1. 此外,您需要將傳遞給初始化程序的 URL 列入白名單。您可以在Firebase 控制台中開啟「身份驗證」部分來執行此操作。在「登入方法」標籤上,在「授權網域」下方新增 URL。

  2. 捕獲深層連結後,您需要將其傳遞到身份驗證 UI,以便可以對其進行處理。

迅速

FUIAuth.defaultAuthUI()!.handleOpen(url, sourceApplication: sourceApplication)

Objective-C

[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
  1. FirebaseUI-iOS 中的電子郵件連結登入與FirebaseUI-AndroidFirebaseUI-web相容,其中從 FirebaseUI-Android 啟動流程的使用者可以開啟連結並使用 FirebaseUI-web 完成登入。對於相反的流也是如此。

蘋果

  1. 請遵循 Firebase使用 Apple 登入指南中的開始之前遵守 Apple 匿名資料要求部分。

  2. 將「使用 Apple 登入」功能新增至您的權利文件。

  3. 初始化配置為使用 Apple 登入的 OAuth 提供者實例:

    迅速

    provider = FUIOAuth.appleAuthProvider()
    

    Objective-C

    FUIOAuth *provider = [FUIOAuth appleAuthProvider];
    

Google

  1. 使用本教學設定 Google 登入

Facebook

  1. 依照Facebook 的入門頁面設定 Facebook 登入 SDK。

  2. Firebase 控制台中,開啟「身份驗證」部分並啟用 Facebook。要啟用 Facebook 登錄,您必須提供 Facebook 應用程式 ID 和應用程式密鑰,您可以在 Facebook 開發者控制台中獲取這些資訊。

  3. 「專案設定」>「功能」畫面在 Xcode 專案中啟用鑰匙圈共用。

  4. 在 Xcode 專案中新增fb FACEBOOK_APP_ID作為 URL 方案。

  5. 將您的 Facebook 應用程式 ID 和顯示名稱新增至Info.plist檔案:

    鑰匙價值
    Facebook應用程式ID FACEBOOK_APP_ID (例如, 1234567890
    Facebook顯示名稱您的應用程式的名稱
  6. 初始化 Facebook 提供者實例:

    迅速

    provider = FUIFacebookAuth(authUI: FUIAuth.defaultAuthUI())
    

    Objective-C

    FUIFacebookAuth *provider = [[FUIFacebookAuth alloc] initWithAuthUI:[FUIAuth defaultAuthUI]];
    

  7. 如果您想使用Facebook Limited Login ,請在FUIFacebookAuth實例上設定useLimitedLogin屬性。

    迅速

    provider.useLimitedLogin = true
    

    Objective-C

    provider.useLimitedLogin = YES;
    

推特

  1. Firebase 控制台中,開啟「驗證」部分並啟用 Twitter。要啟用 Twitter 登錄,您必須提供 Twitter API 使用方金鑰和機密,您可以在 Twitter 應用程式管理控制台中取得這些金鑰和機密。

  2. 初始化為 Twitter 登入配置的 OAuth 提供者實例:

    迅速

    provider = FUIOAuth.twitterAuthProvider()
    

    Objective-C

    FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
    

電話號碼

  1. Firebase 控制台中,開啟「驗證」部分並啟用電話號碼登入。

  2. Firebase 必須能夠驗證電話號碼登入要求是否來自您的應用程式。實現此目的的方法之一是透過 APNs 通知。有關詳細信息,請參閱啟用應用程式驗證

    若要啟用 APNs 通知以與 Firebase 驗證結合使用:

    1. 在 Xcode 中,為您的專案啟用推播通知

    2. 將您的 APNs 驗證金鑰上傳到 Firebase。如果您還沒有 APNs 驗證金鑰,請確保在Apple 開發者會員中心建立一個。

      1. 在 Firebase 控制台的項目內,選擇齒輪圖標,選擇項目設置,然後選擇雲端訊息傳遞選項卡。

      2. iOS 應用程式設定下的APNs 驗證金鑰中,按一下上傳按鈕。

      3. 瀏覽到儲存金鑰的位置,選擇它,然後按一下「開啟」 。新增金鑰的金鑰 ID(可在Apple 開發者會員中心取得)並點選Upload

      如果您已有 APNs 證書,則可以上傳該證書。

  3. 當裝置無法接收 APNs 通知時,Firebase 使用 reCAPTCHA 來驗證請求。

    若要啟用 reCAPTCHA 驗證,請在 Xcode 中執行下列操作:

    1. 開啟專案配置:雙擊左側樹視圖中的專案名稱。從“目標”部分選擇您的應用程序,然後選擇“資訊”選項卡,並展開“URL 類型”部分。
    2. 點擊+按鈕,並將您的編碼應用程式 ID 新增為 URL 方案。您可以在 Firebase 控制台的「常規設定」頁面上的 iOS 應用程式部分中找到您的編碼應用程式 ID。將其他欄位留空。

      完成後,您的配置應類似於以下內容(但具有特定於應用程式的值):

      Xcode的自訂URL方案設定介面截圖
  4. 選用:Firebase 使用方法調配來自動取得應用程式的 APNs 令牌,處理 Firebase 傳送到您的應用程式的靜默推播通知,並在驗證期間自動攔截來自 reCAPTCHA 驗證頁面的自訂方案重定向。

    如果您不想使用 swizzling,請參閱 Firebase SDK 驗證文件中的附錄​​:使用電話登入而不使用 swizzling

登入

若要啟動 FirebaseUI 登入流程,首先初始化 FirebaseUI:

迅速

import FirebaseAuthUI

/* ... */

FirebaseApp.configure()
let authUI = FUIAuth.defaultAuthUI()
// You need to adopt a FUIAuthDelegate protocol to receive callback
authUI.delegate = self

Objective-C

@import FirebaseAuthUI;

...

[FIRApp configure];
FUIAuth *authUI = [FUIAuth defaultAuthUI];
// You need to adopt a FUIAuthDelegate protocol to receive callback
authUI.delegate = self;

然後,配置 FirebaseUI 以使用您想要支援的登入方法:

迅速

import FirebaseAuthUI
import FirebaseFacebookAuthUI
import FirebaseGoogleAuthUI
import FirebaseOAuthUI
import FirebasePhoneAuthUI

let providers: [FUIAuthProvider] = [
  FUIGoogleAuth(),
  FUIFacebookAuth(),
  FUITwitterAuth(),
  FUIPhoneAuth(authUI:FUIAuth.defaultAuthUI()),
]
self.authUI.providers = providers

Objective-C

@import FirebaseAuthUI;
@import FirebaseFacebookAuthUI;
@import FirebaseGoogleAuthUI;
@import FirebaseOAuthUI;
@import FirebasePhoneAuthUI;

...

NSArray<id<FUIAuthProvider>> *providers = @[
  [[FUIGoogleAuth alloc] init],
  [[FUIFacebookAuth alloc] init],
  [[FUITwitterAuth alloc] init],
  [[FUIPhoneAuth alloc] initWithAuthUI:[FUIAuth defaultAuthUI]]
];
_authUI.providers = providers;

如果您啟用了 Google 或 Facebook 登錄,請為 Google 和 Facebook 註冊流程的結果實現處理程序:

迅速

func application(_ app: UIApplication, open url: URL,
    options: [UIApplicationOpenURLOptionsKey : Any]) -> Bool {
  let sourceApplication = options[UIApplicationOpenURLOptionsKey.sourceApplication] as! String?
  if FUIAuth.defaultAuthUI()?.handleOpen(url, sourceApplication: sourceApplication) ?? false {
    return true
  }
  // other URL handling goes here.
  return false
}

Objective-C

- (BOOL)application:(UIApplication *)app
            openURL:(NSURL *)url
            options:(NSDictionary *)options {
  NSString *sourceApplication = options[UIApplicationOpenURLOptionsSourceApplicationKey];
  return [[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
}

最後,從FUIAuth取得AuthViewController的實例。然後,您可以將其呈現為應用程式的第一個視圖控制器,也可以從應用程式中的另一個視圖控制器呈現它。

迅速

若要取得登入方法選擇器:

let authViewController = authUI.authViewController()

如果您僅使用電話號碼登錄,則可以直接顯示電話號碼登入檢視:

let phoneProvider = FUIAuth.defaultAuthUI().providers.first as! FUIPhoneAuth
phoneProvider.signIn(withPresenting: currentlyVisibleController, phoneNumber: nil)

Objective-C

若要取得登入方法選擇器:

UINavigationController *authViewController = [authUI authViewController];

如果您僅使用電話號碼登錄,則可以直接顯示電話號碼登入檢視:

FUIPhoneAuth *phoneProvider = [FUIAuth defaultAuthUI].providers.firstObject;
[phoneProvider signInWithPresentingViewController:currentlyVisibleController phoneNumber:nil];

呈現身份驗證檢視且使用者登入後,結果將會回到didSignInWithUser:error:方法中的 FirebaseUI Auth 委託:

迅速

func authUI(_ authUI: FUIAuth, didSignInWith user: FIRUser?, error: Error?) {
  // handle user and error as necessary
}

Objective-C

   - (void)authUI:(FUIAuth *)authUI
didSignInWithUser:(nullable FIRUser *)user
            error:(nullable NSError *)error {
  // Implement this method to handle signed in user or error if any.
}

登出

FirebaseUI 提供了註銷 Firebase 身份驗證以及所有社交身分提供者的便利方法:

迅速

authUI.signOut()

Objective-C

[authUI signOut];

客製化

您可以透過子類化 FirebaseUI 的視圖控制器並在FUIAuth的委託方法中指定它們來自訂登入畫面:

迅速

func authPickerViewController(forAuthUI authUI: FUIAuth) -> FUIAuthPickerViewController {
  return FUICustomAuthPickerViewController(nibName: "FUICustomAuthPickerViewController",
                                           bundle: Bundle.main,
                                           authUI: authUI)
}

func emailEntryViewController(forAuthUI authUI: FUIAuth) -> FUIEmailEntryViewController {
  return FUICustomEmailEntryViewController(nibName: "FUICustomEmailEntryViewController",
                                           bundle: Bundle.main,
                                           authUI: authUI)
}

func passwordRecoveryViewController(forAuthUI authUI: FUIAuth, email: String) -> FUIPasswordRecoveryViewController {
  return FUICustomPasswordRecoveryViewController(nibName: "FUICustomPasswordRecoveryViewController",
                                                 bundle: Bundle.main,
                                                 authUI: authUI,
                                                 email: email)
}

func passwordSignInViewController(forAuthUI authUI: FUIAuth, email: String) -> FUIPasswordSignInViewController {
  return FUICustomPasswordSignInViewController(nibName: "FUICustomPasswordSignInViewController",
                                               bundle: Bundle.main,
                                               authUI: authUI,
                                               email: email)
}

func passwordSignUpViewController(forAuthUI authUI: FUIAuth, email: String) -> FUIPasswordSignUpViewController {
  return FUICustomPasswordSignUpViewController(nibName: "FUICustomPasswordSignUpViewController",
                                               bundle: Bundle.main,
                                               authUI: authUI,
                                               email: email)
}

func passwordVerificationViewController(forAuthUI authUI: FUIAuth, email: String, newCredential: AuthCredential) -> FUIPasswordVerificationViewController {
  return FUICustomPasswordVerificationViewController(nibName: "FUICustomPasswordVerificationViewController",
                                                     bundle: Bundle.main,
                                                     authUI: authUI,
                                                     email: email,
                                                     newCredential: newCredential)
}

Objective-C

- (FUIAuthPickerViewController *)authPickerViewControllerForAuthUI:(FUIAuth *)authUI {
  return [[FUICustomAuthPickerViewController alloc] initWithNibName:@"FUICustomAuthPickerViewController"
                                                             bundle:[NSBundle mainBundle]
                                                             authUI:authUI];
}

- (FUIEmailEntryViewController *)emailEntryViewControllerForAuthUI:(FUIAuth *)authUI {
  return [[FUICustomEmailEntryViewController alloc] initWithNibName:@"FUICustomEmailEntryViewController"
                                                             bundle:[NSBundle mainBundle]
                                                             authUI:authUI];

}

- (FUIPasswordSignInViewController *)passwordSignInViewControllerForAuthUI:(FUIAuth *)authUI
                                                                     email:(NSString *)email {
  return [[FUICustomPasswordSignInViewController alloc] initWithNibName:@"FUICustomPasswordSignInViewController"
                                                                 bundle:[NSBundle mainBundle]
                                                                 authUI:authUI
                                                                  email:email];

}

- (FUIPasswordSignUpViewController *)passwordSignUpViewControllerForAuthUI:(FUIAuth *)authUI
                                                                     email:(NSString *)email {
  return [[FUICustomPasswordSignUpViewController alloc] initWithNibName:@"FUICustomPasswordSignUpViewController"
                                                                 bundle:[NSBundle mainBundle]
                                                                 authUI:authUI
                                                                  email:email];

}

- (FUIPasswordRecoveryViewController *)passwordRecoveryViewControllerForAuthUI:(FUIAuth *)authUI
                                                                         email:(NSString *)email {
  return [[FUICustomPasswordRecoveryViewController alloc] initWithNibName:@"FUICustomPasswordRecoveryViewController"
                                                                   bundle:[NSBundle mainBundle]
                                                                   authUI:authUI
                                                                    email:email];

}

- (FUIPasswordVerificationViewController *)passwordVerificationViewControllerForAuthUI:(FUIAuth *)authUI
                                                                                 email:(NSString *)email
                                                                         newCredential:(FIRAuthCredential *)newCredential {
  return [[FUICustomPasswordVerificationViewController alloc] initWithNibName:@"FUICustomPasswordVerificationViewController"
                                                                       bundle:[NSBundle mainBundle]
                                                                       authUI:authUI
                                                                        email:email
                                                                newCredential:newCredential];
}

您可以自訂應用程式服務條款的 URL,該連結位於帳戶建立畫面:

迅速

let kFirebaseTermsOfService = URL(string: "https://example.com/terms")!
authUI.tosurl = kFirebaseTermsOfService

Objective-C

authUI.TOSURL = [NSURL URLWithString:@"https://example.com/terms"];

最後,您可以透過指定自訂捆綁包來自訂向使用者顯示的訊息和提示:

迅速

authUI.customStringsBundle = NSBundle.mainBundle() // Or any custom bundle.

Objective-C

authUI.customStringsBundle = [NSBundle mainBundle]; // Or any custom bundle.

下一步

  • 有關使用和自訂 FirebaseUI 的更多信息,請參閱 GitHub 上的自述文件。
  • 如果您在 FirebaseUI 中發現並出現問題並想要回報該問題,請使用GitHub 問題追蹤器