Save the date - Google I/O returns May 18-20. Register to get the most out of the digital experience: Build your schedule, reserve space, participate in Q&As, earn Google Developer profile badges, and more. Register now
本頁面由 Cloud Translation API 翻譯而成。
Switch to English

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

FirebaseUI是在Firebase身份驗證SDK之上構建的庫,可提供可在您的應用程序中使用的嵌入式UI流程。 FirebaseUI具有以下優點:

  • 多個提供商:電子郵件/密碼,電子郵件鏈接,電話身份驗證,Google登錄,Facebook登錄和Twitter登錄的登錄流程。
  • 帳戶管理:處理帳戶管理任務的流程,例如帳戶創建和密碼重置。
  • 匿名帳戶鏈接:自動將匿名帳戶鏈接到身份提供者的流程。
  • 可自定義:自定義FirebaseUI的外觀以匹配您的應用。另外,由於FirebaseUI是開源的,因此您可以分叉項目並完全根據需要自定義它。

在你開始之前

  1. 將Firebase添加到您的iOS項目

  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. 您可以通過初始化啟用電子郵件鏈接標誌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)

物鏡

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. 抓住深層鏈接後,您需要將其傳遞給auth UI,以便進行處理。

迅速

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

物鏡

[[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()
    

    物鏡

    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. 從“項目設置”>“功能”屏幕中,在Xcode項目中啟用鑰匙串共享。

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

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

    鑰匙價值
    FacebookAppID FACEBOOK_APP_ID (例如1234567890
    FacebookDisplayName您的應用名稱

推特

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

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

    迅速

    provider = FUIOAuth.twitterAuthProvider()
    

    物鏡

    FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
    

電話號碼

  1. Firebase控制台中,打開“身份驗證”部分並啟用電話號碼登錄。

  2. Firebase必須能夠驗證您的應用發出了電話號碼登錄請求。完成此操作的方法之一是通過APNs通知。有關詳細信息,請參見啟用應用驗證

    啟用APNs通知以與Firebase身份驗證一起使用:

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

    2. 將您的APNs身份驗證密鑰上載到Firebase。如果您還沒有APNs身份驗證密鑰,請參閱使用FCM配置APNs

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

      2. iOS應用配置下的APNs身份驗證密鑰中,單擊“上載”按鈕。

      3. 瀏覽到保存密鑰的位置,選擇它,然後單擊“打開” 。添加密鑰的密鑰ID(可在Apple Developer Member Center中的證書,標識符和配置文件中找到),然後點擊上傳

      如果您已經擁有APNs證書,則可以上載該證書。

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

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

  4. 可選:Firebase使用方法刷新來自動獲取應用程序的APNs令牌,處理Firebase發送到您的應用程序的無提示推送通知,並在驗證過程中自動攔截來自reCAPTCHA驗證頁面的自定義方案重定向。

    如果您不希望使用繁瑣的操作,請參閱Firebase SDK身份驗證文檔中的附錄:使用電話登錄而不進行繁瑣的操作。

登入

要啟動FirebaseUI登錄流程,請首先初始化FirebaseUI:

迅速

import FirebaseUI

/* ... */

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

物鏡

@import FirebaseUI;

...

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

然後,將FirebaseUI配置為使用您要支持的登錄方法:

迅速

import FirebaseUI

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

物鏡

@import FirebaseUI;

...

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
}

物鏡

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

物鏡

要獲取登錄方法選擇器:

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
}

物鏡

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

物鏡

[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)
}

物鏡

- (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

物鏡

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

最後,您可以通過指定自定義捆綁包來定制向用戶顯示的消息和提示:

迅速

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

物鏡

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

下一步

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