FirebaseUI是一個構建在 Firebase Authentication SDK 之上的庫,它提供了在您的應用中使用的嵌入式 UI 流程。 FirebaseUI 提供以下優勢:
- 多個提供商:電子郵件/密碼、電子郵件鏈接、電話身份驗證、Google 登錄、Facebook 登錄和 Twitter 登錄的登錄流程。
- 帳戶管理:處理帳戶管理任務的流程,例如帳戶創建和密碼重置。
- 匿名帳戶鏈接:自動將匿名帳戶鏈接到身份提供者的流程。
- 可定制:定制 FirebaseUI 的外觀以匹配您的應用。此外,由於 FirebaseUI 是開源的,您可以分叉該項目並完全根據您的需要對其進行自定義。
在你開始之前
將 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'
如果您尚未將您的應用程序連接到您的 Firebase 項目,請從Firebase 控制台執行此操作。
設置登錄方式
在您可以使用 Firebase 登錄用戶之前,您必須啟用並配置您想要支持的登錄方法。
電子郵件地址和密碼
在Firebase 控制台中,打開身份驗證部分並啟用電子郵件和密碼身份驗證。
電子郵件鏈接認證
在Firebase 控制台中,打開身份驗證部分。在登錄方法選項卡上,啟用電子郵件/密碼提供程序。請注意,必須啟用電子郵件/密碼登錄才能使用電子郵件鏈接登錄。
在同一部分中,啟用電子郵件鏈接(無密碼登錄)登錄方法並單擊保存。
您可以通過使用
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];
此外,您需要將傳遞給初始化器的 URL 列入白名單。您可以在Firebase 控制台中執行此操作,打開身份驗證部分。在Sign in method選項卡上,在Authorized domains下添加 URL。
一旦捕獲到深層鏈接,就需要將其傳遞給 auth UI,以便對其進行處理。
迅速
FUIAuth.defaultAuthUI()!.handleOpen(url, sourceApplication: sourceApplication)
目標-C
[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
- FirebaseUI-iOS 中的電子郵件鏈接登錄與FirebaseUI-Android和FirebaseUI-web兼容,其中一位從 FirebaseUI-Android 啟動流程的用戶可以打開鏈接並使用 FirebaseUI-web 完成登錄。相反的流程也是如此。
蘋果
請遵循 Firebase使用 Apple 登錄指南中的開始之前和遵守 Apple 匿名數據要求部分。
將 Sign in with Apple 功能添加到您的權利文件中。
初始化為使用 Apple 登錄配置的 OAuth 提供程序實例:
迅速
provider = FUIOAuth.appleAuthProvider()
目標-C
FUIOAuth *provider = [FUIOAuth appleAuthProvider];
谷歌
在Firebase 控制台中,打開身份驗證部分並啟用 Google 登錄。
下載項目的
GoogleService-Info.plist
文件的新副本並將其複製到 Xcode 項目。用新版本覆蓋任何現有版本。 (請參閱將 Firebase 添加到您的 iOS 項目。)在 Xcode 項目中將反向客戶端 ID 添加為 URL 方案。您可以在
GoogleService-Info.plist
文件中找到該值。Facebook
按照Facebook 的入門頁面設置 Facebook 登錄 SDK。
在Firebase 控制台中,打開身份驗證部分並啟用 Facebook。要啟用 Facebook 登錄,您必須提供您的 Facebook App ID 和 App Secret,您可以在 Facebook Developers 控制台中獲取它們。
從Project Settings > Capabilities屏幕在 Xcode 項目中啟用鑰匙串共享。
在您的 Xcode 項目中添加
fb FACEBOOK_APP_ID
作為 URL 方案。將您的 Facebook App ID 和顯示名稱添加到
Info.plist
文件:鑰匙 價值 臉書AppID FACEBOOK_APP_ID
(例如,1234567890
)臉書顯示名稱 您的應用名稱 初始化一個 Facebook 提供者實例:
迅速
provider = FUIFacebookAuth(authUI: FUIAuth.defaultAuthUI())
目標-C
FUIFacebookAuth *provider = [[FUIFacebookAuth alloc] initWithAuthUI:[FUIAuth defaultAuthUI]];
如果您想使用Facebook Limited Login ,請在
FUIFacebookAuth
實例上設置useLimitedLogin
屬性。迅速
provider.useLimitedLogin = true
目標-C
provider.useLimitedLogin = YES;
推特
在Firebase 控制台中,打開身份驗證部分並啟用 Twitter。要啟用 Twitter 登錄,您必須提供您的 Twitter API 使用者密鑰和機密,您可以在 Twitter 應用程序管理控制台中獲取這些密鑰和機密。
初始化為 Twitter 登錄配置的 OAuth 提供程序實例:
迅速
provider = FUIOAuth.twitterAuthProvider()
目標-C
FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
電話號碼
在Firebase 控制台中,打開身份驗證部分並啟用電話號碼登錄。
Firebase 必須能夠驗證電話號碼登錄請求是否來自您的應用。實現這一點的方法之一是通過 APNs 通知。有關詳細信息,請參閱啟用應用程序驗證。
要啟用 APNs 通知以用於 Firebase 身份驗證:
在 Xcode 中,為您的項目啟用推送通知。
將您的 APNs 身份驗證密鑰上傳到 Firebase。如果您還沒有 APNs 身份驗證密鑰,請確保在Apple Developer Member Center中創建一個。
在 Firebase 控制台的項目內,選擇齒輪圖標,選擇Project Settings ,然後選擇Cloud Messaging選項卡。
在iOS app configuration下的APNs authentication key中,點擊Upload按鈕。
瀏覽到您保存密鑰的位置,選擇它,然後單擊打開。添加密鑰的密鑰 ID(可在Apple Developer Member Center中獲得)並單擊Upload 。
如果您已經擁有 APNs 證書,則可以改為上傳證書。
當無法在設備上接收到 APNs 通知時,Firebase 會使用 reCAPTCHA 來驗證請求。
要啟用 reCAPTCHA 驗證,請在 Xcode 中執行以下操作:
- 打開您的項目配置:雙擊左側樹視圖中的項目名稱。從TARGETS部分選擇您的應用程序,然後選擇Info選項卡,並展開URL Types部分。
- 單擊+按鈕,並將您的編碼應用程序 ID 添加為 URL 方案。您可以在 Firebase 控制台的常規設置頁面上的 iOS 應用程序部分找到您的編碼應用程序 ID。將其他字段留空。
完成後,您的配置應類似於以下內容(但具有特定於應用程序的值):
可選: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 問題跟踪器。