FirebaseUI 是一個建構程式庫 Firebase Authentication SDK 上方提供了直接的 UI 流程 。FirebaseUI 具備下列優點：
- 多個供應商：電子郵件/密碼、電子郵件連結、電話的登入流程 驗證、Google 登入、Facebook 登入和 Twitter 登入。
- 帳戶管理：處理帳戶管理工作的流程，例如 建立帳戶及重設密碼。
- 匿名帳戶連結：自動連結匿名帳戶流程 連線至識別資訊提供者
- 可自訂：配合應用程式自訂 FirebaseUI 的外觀。另外， 因為 FirebaseUI 是開放原始碼 符合您的需求
事前準備
將 FirebaseUI 新增至 Podfile：
pod 'FirebaseUI'如有需要，您可以只新增驗證元件和供應商 或是使用：
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 控制台中開啟「驗證」專區。每月中的特定幾天 「Sign in method」分頁，啟用「Email/Password」供應商。注意事項 您必須啟用電子郵件或密碼登入功能，才能使用電子郵件連結登入。
在同一部分中啟用「電子郵件連結 (無密碼登入)」登入功能 方法並點選「儲存」。
如要啟用電子郵件連結登入功能，請初始化
FUIEmailAuth含有FIREmailLinkAuthSignInMethod的執行個體此外，您也必須提供 有效的FIRActionCodeSettings物件，其中handleCodeInApp設為 true。
Swift
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)
Objective-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];
此外，請將傳遞至 iniatializer 的網址加入許可清單。 您可以在 Firebase 控制台中開啟「驗證」。 專區。在「Sign in method」分頁中，將網址新增至 授權網域：
擷取深層連結後，您必須將其傳遞至驗證 UI 可以處理
Swift
FUIAuth.defaultAuthUI()!.handleOpen(url, sourceApplication: sourceApplication)
Objective-C
[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
- FirebaseUI-iOS 的電子郵件連結登入功能與 FirebaseUI-Android 版 和 FirebaseUI 網站 在 FirebaseUI-Android 啟動流程的使用者可開啟連結 並透過 FirebaseUI-web 完成登入。相反地 流程
Apple
遵循事前準備和參考 Apple 匿名資料 相關規定 Firebase 的「使用 Apple 帳戶登入」指南。
在授權檔案中加入「使用 Apple 帳戶登入」功能。
初始化為「使用 Apple 登入」設定的 OAuth 提供者執行個體：
Swift
provider = FUIOAuth.appleAuthProvider()
Objective-C
FUIOAuth *provider = [FUIOAuth appleAuthProvider];
- 使用此教學課程設定 Google 登入功能
請按照下列步驟設定 Facebook Login SDK Facebook 的開始使用頁面。
在 Firebase 控制台中開啟「驗證」部分，然後啟用 Facebook。如要啟用 Facebook 登入功能，您必須提供 Facebook 應用程式 ID 您可以前往 Facebook 開發人員主控台 取得「應用程式密鑰」和「應用程式密鑰」
前往 [專案設定] > [在 Xcode 專案中啟用鑰匙圈共用] 功能，請前往 [專案設定] > 功能螢幕。
將
fbFACEBOOK_APP_ID新增為網址配置 Xcode 專案在
Info.plist檔案中新增 Facebook 應用程式 ID 和顯示名稱：鍵 值 Facebook 應用程式 ID FACEBOOK_APP_ID(例如：1234567890)Facebook 顯示名稱 應用程式名稱 初始化 Facebook 提供者執行個體：
Swift
provider = FUIFacebookAuth(authUI: FUIAuth.defaultAuthUI())
Objective-C
FUIFacebookAuth *provider = [[FUIFacebookAuth alloc] initWithAuthUI:[FUIAuth defaultAuthUI]];
如要使用 Facebook Limited Login， 設定
FUIFacebookAuth執行個體上的useLimitedLogin屬性。Swift
provider.useLimitedLogin = true
Objective-C
provider.useLimitedLogin = YES;
在 Firebase 控制台中開啟「驗證」部分，然後啟用 Twitter。如要啟用 Twitter 登入功能，您必須提供 Twitter API 用戶端金鑰和密鑰：您可以在 Twitter 應用程式中取得。 管理控制台。
初始化為 Twitter 登入設定的 OAuth 提供者執行個體：
Swift
provider = FUIOAuth.twitterAuthProvider()
Objective-C
FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
電話號碼
在 Firebase 控制台中開啟「驗證」部分，然後啟用 電話號碼登入。
Firebase 必須能驗證電話號碼登入要求 找出來自您的應用程式的流量可藉助 APNs 達成 通知。詳情請見 啟用應用程式驗證功能 。
如何啟用 APN 通知以便與 Firebase Authentication 搭配使用：
在 Xcode 中啟用推播通知 。
將 APN 驗證金鑰上傳至 Firebase。 如果您還沒有 APN 驗證金鑰，請務必前往 Apple Developer Member Center：
-
在 Firebase 控制台的專案中，選取 齒輪圖示，選取 「Project Settings」，然後選取 「雲端通訊」分頁。
-
在「iOS 應用程式設定」下方的「APNs 驗證金鑰」中， 按一下「上傳」圖示 按鈕。
-
瀏覽至儲存金鑰的位置並選取金鑰，然後按一下 開啟。加入金鑰的金鑰 ID (位於 Apple Developer Member Center 時，按一下 按一下「上傳」。
如果您已有 APN 憑證，則可上傳憑證 。
-
如果無法在裝置上接收 APN 通知，Firebase 會使用 reCAPTCHA 驗證要求。
如要啟用 reCAPTCHA 驗證，請在 Xcode 中執行下列步驟：
- 開啟專案設定：按兩下 左側樹狀檢視中從「目標」部分中選取應用程式，然後 選取「資訊」分頁標籤，然後展開「網址類型」部分。
- 點選「+」按鈕，然後將經過編碼的應用程式 ID 新增為網址
配置。如要找到經過編碼的應用程式 ID，請前往
一般
Firebase 控制台的「設定」頁面，位於 iOS 裝置的專區
應用程式。將其他欄位留白。
設定完成後，設定看起來應該會與 後面 (但採用您應用程式的專屬值)：
選用：Firebase 會使用方法掃描功能，自動取得 應用程式的 APN 權杖，用於處理 Firebase 的無訊息推播通知 並自動攔截自訂配置重新導向 驗證應用程式時，請點選 reCAPTCHA 驗證頁面中的註解。
如果不想使用擦拭功能，請參閱「附錄：在不移位的情況下使用手機登入」 。
登入
如要啟動 FirebaseUI 登入流程，請先初始化 FirebaseUI：
Swift
import FirebaseAuthUI
/* ... */
FirebaseApp.configure()
let authUI = FUIAuth.defaultAuthUI()
// You need to adopt a FUIAuthDelegate protocol to receive callback
authUI.delegate = self
Objective-C
@import FirebaseAuthUI;
...
[FIRApp configure];
FUIAuth *authUI = [FUIAuth defaultAuthUI];
// You need to adopt a FUIAuthDelegate protocol to receive callback
authUI.delegate = self;
接著，將 FirebaseUI 設為使用您要支援的登入方式：
Swift
import FirebaseAuthUI
import FirebaseFacebookAuthUI
import FirebaseGoogleAuthUI
import FirebaseOAuthUI
import FirebasePhoneAuthUI
let providers: [FUIAuthProvider] = [
FUIGoogleAuth(),
FUIFacebookAuth(),
FUITwitterAuth(),
FUIPhoneAuth(authUI:FUIAuth.defaultAuthUI()),
]
self.authUI.providers = providers
Objective-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 註冊流程：
Swift
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
}
Objective-C
- (BOOL)application:(UIApplication *)app
openURL:(NSURL *)url
options:(NSDictionary *)options {
NSString *sourceApplication = options[UIApplicationOpenURLOptionsSourceApplicationKey];
return [[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
}
最後，從 FUIAuth 取得 AuthViewController 的例項。接著
顯示為應用程式的第一個檢視畫面
應用程式中的另一個檢視控制器。
Swift
如何取得登入方式選取器：
let authViewController = authUI.authViewController()
如果您只使用電話號碼登入，可以顯示電話號碼 直接登入畫面：
let phoneProvider = FUIAuth.defaultAuthUI().providers.first as! FUIPhoneAuth
phoneProvider.signIn(withPresenting: currentlyVisibleController, phoneNumber: nil)
Objective-C
如何取得登入方式選取器：
UINavigationController *authViewController = [authUI authViewController];
如果您只使用電話號碼登入，可以顯示電話號碼 直接登入畫面：
FUIPhoneAuth *phoneProvider = [FUIAuth defaultAuthUI].providers.firstObject;
[phoneProvider signInWithPresentingViewController:currentlyVisibleController phoneNumber:nil];
呈現驗證檢視畫面且使用者登入後，結果會
傳回至 didSignInWithUser:error: 中的 FirebaseUI 驗證委派項目
方法：
Swift
func authUI(_ authUI: FUIAuth, didSignInWith user: FIRUser?, error: Error?) {
// handle user and error as necessary
}
Objective-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 驗證的便利方法 以及所有社交身分提供者：
Swift
authUI.signOut()
Objective-C
[authUI signOut];
自訂
您可以將 FirebaseUI 的檢視畫面建立子類別，以自訂登入畫面
控制器並透過 FUIAuth 的委派方法指定這些控制器：
Swift
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)
}
Objective-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];
}
您可以自訂應用程式服務條款的網址，這個連結位於 帳戶建立畫面：
Swift
let kFirebaseTermsOfService = URL(string: "https://example.com/terms")!
authUI.tosurl = kFirebaseTermsOfService
Objective-C
authUI.TOSURL = [NSURL URLWithString:@"https://example.com/terms"];
最後，您可以自訂要向使用者顯示的訊息和提示，方法如下： 指定自訂軟體包：
Swift
authUI.customStringsBundle = NSBundle.mainBundle() // Or any custom bundle.
Objective-C
authUI.customStringsBundle = [NSBundle mainBundle]; // Or any custom bundle.
後續步驟
- 如要進一步瞭解如何使用及自訂 FirebaseUI，請參閱 讀我資訊
- 如果您在 FirebaseUI 中發現問題並想回報，請使用 GitHub 問題追蹤工具。