FirebaseUI是建立在Firebase身份驗證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控制台中,打開“身份驗證”部分。在“登錄方法”選項卡上,啟用“電子郵件/密碼”提供程序。請注意,必須啟用電子郵件/密碼登錄才能使用電子郵件鏈接登錄。
在同一部分中,啟用“電子郵件鏈接(無密碼登錄)”登錄方法,然後單擊“保存” 。
您可以通過初始化啟用電子郵件鏈接標誌
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];
此外,您需要將傳遞給初始化器的URL列入白名單。您可以在Firebase控制台中,打開“身份驗證”部分。在“登錄方法”選項卡上,在“授權域”下添加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匿名數據要求”部分中的說明進行操作。
將“使用Apple登錄”功能添加到您的權利文件中。
初始化配置為使用Apple登錄的OAuth提供程序實例:
迅速
provider = FUIOAuth.appleAuthProvider()
物鏡
FUIOAuth *provider = [FUIOAuth appleAuthProvider];
谷歌
在Firebase控制台中,打開“身份驗證”部分,然後啟用Google登錄。
在Xcode項目中將反向的客戶ID添加為URL方案。您可以在
GoogleService-Info.plist
文件中找到此值。
臉書
按照Facebook的入門頁面設置Facebook登錄SDK。
在Firebase控制台中,打開“身份驗證”部分並啟用Facebook。要啟用Facebook登錄,您必須提供Facebook App ID和App Secret,您可以在Facebook Developers控制台中獲得它們。
從“項目設置”>“功能”屏幕中,在Xcode項目中啟用鑰匙串共享。
在您的Xcode項目中,將
fb FACEBOOK_APP_ID
添加為URL方案。將您的Facebook應用ID和顯示名稱添加到
Info.plist
文件中:鍵 值 FacebookAppID FACEBOOK_APP_ID
(例如1234567890
)FacebookDisplayName 您的應用名稱
推特
在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身份驗證密鑰,請參閱使用FCM配置APNs 。
在Firebase控制台的項目內部,選擇齒輪圖標,選擇Project Settings ,然後選擇Cloud Messaging選項卡。
在iOS應用配置下的APNs身份驗證密鑰中,點擊上傳按鈕。
瀏覽到保存密鑰的位置,選擇它,然後單擊“打開” 。添加密鑰的密鑰ID(可在Apple Developer Member Center中的證書,標識符和配置文件中找到),然後單擊Upload 。
如果您已經擁有APNs證書,則可以上傳該證書。
當無法在設備上接收到APNs通知時,Firebase將使用reCAPTCHA來驗證請求。
要啟用reCAPTCHA驗證,如果尚未將反向客戶端ID作為URL方案添加(例如,啟用Google登錄),請在Xcode項目中添加。您可以在
GoogleService-Info.plist
文件中找到此值。可選: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
目標C
@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
目標C
@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
}
目標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)
}
物鏡
- (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的更多信息,請參閱GitHub上的README文件。
- 如果您在FirebaseUI中找到並發布並想報告,請使用GitHub問題跟踪器。