使用 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 控制台中執行此操作,打開身份驗證部分。在登錄方法選項卡上,在Authorized domain下添加 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. 將 Sign in with Apple 功能添加到您的權利文件中。

  3. 初始化為 Sign in with Apple 配置的 OAuth 提供程序實​​例:

    迅速

    provider = FUIOAuth.appleAuthProvider()
    

    Objective-C

    FUIOAuth *provider = [FUIOAuth appleAuthProvider];
    

谷歌

  1. Firebase 控制台中,打開身份驗證部分並啟用 Google 登錄。

  2. 在 Xcode 項目中添加反向客戶端 ID 作為 URL 方案。您可以在GoogleService-Info.plist文件中找到此值。

Facebook

  1. 按照Facebook 的入門頁面設置 Facebook 登錄 SDK。

  2. Firebase 控制台中,打開身份驗證部分並啟用 Facebook。要啟用 Facebook 登錄,您必須提供您的 Facebook 應用程序 ID 和應用程序密碼,您可以在 Facebook 開發人員控制台中獲取這些信息。

  3. Project Settings > Capabilities屏幕在您的 Xcode 項目中啟用鑰匙串共享。

  4. 在您的 Xcode 項目中添加fb FACEBOOK_APP_ID作為 URL 方案。

  5. 將您的 Facebook 應用 ID 和顯示名稱添加到Info.plist文件中:

    鑰匙價值
    臉書AppID 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 Developer Member Center中創建一個。

      1. 在 Firebase 控制台的項目中,選擇齒輪圖標,選擇Project Settings ,然後選擇Cloud Messaging選項卡。

      2. iOS app configuration下的APNs authentication key中,單擊Upload按鈕。

      3. 瀏覽到您保存密鑰的位置,選擇它,然後單擊打開。添加密鑰的密鑰 ID(可在Apple Developer Member Center中獲得),然後單擊Upload

      如果您已經擁有 APNs 證書,則可以改為上傳證書。

  3. 當設備上無法接收 APNs 通知時,Firebase 會使用 reCAPTCHA 來驗證請求。

    要啟用 reCAPTCHA 驗證,如果您尚未將反向客戶端 ID 添加為 URL 方案(例如,啟用 Google 登錄),請在您的 Xcode 項目中執行此操作。您可以在GoogleService-Info.plist文件中找到此值。

  4. 可選:Firebase 使用方法 swizzling 自動獲取您應用的 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 身份驗證委託:

迅速

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,該 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 上的README文件。
  • 如果您在 FirebaseUI 中發現問題並想報告它,請使用GitHub 問題跟踪器