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 控制台開啟「Authentication」部分，啟用電子郵件和密碼驗證。
電子郵件連結驗證
在 Firebase 控制台開啟「驗證」專區。在「Sign in method」分頁中，啟用「Email/Password」供應商。請注意，您必須啟用電子郵件或密碼登入功能，才能使用電子郵件連結登入功能。
在相同區段中，啟用「Email link (無密碼登入)」登入方式，然後按一下「Save」(儲存)。
您可以透過使用
FIREmailLinkAuthSignInMethod初始化FUIEmailAuth例項，啟用電子郵件連結登入功能。您還需要提供有效的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 控制台開啟「Authentication」專區。在「Sign in method」分頁的「Authorized domains」底下新增網址。
擷取深層連結後，您需將其傳遞至驗證 UI，以便系統進行處理。
Swift
FUIAuth.defaultAuthUI()!.handleOpen(url, sourceApplication: sourceApplication)
Objective-C
[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
- FirebaseUI-iOS 的電子郵件連結登入功能與 FirebaseUI-Android 和 FirebaseUI-web 相容，讓從 FirebaseUI-Android 啟動流程的一位使用者可以開啟連結，並使用 FirebaseUI-web 完成登入。反向流程也是如此。
Apple
參閱 Firebase「使用 Apple 帳戶登入」指南中的「事前準備」和「遵守 Apple 匿名資料規定」章節。
在授權檔案中加入「使用 Apple 帳戶登入」功能。
初始化為「使用 Apple 登入」設定的 OAuth 提供者執行個體：
Swift
provider = FUIOAuth.appleAuthProvider()
Objective-C
FUIOAuth *provider = [FUIOAuth appleAuthProvider];
- 使用此教學課程設定 Google 登入功能
按照 Facebook 入門指南設定 Facebook Login SDK。
在 Firebase 主控台中開啟「Authentication」區段並啟用 Facebook。如要啟用 Facebook 登入功能，您必須提供 Facebook 應用程式 ID 和應用程式密鑰 (可在 Facebook Developers Console 中取得)。
依序前往「Project Settings」>「Capabilities」畫面，在 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 有限登入，請在
FUIFacebookAuth執行個體上設定useLimitedLogin屬性。Swift
provider.useLimitedLogin = true
Objective-C
provider.useLimitedLogin = YES;
在 Firebase 控制台中開啟「Authentication」區段並啟用 Twitter。如要啟用 Twitter 登入功能，您必須提供 Twitter API 用戶端金鑰和密鑰，可在 Twitter 應用程式管理主控台中找到。
初始化為 Twitter 登入設定的 OAuth 提供者執行個體：
Swift
provider = FUIOAuth.twitterAuthProvider()
Objective-C
FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
電話號碼
在 Firebase 控制台中開啟「Authentication」區段，並啟用電話號碼登入功能。
Firebase 必須能夠驗證應用程式發出的電話號碼登入要求是來自應用程式，其中一種方法是透過 APN 通知。詳情請參閱「啟用應用程式驗證功能」一文。
如何啟用與 Firebase 驗證搭配使用的 APN 通知：
在 Xcode 中，為專案啟用推播通知。
將 APN 驗證金鑰上傳至 Firebase。如果您還沒有 APN 驗證金鑰，請務必前往 Apple Developer Member Center 建立 APN 驗證金鑰。
-
在 Firebase 控制台的專案中，依序選取齒輪圖示 >「專案設定」，然後選取「雲端通訊」分頁標籤。
-
在「iOS app configuration」下方的「APNs 驗證金鑰」中，按一下「上傳」按鈕。
-
瀏覽至您儲存金鑰的位置，選取金鑰，然後按一下 [Open] (開啟)。加入金鑰金鑰 ID (可於 Apple Developer Member Center 中找到)，然後按一下「上傳」。
如果您已有 APN 憑證，可以改為上傳憑證。
-
如果裝置上無法接收 APN 通知，Firebase 會使用 reCAPTCHA 驗證要求。
如要啟用 reCAPTCHA 驗證，請在 Xcode 中執行下列步驟：
選用：Firebase 會使用方法滑動自動取得應用程式的 APN 權杖，處理 Firebase 傳送至應用程式的無訊息推播通知，並在驗證期間自動攔截來自 reCAPTCHA 驗證頁面的自訂配置重新導向。
如果不想使用浮動式登入功能，請參閱 Firebase SDK 驗證文件中的「附錄：以不透過疑惑的方式使用手機登入」一文。
登入
如要啟動 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，請參閱 GitHub 上的 README 檔案。
- 如果您在 FirebaseUI 中發現並想要回報問題，請使用 GitHub 問題追蹤工具。