Catch up on everthing we announced at this year's Firebase Summit. Learn more

使用 FirebaseUI 輕鬆將登錄添加到您的 iOS 應用

FirebaseUI是建立在火力地堡認證SDK的頂庫,提供了您的應用程序使用插入式UI流。 FirebaseUI 具有以下優勢:

  • 多個供應商:登錄電子郵件/密碼,電子郵件中的鏈接,手機認證,谷歌帳戶登錄,Facebook的登錄和Twitter登錄流程。
  • 賬戶管理:流程來處理帳戶管理任務,如賬戶創建和密碼重置。
  • 匿名帳戶鏈接:流向匿名賬戶身份提供商自動鏈接。
  • 可定制:定制FirebaseUI的外觀,以符合您的應用程序。此外,由於 FirebaseUI 是開源的,您可以分叉該項目並完全根據您的需要對其進行自定義。

在你開始之前

  1. 添加火力地堡您的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 登錄用戶之前,您必須啟用並配置您想要支持的登錄方法。

電子郵件地址和密碼

火力地堡控制台,打開身份驗證部分,啟用電子郵件和密碼認證。

  1. 火力地堡控制台,打開驗證部分。在登錄方法選項卡,選中電子郵件/密碼提供商。請注意,必須啟用電子郵件/密碼登錄才能使用電子郵件鏈接登錄。

  2. 在同一節,使電子郵件的鏈接(無密碼登錄)登錄方法,然後單擊保存

  3. 您可以通過初始化啟用電子郵件鏈接標誌FUIEmailAuth與實例FIREmailLinkAuthSignInMethod 。您還需要提供一個有效的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 列入白名單。您可以在這樣做火力地堡控制台,打開驗證部分。在登錄方法選項卡,添加在授權域的URL。

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

迅速

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

目標-C

[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
  1. 電子郵件鏈接登錄在FirebaseUI-IOS兼容於FirebaseUI-的AndroidFirebaseUI幅,其中一個用戶開始從FirebaseUI-Android的流量可以登錄與FirebaseUI的Web打開鏈接,完整。對於相反的流程也是如此。

蘋果

  1. 按照開始之前遵守蘋果匿名在火力地堡數據需求部分註冊在與蘋果的指南。

  2. 將“使用 Apple 登錄”功能添加到您的權利文件中。

  3. 初始化為通過 Apple 登錄而配置的 OAuth 提供程序實​​例:

    迅速

    provider = FUIOAuth.appleAuthProvider()
    

    目標-C

    FUIOAuth *provider = [FUIOAuth appleAuthProvider];
    

谷歌

  1. 火力地堡控制台,打開身份驗證部分,使谷歌登錄。

  2. 將反向客戶端 ID 添加為 Xcode 項目中的 URL 方案。你可以找到在這個值GoogleService-Info.plist文件。

Facebook

  1. 按照建立Facebook的登錄SDK Facebook的入門頁面

  2. 火力地堡控制台,打開身份驗證部分,使Facebook的。要啟用 Facebook 登錄,您必須提供您的 Facebook 應用 ID 和應用機密,您可以在 Facebook 開發者控制台中獲取這些信息。

  3. 項目設置>功能屏幕Xcode項目啟動鑰匙串共享。

  4. 加入fb FACEBOOK_APP_ID在Xcode項目的URL方案。

  5. 添加Facebook應用程序ID和顯示名稱為Info.plist文件:

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

    迅速

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

    目標-C

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

  7. 如果你想使用Facebook的登錄有限公司,集useLimitedLogin的財產FUIFacebookAuth實例。

    迅速

    provider.useLimitedLogin = true
    

    目標-C

    provider.useLimitedLogin = YES;
    

推特

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

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

    迅速

    provider = FUIOAuth.twitterAuthProvider()
    

    目標-C

    FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
    

電話號碼

  1. 火力地堡控制台,打開身份驗證部分,使電話號碼登錄。

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

    要啟用 APNs 通知以用於 Firebase 身份驗證:

    1. 在Xcode中,啟用推送通知,為您的項目。

    2. 將您的 APNs 身份驗證密鑰上傳到 Firebase。如果你不已經有一個APN的認證密鑰,確保在創建一個蘋果開發者會員中心

      1. 在火力地堡控制台你的項目中,選擇齒輪圖標,選擇項目設置,然後選擇雲端通訊標籤。

      2. 在根據iOS應用配置的APN認證密鑰,點擊上傳按鈕。

      3. 瀏覽到您保存密鑰的位置,選擇它,然後單擊打開。添加鍵ID為鍵(可在蘋果開發者會員中心),然後單擊上傳

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

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

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

  4. 可選:火力地堡使用方法交叉混合自動獲得您的應用程序的令牌的APN,辦理無聲推送通知是火力地堡發送到您的應用程序,並自動攔截從驗證碼驗證頁面驗證過程中自定義方案重定向。

    如果你不喜歡使用混寫,見附錄:使用手機登錄不混寫在火力地堡SDK文檔驗證。

登入

要啟動 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];
}

最後,得到的一個實例AuthViewControllerFUIAuth 。然後,您可以將其作為應用程序的第一個視圖控制器呈現,也可以從應用程序中的另一個視圖控制器呈現。

迅速

要獲取登錄方法選擇器:

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];

你目前的身份驗證視圖和用戶登錄後,將結果返回給在該FirebaseUI驗證委託didSignInWithUser:error:方法:

迅速

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,該 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的更多信息,請參閱README GitHub上的文件。
  • 如果你發現在FirebaseUI問題,並希望報告它,使用GitHub的問題跟踪