使用 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. 在 Xcode 項目中將反向客戶端 ID 添加為 URL 方案。您可以在GoogleService-Info.plist文件中找到該值。

Facebook

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

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

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

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

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

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

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

    迅速

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

    目標-C

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

  7. 如果您想使用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 驗證，如果您尚未將反向客戶端 ID 添加為 URL 方案（例如，啟用 Google 登錄），請在您的 Xcode 項目中執行此操作。您可以在GoogleService-Info.plist文件中找到該值。

  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 問題跟踪器。