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

FirebaseUI是一個構建在 Firebase Authentication 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)

目標-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 控制台中執行此操作，打開身份驗證部分。在Sign in method選項卡上，在Authorized domains下添加 URL。

  2. 一旦捕獲到深層鏈接，就需要將其傳遞給 auth UI，以便對其進行處理。

迅速

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

目標-C

[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
  1. FirebaseUI-iOS 中的電子郵件鏈接登錄與FirebaseUI-Android和FirebaseUI-web兼容，其中一位從 FirebaseUI-Android 啟動流程的用戶可以打開鏈接並使用 FirebaseUI-web 完成登錄。相反的流程也是如此。

蘋果

  1. 請遵循 Firebase使用 Apple 登錄指南中的開始之前和遵守 Apple 匿名數據要求部分。

  2. 將 Sign in with Apple 功能添加到您的權利文件中。

  3. 初始化為使用 Apple 登錄配置的 OAuth 提供程序實​​例：

    迅速

    provider = FUIOAuth.appleAuthProvider()

    目標-C

    FUIOAuth *provider = [FUIOAuth appleAuthProvider];

谷歌

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

  2. 下載項目的GoogleService-Info.plist文件的新副本並將其複製到 Xcode 項目。用新版本覆蓋任何現有版本。 （請參閱將 Firebase 添加到您的 iOS 項目。）

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

    Facebook

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

  5. 在Firebase 控制台中，打開身份驗證部分並啟用 Facebook。要啟用 Facebook 登錄，您必須提供您的 Facebook App ID 和 App Secret，您可以在 Facebook Developers 控制台中獲取它們。

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

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

  8. 將您的 Facebook App ID 和顯示名稱添加到Info.plist文件：

    鑰匙價值
    臉書AppID FACEBOOK_APP_ID （例如， 1234567890 ）
    臉書顯示名稱您的應用名稱

  9. 初始化一個 Facebook 提供者實例：

    迅速

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

    目標-C

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

  10. 如果您想使用Facebook Limited Login ，請在FUIFacebookAuth實例上設置useLimitedLogin屬性。

    迅速

    provider.useLimitedLogin = true

    目標-C

    provider.useLimitedLogin = YES;

推特

  1. 在Firebase 控制台中，打開身份驗證部分並啟用 Twitter。要啟用 Twitter 登錄，您必須提供您的 Twitter API 使用者密鑰和機密，您可以在 Twitter 應用程序管理控制台中獲取這些密鑰和機密。

  2. 初始化為 Twitter 登錄配置的 OAuth 提供程序實​​例：

    迅速

    provider = FUIOAuth.twitterAuthProvider()

    目標-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 驗證，請在 Xcode 中執行以下操作：

    1. 打開您的項目配置：雙擊左側樹視圖中的項目名稱。從TARGETS部分選擇您的應用程序，然後選擇Info選項卡，並展開URL Types部分。
    2. 單擊+按鈕，並將您的編碼應用程序 ID 添加為 URL 方案。您可以在 Firebase 控制台的常規設置頁面上的 iOS 應用程序部分找到您的編碼應用程序 ID。將其他字段留空。

      完成後，您的配置應類似於以下內容（但具有特定於應用程序的值）：

      Xcode自定義URL scheme設置界面截圖

  4. 可選：Firebase 使用 method 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

目標-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

目標-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
}

目標-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)

目標-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
}

目標-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()

目標-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)
}

目標-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

目標-C

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

最後，您可以通過指定自定義包來自定義向用戶顯示的消息和提示：

迅速

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

目標-C

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

下一步

  • 有關使用和自定義 FirebaseUI 的更多信息，請參閱 GitHub 上的README文件。
  • 如果您在 FirebaseUI 中發現問題並想報告它，請使用GitHub 問題跟踪器。