FirebaseUI ist eine Bibliothek, die zusätzlich zum Firebase Authentication SDK, das Drop-in-UI-Abläufe für die Verwendung bereitstellt. in Ihrer App. FirebaseUI bietet folgende Vorteile:
- Mehrere Anbieter: Anmeldeabläufe für E-Mail/Passwort, E-Mail-Link, Telefonauthentifizierung, Google Log-in, Facebook Log-in und Twitter Log-in.
- Kontoverwaltung: Abläufe zur Abwicklung von Kontoverwaltungsaufgaben, z. B. Kontoerstellung und Passwortzurücksetzung.
- Anonyme Kontoverknüpfung: Abläufe zur automatischen Verknüpfung anonymer Konten mit Identitätsanbietern.
- Anpassbar: Passen Sie das Erscheinungsbild von FirebaseUI an Ihre App an. Außerdem Da FirebaseUI Open Source ist, können Sie das Projekt verzweigen und anpassen. an Ihre Bedürfnisse anzupassen.
Hinweis
Fügen Sie Ihrer Podfile-Datei FirebaseUI hinzu:
pod 'FirebaseUI'Sie können auch 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 Firebase-Konsole
Anmeldemethoden einrichten
Bevor Sie Nutzer über Firebase anmelden 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 Console den Bereich Authentifizierung und aktivieren Sie die E-Mail- und Passwort-Authentifizierung.
E-Mail-Link-Authentifizierung
Öffnen Sie in der Firebase-Konsole den Abschnitt Authentifizierung. Am Tab Sign in method (Anmeldemethode) den Anbieter E-Mail/Passwort ein. Hinweis Die Anmeldung mit E-Mail-Adresse oder Passwort muss aktiviert sein, damit die Anmeldung per E-Mail-Link verwendet werden kann.
Aktivieren Sie im selben Abschnitt die Anmeldung über E-Mail-Link (Anmeldung ohne Passwort). und klicken Sie auf Speichern.
Sie können die Anmeldung per E-Mail-Link aktivieren, indem Sie ein
FUIEmailAuthinitialisieren Instanz mitFIREmailLinkAuthSignInMethod. Außerdem müssen Sie Ein gültigesFIRActionCodeSettings-Objekt, für dashandleCodeInAppauf „true“ gesetzt ist
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];
Außerdem müssen Sie die an den Iniatializer übergebene URL auf die weiße Liste setzen. Verwenden Sie dazu die Firebase-Konsole und öffnen Sie den Bereich Authentifizierung. . Fügen Sie auf dem Tab Anmeldemethode die URL unter Autorisierte Domains:
Nachdem Sie den Deeplink erkannt haben, müssen Sie ihn an die Authentifizierungsbenutzeroberfläche übergeben, damit er zu verstehen.
Swift
FUIAuth.defaultAuthUI()!.handleOpen(url, sourceApplication: sourceApplication)
Objective-C
[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
- Anmeldung per E-Mail-Link in FirebaseUI-iOS ist kompatibel mit FirebaseUI für Android und FirebaseUI-Web Ein Nutzer, der den Ablauf von FirebaseUI-Android aus startet, kann den Link und schließen Sie die Anmeldung mit FirebaseUI-web ab. Das gilt auch für den umgekehrten Fluss.
Apple
Beachte die Vorbereitung und die Einhaltung anonymisierter Apple-Daten. zu den Anforderungen im im Firebase-Leitfaden Über Apple anmelden.
Füge deiner Berechtigungsdatei die Funktion „Über Apple anmelden“ hinzu.
Initialisieren Sie eine OAuth-Anbieterinstanz, die für „Über Apple anmelden“ konfiguriert ist:
Swift
provider = FUIOAuth.appleAuthProvider()
Objective-C
FUIOAuth *provider = [FUIOAuth appleAuthProvider];
Richten Sie das Facebook Login SDK wie folgt ein: Facebook-Seite mit den ersten Schritten.
Öffnen Sie in der Firebase-Konsole den Bereich Authentifizierung und aktivieren Sie Facebook Um die Facebook-Anmeldung zu aktivieren, müssen Sie Ihre Facebook App-ID angeben und das App-Secret, das Sie in der Facebook Developers Console abrufen können.
Aktivieren Sie die Schlüsselbundfreigabe in Ihrem Xcode-Projekt unter Project Settings > Funktionen.
Fügen Sie
fbFACEBOOK_APP_IDals URL-Schema in Ihrem Xcode-ProjektFügen Sie der Datei
Info.plistIhre Facebook-App-ID und Ihren Anzeigenamen hinzu:Schlüssel Wert FacebookAppID FACEBOOK_APP_ID(z. B.1234567890)Facebook-Anzeigename Der Name Ihrer App Initialisieren Sie eine Facebook-Anbieterinstanz:
Swift
provider = FUIFacebookAuth(authUI: FUIAuth.defaultAuthUI())
Objective-C
FUIFacebookAuth *provider = [[FUIFacebookAuth alloc] initWithAuthUI:[FUIAuth defaultAuthUI]];
Wenn Sie die Facebook Limited Login verwenden möchten, legen Sie die Property
useLimitedLoginfür die InstanzFUIFacebookAuthfest.Swift
provider.useLimitedLogin = true
Objective-C
provider.useLimitedLogin = YES;
Öffnen Sie in der Firebase-Konsole den Bereich Authentifizierung und aktivieren Sie Twitter Um die Twitter-Anmeldung zu aktivieren, müssen Sie Ihre Twitter API angeben Consumer-Key und -Secret, das Sie in der Twitter-Anwendung finden Verwaltungskonsole.
Initialisieren Sie eine OAuth-Anbieterinstanz, die für die Twitter-Anmeldung konfiguriert ist:
Swift
provider = FUIOAuth.twitterAuthProvider()
Objective-C
FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
Telefonnummer
Öffnen Sie in der Firebase-Konsole den Bereich Authentifizierung und aktivieren Sie Telefonnummer anmelden.
Firebase muss prüfen können, ob Anfragen zur Anmeldung per Telefonnummer von Ihrer App stammen. Eine Möglichkeit dazu sind APN-Benachrichtigungen. Weitere Informationen finden Sie unter Anwendungsüberprüfung aktivieren .
So aktivieren Sie APNs-Benachrichtigungen zur Verwendung mit Firebase Authentication:
Aktivieren Sie Push-Benachrichtigungen für Ihr Projekt in Xcode.
Laden Sie Ihren APNs-Authentifizierungsschlüssel in Firebase hoch. Wenn Sie noch keinen APNs-Authentifizierungsschlüssel haben, erstellen Sie einen im Apple Developer Member Center
-
Wählen Sie in der Firebase-Konsole in Ihrem Projekt das Zahnradsymbol, wählen Sie Project Settings (Projekteinstellungen) und wählen Sie das Cloud Messaging.
-
Klicken Sie unter APNs-Authentifizierungsschlüssel im Abschnitt Konfiguration der iOS-App auf die Schaltfläche Hochladen.
-
Gehen Sie zum Speicherort Ihres Schlüssels, 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 in der Apple Developer Member Center) und klicken Sie auf Hochladen:
Wenn Sie bereits ein APNs-Zertifikat haben, können Sie stattdessen das Zertifikat hochladen.
-
Wenn APNs-Benachrichtigungen auf einem Gerät nicht empfangen werden können, verwendet Firebase reCAPTCHA zum Verifizieren von Anfragen.
So aktivieren Sie die reCAPTCHA-Überprüfung in Xcode:
- Öffnen Sie die Projektkonfiguration: Doppelklicken Sie auf den Projektnamen in der Baumansicht links. Wählen Sie im Bereich ZIELE Ihre App aus, gehen Sie dann zum Tab Info und maximieren Sie den Bereich URL-Typen.
- Klicken Sie auf die Schaltfläche + und fügen Sie die codierte App-ID als URL hinzu.
. Ihre codierte App-ID finden Sie auf der
Allgemein
Einstellungen der Firebase Console im Bereich für Ihr iOS-Gerät
Lassen Sie die anderen Felder leer.
Die Konfiguration sollte dann in etwa so aussehen (aber mit Ihren anwendungsspezifischen Werten):
Optional: Firebase verwendet Method-Swizzling, um Ihre Daten automatisch abzurufen. APNs-Token der App verwenden, um die stillen Push-Benachrichtigungen zu verarbeiten, die Firebase an deine App sendet und die Weiterleitung an benutzerdefinierte Schemas automatisch abfängt, über die reCAPTCHA-Überprüfungsseite.
Wenn Sie das Wischen nicht verwenden möchten, lesen Sie den Anhang: Smartphone-Anmeldung ohne Wischen. in der Firebase SDK-Authentifizierungsdokumentation.
Anmelden
Um den FirebaseUI-Anmeldevorgang zu starten, müssen Sie zuerst FirebaseUI initialisieren:
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;
Konfigurieren Sie dann FirebaseUI so, dass die von Ihnen unterstützten Anmeldemethoden verwendet werden:
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;
Wenn Sie die Google- oder Facebook-Anmeldung aktiviert haben, implementieren Sie einen Handler für das Ergebnis der Google- und Facebook-Registrierungsabläufe:
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];
}
Rufen Sie abschließend eine Instanz von AuthViewController aus FUIAuth ab. Anschließend können Sie
präsentieren Sie sie entweder als „First View“-Controller Ihrer App oder
einen anderen View-Controller
in Ihrer App ansehen.
Swift
So rufen Sie die Auswahl für die Anmeldemethode auf:
let authViewController = authUI.authViewController()
Wenn Sie nur die Anmeldung per Telefonnummer verwenden, können Sie stattdessen direkt die Anmeldeseite für die Telefonnummer anzeigen:
let phoneProvider = FUIAuth.defaultAuthUI().providers.first as! FUIPhoneAuth
phoneProvider.signIn(withPresenting: currentlyVisibleController, phoneNumber: nil)
Objective-C
So rufen Sie die Auswahl für die Anmeldemethode auf:
UINavigationController *authViewController = [authUI authViewController];
Wenn Sie sich nur über Ihre Telefonnummer anmelden, können Sie die Telefonnummer die sich nur in der angemeldeten Ansicht
FUIPhoneAuth *phoneProvider = [FUIAuth defaultAuthUI].providers.firstObject;
[phoneProvider signInWithPresentingViewController:currentlyVisibleController phoneNumber:nil];
Nachdem Sie die Authentifizierungsanzeige angezeigt und der Nutzer sich angemeldet hat, wird das Ergebnis in der Methode didSignInWithUser:error: an den FirebaseUI Auth-Delegierten zurückgegeben:
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.
}
Abmelden
FirebaseUI bietet praktische Methoden, um sich von Firebase Authentication und allen Identitätsanbietern für soziale Netzwerke abzumelden:
Swift
authUI.signOut()
Objective-C
[authUI signOut];
Anpassung
Sie können die Anmeldebildschirme anpassen, indem Sie Unterkategorien der Ansicht von FirebaseUI erstellen
Controllern und Angeben in den Delegatmethoden von 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];
}
Sie können die URL für die Nutzungsbedingungen Ihrer App anpassen. Diese ist auf dem Bildschirm zur Kontoerstellung verlinkt:
Swift
let kFirebaseTermsOfService = URL(string: "https://example.com/terms")!
authUI.tosurl = kFirebaseTermsOfService
Objective-C
authUI.TOSURL = [NSURL URLWithString:@"https://example.com/terms"];
Schließlich können Sie die Nachrichten und Aufforderungen anpassen, die Ihren Nutzern angezeigt werden, indem Sie und geben ein benutzerdefiniertes Set an:
Swift
authUI.customStringsBundle = NSBundle.mainBundle() // Or any custom bundle.
Objective-C
authUI.customStringsBundle = [NSBundle mainBundle]; // Or any custom bundle.
Nächste Schritte
- Weitere Informationen zum Verwenden und Anpassen von FirebaseUI finden Sie in der README auf GitHub.
- Wenn Sie ein Problem in FirebaseUI finden und es melden möchten, verwenden Sie die GitHub-Problemverfolgung