FirebaseUI ist eine Bibliothek, die auf dem Firebase Authentication SDK aufbaut und Drop-in-UI-Flows zur Verwendung in Ihrer App bereitstellt. FirebaseUI bietet die folgenden Vorteile:
- Mehrere Anbieter : Anmeldeabläufe für E-Mail/Passwort, E-Mail-Link, Telefonauthentifizierung, Google-Anmeldung, Facebook-Anmeldung und Twitter-Anmeldung.
- Kontoverwaltung : Abläufe zur Abwicklung von Kontoverwaltungsaufgaben wie Kontoerstellung und Passwortzurücksetzungen.
- Anonyme Kontoverknüpfung : Abläufe zur automatischen Verknüpfung anonymer Konten mit Identitätsanbietern.
- Anpassbar : Passen Sie das Aussehen von FirebaseUI an Ihre App an. Da FirebaseUI Open Source ist, können Sie das Projekt forken und genau an Ihre Bedürfnisse anpassen.
Bevor Sie beginnen
Fügen Sie Ihrer Poddatei FirebaseUI hinzu:
pod 'FirebaseUI'Wenn Sie möchten, können Sie nur die Auth-Komponente und die Anbieter hinzufügen, die Sie verwenden möchten:
pod 'FirebaseUI/Auth' pod 'FirebaseUI/Google' pod 'FirebaseUI/Facebook' pod 'FirebaseUI/OAuth' # Used for Sign in with Apple, Twitter, etc pod 'FirebaseUI/Phone'Wenn Sie Ihre App noch nicht mit Ihrem Firebase-Projekt verbunden haben, tun Sie dies über die Firebase-Konsole .
Anmeldemethoden einrichten
Bevor Sie Firebase zum Anmelden von Benutzern verwenden können, müssen Sie die Anmeldemethoden aktivieren und konfigurieren, die Sie unterstützen möchten.
E-Mail-Adresse und Passwort
Öffnen Sie in der Firebase-Konsole den Abschnitt Authentifizierung und aktivieren Sie die E-Mail- und Kennwortauthentifizierung.
Authentifizierung per E-Mail-Link
Öffnen Sie in der Firebase-Konsole den Abschnitt Authentifizierung . Aktivieren Sie auf der Registerkarte Anmeldemethode den E-Mail-/Kennwortanbieter . Beachten Sie, dass die Anmeldung per E-Mail/Passwort aktiviert sein muss, um die Anmeldung per E-Mail-Link zu verwenden.
Aktivieren Sie im selben Abschnitt die Anmeldemethode E-Mail-Link (kennwortlose Anmeldung) und klicken Sie auf Speichern .
Sie können die Anmeldung per E-Mail-Link aktivieren, indem Sie eine
FUIEmailAuthInstanz mitFIREmailLinkAuthSignInMethodinitialisieren. Sie müssen auch ein gültigesFIRActionCodeSettingsObjekt bereitstellen, bei demhandleCodeInAppauf „true“ gesetzt ist.
Schnell
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)
Ziel 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];
Außerdem müssen Sie die URL, die Sie an den Initialisierer übergeben, auf die Whitelist setzen. Öffnen Sie dazu in der Firebase-Konsole den Abschnitt Authentifizierung . Fügen Sie auf der Registerkarte Anmeldemethode die URL unter Autorisierte Domänen hinzu.
Sobald Sie den Deep-Link erfasst haben, müssen Sie ihn an die Authentifizierungs-Benutzeroberfläche übergeben, damit er verarbeitet werden kann.
Schnell
FUIAuth.defaultAuthUI()!.handleOpen(url, sourceApplication: sourceApplication)
Ziel c
[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
- Die E-Mail-Link-Anmeldung in FirebaseUI-iOS ist mit FirebaseUI-Android und FirebaseUI-Web kompatibel, wobei ein Benutzer, der den Flow von FirebaseUI-Android aus startet, den Link öffnen und die Anmeldung mit FirebaseUI-Web abschließen kann. Dasselbe gilt für den Gegenstrom.
Apfel
Befolgen Sie die Abschnitte Bevor Sie beginnen und Anforderungen an anonymisierte Daten von Apple einhalten im Leitfaden Firebase Anmelden mit Apple .
Fügen Sie Ihrer Berechtigungsdatei die Funktion „Mit Apple anmelden“ hinzu.
Initialisieren Sie eine OAuth-Anbieterinstanz, die für die Anmeldung mit Apple konfiguriert ist:
Schnell
provider = FUIOAuth.appleAuthProvider()
Ziel c
FUIOAuth *provider = [FUIOAuth appleAuthProvider];
Öffnen Sie in der Firebase-Konsole den Abschnitt Authentifizierung und aktivieren Sie die Google-Anmeldung.
Laden Sie eine neue Kopie der Datei
GoogleService-Info.plistIhres Projekts herunter und kopieren Sie sie in Ihr Xcode-Projekt. Überschreiben Sie alle vorhandenen Versionen mit der neuen. (Siehe Firebase zu Ihrem iOS-Projekt hinzufügen .)Fügen Sie Ihre umgekehrte Client-ID als URL-Schema in Ihrem Xcode-Projekt hinzu. Sie finden diesen Wert in der Datei
GoogleService-Info.plist.
Facebook
Richten Sie das Facebook Login SDK ein, indem Sie der Seite „Erste Schritte“ von Facebook folgen.
Öffnen Sie in der Firebase-Konsole den Abschnitt Authentifizierung und aktivieren Sie Facebook. Um die Facebook-Anmeldung zu aktivieren, müssen Sie Ihre Facebook-App-ID und Ihr App-Geheimnis angeben, die Sie in der Facebook-Entwicklerkonsole erhalten.
Aktivieren Sie die Schlüsselbundfreigabe in Ihrem Xcode-Projekt über den Bildschirm Projekteinstellungen > Funktionen .
Fügen Sie
fb FACEBOOK_APP_IDals URL-Schema in Ihrem Xcode-Projekt hinzu.Fügen Sie Ihre Facebook-App-ID und Ihren Anzeigenamen zur
Info.plistDatei hinzu:Taste Wert FacebookAppID FACEBOOK_APP_ID(zum Beispiel1234567890)Facebook-Anzeigename Der Name Ihrer App Initialisieren Sie eine Facebook-Anbieterinstanz:
Schnell
provider = FUIFacebookAuth(authUI: FUIAuth.defaultAuthUI())
Ziel c
FUIFacebookAuth *provider = [[FUIFacebookAuth alloc] initWithAuthUI:[FUIAuth defaultAuthUI]];
Wenn Sie Facebook Limited Login verwenden möchten, legen Sie die Eigenschaft
useLimitedLoginin derFUIFacebookAuthInstanz fest.Schnell
provider.useLimitedLogin = true
Ziel c
provider.useLimitedLogin = YES;
Öffnen Sie in der Firebase-Konsole den Abschnitt Authentifizierung und aktivieren Sie Twitter. Um die Twitter-Anmeldung zu aktivieren, müssen Sie Ihren Twitter API Consumer Key und Secret angeben, die Sie in der Twitter Application Management Console erhalten.
Initialisieren Sie eine OAuth-Anbieterinstanz, die für die Twitter-Anmeldung konfiguriert ist:
Schnell
provider = FUIOAuth.twitterAuthProvider()
Ziel c
FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
Telefonnummer
Öffnen Sie in der Firebase-Konsole den Abschnitt Authentifizierung und aktivieren Sie die Anmeldung per Telefonnummer.
Firebase muss überprüfen können, ob Anmeldeanforderungen für Telefonnummern von Ihrer App stammen. Dies wird unter anderem durch APNs-Benachrichtigungen erreicht. Weitere Informationen finden Sie unter Aktivieren der App-Überprüfung .
So aktivieren Sie APNs-Benachrichtigungen für die Verwendung mit der Firebase-Authentifizierung:
Aktivieren Sie in Xcode Push-Benachrichtigungen für Ihr Projekt.
Laden Sie Ihren APNs-Authentifizierungsschlüssel in Firebase hoch. Wenn Sie noch keinen APNs-Authentifizierungsschlüssel haben, stellen Sie sicher, dass Sie einen im Apple Developer Member Center erstellen.
Wählen Sie in Ihrem Projekt in der Firebase-Konsole das Zahnradsymbol aus, wählen Sie Projekteinstellungen und dann die Registerkarte Cloud-Messaging aus.
Klicken Sie im APNs-Authentifizierungsschlüssel unter iOS-App-Konfiguration auf die Schaltfläche Hochladen .
Navigieren Sie zu dem Speicherort, an dem Sie Ihren Schlüssel gespeichert haben, wählen Sie ihn aus und klicken Sie auf Öffnen . Fügen Sie die Schlüssel-ID für den Schlüssel hinzu (verfügbar im Apple Developer Member Center ) und klicken Sie auf Hochladen .
Wenn Sie bereits über ein APNs-Zertifikat verfügen, können Sie stattdessen das Zertifikat hochladen.
Wenn APNs-Benachrichtigungen auf einem Gerät nicht empfangen werden können, verwendet Firebase reCAPTCHA, um Anfragen zu überprüfen.
Um die reCAPTCHA-Überprüfung zu aktivieren, gehen Sie in Xcode wie folgt vor:
- Öffnen Sie Ihre Projektkonfiguration: Doppelklicken Sie in der linken Baumansicht auf den Projektnamen. Wählen Sie Ihre App aus dem Abschnitt ZIELE aus, wählen Sie dann die Registerkarte Info und erweitern Sie den Abschnitt URL-Typen .
- Klicken Sie auf die Schaltfläche + und fügen Sie Ihre codierte App-ID als URL-Schema hinzu. Sie finden Ihre verschlüsselte App-ID auf der Seite „Allgemeine Einstellungen“ der Firebase-Konsole im Abschnitt für Ihre iOS-App. Lassen Sie die anderen Felder leer.
Wenn Sie fertig sind, sollte Ihre Konfiguration ungefähr so aussehen (aber mit Ihren anwendungsspezifischen Werten):
Optional : Firebase verwendet Method Swizzling, um das APNs-Token Ihrer App automatisch abzurufen, um die stillen Push-Benachrichtigungen zu verarbeiten, die Firebase an Ihre App sendet, und um die Weiterleitung des benutzerdefinierten Schemas von der reCAPTCHA-Überprüfungsseite während der Überprüfung automatisch abzufangen.
Wenn Sie Swizzling nicht verwenden möchten, finden Sie weitere Informationen unter Anhang: Telefonische Anmeldung ohne Swizzling in Firebase SDK-Authentifizierungsdokumenten.
anmelden
Um den FirebaseUI-Anmeldeablauf zu starten, initialisieren Sie zuerst FirebaseUI:
Schnell
import FirebaseAuthUI
/* ... */
FirebaseApp.configure()
let authUI = FUIAuth.defaultAuthUI()
// You need to adopt a FUIAuthDelegate protocol to receive callback
authUI.delegate = self
Ziel c
@import FirebaseAuthUI;
...
[FIRApp configure];
FUIAuth *authUI = [FUIAuth defaultAuthUI];
// You need to adopt a FUIAuthDelegate protocol to receive callback
authUI.delegate = self;
Konfigurieren Sie dann FirebaseUI so, dass die Anmeldemethoden verwendet werden, die Sie unterstützen möchten:
Schnell
import FirebaseAuthUI
import FirebaseFacebookAuthUI
import FirebaseGoogleAuthUI
import FirebaseOAuthUI
import FirebasePhoneAuthUI
let providers: [FUIAuthProvider] = [
FUIGoogleAuth(),
FUIFacebookAuth(),
FUITwitterAuth(),
FUIPhoneAuth(authUI:FUIAuth.defaultAuthUI()),
]
self.authUI.providers = providers
Ziel 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;
Wenn Sie die Google- oder Facebook-Anmeldung aktiviert haben, implementieren Sie einen Handler für das Ergebnis der Anmeldeabläufe von Google und Facebook:
Schnell
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
}
Ziel c
- (BOOL)application:(UIApplication *)app
openURL:(NSURL *)url
options:(NSDictionary *)options {
NSString *sourceApplication = options[UIApplicationOpenURLOptionsSourceApplicationKey];
return [[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
}
Rufen Sie schließlich eine Instanz von AuthViewController von FUIAuth ab. Sie können es dann entweder als ersten Ansichtscontroller Ihrer App oder von einem anderen Ansichtscontroller in Ihrer App aus präsentieren.
Schnell
So rufen Sie die Anmeldemethodenauswahl ab:
let authViewController = authUI.authViewController()
Wenn Sie nur die Anmeldung per Telefonnummer verwenden, können Sie stattdessen direkt die Anmeldeansicht der Telefonnummer anzeigen:
let phoneProvider = FUIAuth.defaultAuthUI().providers.first as! FUIPhoneAuth
phoneProvider.signIn(withPresenting: currentlyVisibleController, phoneNumber: nil)
Ziel c
So rufen Sie die Anmeldemethodenauswahl ab:
UINavigationController *authViewController = [authUI authViewController];
Wenn Sie nur die Anmeldung per Telefonnummer verwenden, können Sie stattdessen direkt die Anmeldeansicht der Telefonnummer anzeigen:
FUIPhoneAuth *phoneProvider = [FUIAuth defaultAuthUI].providers.firstObject;
[phoneProvider signInWithPresentingViewController:currentlyVisibleController phoneNumber:nil];
Nachdem Sie die Authentifizierungsansicht präsentiert haben und sich der Benutzer angemeldet hat, wird das Ergebnis an den FirebaseUI Auth-Delegaten in der Methode didSignInWithUser:error: zurückgegeben:
Schnell
func authUI(_ authUI: FUIAuth, didSignInWith user: FIRUser?, error: Error?) {
// handle user and error as necessary
}
Ziel 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.
}
Austragen
FirebaseUI bietet bequeme Methoden zum Abmelden von der Firebase-Authentifizierung sowie von allen Anbietern sozialer Identitäten:
Schnell
authUI.signOut()
Ziel c
[authUI signOut];
Anpassung
Sie können die Anmeldebildschirme anpassen, indem Sie die View-Controller von FirebaseUI unterklassen und in den Delegatmethoden von FUIAuth angeben:
Schnell
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)
}
Ziel 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];
}
Sie können die URL an die Nutzungsbedingungen Ihrer App anpassen, die auf dem Kontoerstellungsbildschirm verlinkt sind:
Schnell
let kFirebaseTermsOfService = URL(string: "https://example.com/terms")!
authUI.tosurl = kFirebaseTermsOfService
Ziel c
authUI.TOSURL = [NSURL URLWithString:@"https://example.com/terms"];
Schließlich können Sie die Nachrichten und Eingabeaufforderungen, die Ihren Benutzern angezeigt werden, anpassen, indem Sie ein benutzerdefiniertes Paket angeben:
Schnell
authUI.customStringsBundle = NSBundle.mainBundle() // Or any custom bundle.
Ziel c
authUI.customStringsBundle = [NSBundle mainBundle]; // Or any custom bundle.
Nächste Schritte
- Weitere Informationen zur Verwendung und Anpassung von FirebaseUI finden Sie in der README -Datei auf GitHub.
- Wenn Sie ein Problem in FirebaseUI finden und es melden möchten, verwenden Sie den GitHub Issue Tracker .