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-Adresse/Passwort, E-Mail-Link, Telefonnummer Authentifizierung, Google Log-in, Facebook-Log-in und Twitter-Log-in.
- Kontoverwaltung: Abläufe zur Abwicklung von Kontoverwaltungsaufgaben wie Kontoerstellung und Passwortzurücksetzung.
- Anonyme Kontoverknüpfung: Hiermit werden anonyme Konten automatisch verknüpft. Identitätsanbieter.
- 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 FirebaseUI Ihrem Podfile 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 Firebase zum Anmelden von Nutzern verwenden können, müssen Sie die 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. Aktivieren Sie auf dem Tab Anmeldemethode den Anbieter E-Mail/Passwort. Hinweis: Die Anmeldung per E-Mail oder Passwort muss aktiviert sein, damit die Anmeldung per E-Mail-Link verwendet werden kann.
Aktivieren Sie im selben Abschnitt die Anmeldemethode 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
var actionCodeSettings = ActionCodeSettings()
actionCodeSettings.url = URL(string: "https://example.firebasestorage.app")
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.firebasestorage.app"];
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 erfasst haben, müssen Sie ihn an die Authentifizierungs-UI übergeben, damit er verarbeitet werden kann.
FUIAuth.defaultAuthUI()!.handleOpen(url, sourceApplication: sourceApplication)
[[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
Folgen Sie den Abschnitten Vorab und Anforderungen von Apple für anonymisierte Daten einhalten im Leitfaden Über „Über Apple anmelden“ anmelden.
Füge deiner Berechtigungsdatei die Funktion „Über Apple anmelden“ hinzu.
Initialisieren Sie eine OAuth-Anbieter-Instanz, die für die Anmeldung über Apple konfiguriert ist:
provider = FUIOAuth.appleAuthProvider()
FUIOAuth *provider = [FUIOAuth appleAuthProvider];
Richten Sie das Facebook Login SDK ein. Folgen Sie dazu der Anleitung auf der Facebook-Startseite.
Ö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)FacebookDisplayName Der Name Ihrer App Initialisieren Sie eine Facebook-Anbieterinstanz:
provider = FUIFacebookAuth(authUI: FUIAuth.defaultAuthUI())
FUIFacebookAuth *provider = [[FUIFacebookAuth alloc] initWithAuthUI:[FUIAuth defaultAuthUI]];
Wenn Sie Facebook Limited Log-in Legen Sie das Attribut
useLimitedLoginfür die InstanzFUIFacebookAuthfest.provider.useLimitedLogin = true
provider.useLimitedLogin = YES;
Öffne in der Firebase Console den Bereich Authentifizierung und aktiviere Twitter. Wenn Sie die Anmeldung über Twitter aktivieren möchten, müssen Sie Ihren Twitter API-Nutzerschlüssel und das Secret angeben. Diese finden Sie in der Verwaltungskonsole der Twitter-App.
Initialisieren Sie eine OAuth-Anbieterinstanz, die für die Twitter-Anmeldung konfiguriert ist:
provider = FUIOAuth.twitterAuthProvider()
FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
Telefonnummer
Öffnen Sie in der Firebase Console den Bereich Authentifizierung und aktivieren Sie die Anmeldung per Telefonnummer.
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 App-Ü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.
-
Gehen Sie im Bereich APNs-Authentifizierungsschlüssel unter iOS-App-Konfiguration so vor: klicken Sie auf das Symbol Hochladen Schaltfläche.
-
Rufen Sie den Speicherort auf, an dem Sie den 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 in der Apple Developer Member Center) und klicken Sie auf Hochladen:
Wenn Sie bereits ein APNs-Zertifikat haben, können Sie es 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 in der linken Baumansicht auf den Projektnamen. 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 Ihre codierte App-ID als URL-Schema hinzu. Sie finden die codierte App-ID auf der Seite Allgemeine Einstellungen der Firebase Console im Abschnitt für Ihre iOS-App. 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
Initialisieren Sie zuerst FirebaseUI, um die Anmeldung in FirebaseUI zu starten:
import FirebaseAuthUI
/* ... */
FirebaseApp.configure()
let authUI = FUIAuth.defaultAuthUI()
// You need to adopt a FUIAuthDelegate protocol to receive callback
authUI.delegate = self
@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:
import FirebaseAuthUI
import FirebaseFacebookAuthUI
import FirebaseGoogleAuthUI
import FirebaseOAuthUI
import FirebasePhoneAuthUI
let providers: [FUIAuthProvider] = [
FUIGoogleAuth(),
FUIFacebookAuth(),
FUITwitterAuth(),
FUIPhoneAuth(authUI:FUIAuth.defaultAuthUI()),
]
self.authUI.providers = providers
@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:
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
}
- (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. Sie können dann
präsentieren Sie sie entweder als „First View“-Controller Ihrer App oder
einen anderen View-Controller
in Ihrer App ansehen.
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 lassen:
let phoneProvider = FUIAuth.defaultAuthUI().providers.first as! FUIPhoneAuth
phoneProvider.signIn(withPresenting: currentlyVisibleController, phoneNumber: nil)
So rufen Sie die Auswahl für die Anmeldemethode auf:
UINavigationController *authViewController = [authUI authViewController];
Wenn Sie sich nur mit Ihrer 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 Authentifizierungsansicht präsentiert haben und der Nutzer sich angemeldet hat, lautet das Ergebnis:
wird an den FirebaseUI Auth-Delegaten im didSignInWithUser:error: zurückgegeben.
:
func authUI(_ authUI: FUIAuth, didSignInWith user: FIRUser?, error: Error?) {
// handle user and error as necessary
}
- (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:
authUI.signOut()
[authUI signOut];
Anpassung
Sie können die Anmeldebildschirme anpassen, indem Sie die Ansichtscontroller der FirebaseUI ableiten und in den Delegating Methods von FUIAuth angeben:
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];
}
Sie können die URL für die Nutzungsbedingungen Ihrer App anpassen. Diese ist auf dem Bildschirm zur Kontoerstellung verlinkt:
let kFirebaseTermsOfService = URL(string: "https://example.com/terms")!
authUI.tosurl = kFirebaseTermsOfService
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:
authUI.customStringsBundle = NSBundle.mainBundle() // Or any custom bundle.
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 melden möchten, verwenden Sie den GitHub-Issue-Tracker.