Check out what’s new from Firebase@ Google I/O 2021, and join our alpha program for early access to the new Remote Config personalization feature. Learn more

Fügen Sie mit FirebaseUI ganz einfach eine Anmeldung zu Ihrer iOS-App hinzu

FirebaseUI ist eine auf dem Firebase Authentication SDK aufbauende Bibliothek, die 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.
  • Account - Management: Ströme zu Account - Management - Aufgaben wie Kontoerstellung und das Zurücksetzen von Kennwörtern umgehen.
  • Anonyme Kontoverknüpfung : Flows 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 außerdem verzweigen und genau an Ihre Bedürfnisse anpassen.

Bevor Sie beginnen

  1. Fügen Sie Firebase zu Ihrem iOS-Projekt hinzu .

  2. Fügen Sie FirebaseUI zu Ihrem Podfile hinzu:

    pod 'FirebaseUI'
    

    Wenn Sie möchten, können Sie nur die Auth-Komponente und die Provider 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'
    
  3. Wenn Sie Ihre App noch nicht mit Ihrem Firebase-Projekt verbunden haben, können Sie dies über die Firebase-Konsole tun.

Anmeldemethoden einrichten

Bevor Sie Firebase zum Anmelden von Nutzern verwenden können, müssen Sie die zu unterstützenden Anmeldemethoden aktivieren und konfigurieren.

E-Mail-Adresse und Passwort

Öffnen Sie in der Firebase-Konsole den Abschnitt Authentifizierung und aktivieren Sie die E-Mail- und Kennwortauthentifizierung.

  1. Öffnen Sie in der Firebase-Konsole den Abschnitt Authentifizierung . Auf dem Anmelden Methode Registerkarte, aktivieren Sie den E - Mail / Passwort - Anbieter. Beachten Sie, dass die E-Mail-/Passwort-Anmeldung aktiviert sein muss, um die E-Mail-Link-Anmeldung zu verwenden.

  2. Aktivieren Sie im selben Abschnitt die Anmeldemethode E-Mail-Link (kennwortlose Anmeldung) und klicken Sie auf Speichern .

  3. Sie können die E-Mail-Link-Anmeldung aktivieren, indem Sie eine FUIEmailAuth Instanz mit FIREmailLinkAuthSignInMethod initialisieren. Außerdem müssen Sie ein gültiges FIRActionCodeSettings Objekt handleCodeInApp , bei dem handleCodeInApp auf 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];
  1. Darüber hinaus müssen Sie die URL, die Sie an den Initialisierer übergeben, auf die Whitelist setzen. Sie können dies in der Firebase-Konsole tun, öffnen Sie den Abschnitt Authentifizierung . Fügen Sie auf der Registerkarte Anmeldemethode die URL unter Autorisierte Domänen hinzu .

  2. Sobald Sie den Deep-Link gefunden haben, müssen Sie ihn an die Authentifizierungs-UI übergeben, damit er verarbeitet werden kann.

Schnell

FUIAuth.defaultAuthUI()!.handleOpen(url, sourceApplication: sourceApplication)

Ziel c

[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
  1. Die E-Mail-Link-Anmeldung in FirebaseUI-iOS ist mit FirebaseUI-Android und FirebaseUI-web kompatibel, wobei ein Benutzer, der den Ablauf über FirebaseUI-Android startet, den Link öffnen und die Anmeldung mit FirebaseUI-web abschließen kann. Das gleiche gilt für den Gegenstrom.

Apfel

  1. Folgen Sie den Abschnitten Bevor Sie beginnen und erfüllen Sie die Anforderungen an anonymisierte Apple-Daten im Firebase-Handbuch zur Anmeldung mit Apple .

  2. Fügen Sie Ihrer Berechtigungsdatei die Funktion "Mit Apple anmelden" hinzu.

  3. Initialisieren Sie eine OAuth-Anbieterinstanz, die für die Anmeldung mit Apple konfiguriert ist:

    Schnell

    provider = FUIOAuth.appleAuthProvider()
    

    Ziel c

    FUIOAuth *provider = [FUIOAuth appleAuthProvider];
    

Google

  1. Öffnen Sie in der Firebase-Konsole den Abschnitt Authentifizierung und aktivieren Sie die Google-Anmeldung.

  2. 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

  1. Richten Sie das Facebook Login SDK ein, indem Sie der Seite " Erste Schritte" von Facebook folgen.

  2. Ö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 abrufen können.

  3. Aktivieren Sie die Schlüsselbundfreigabe in Ihrem Xcode-Projekt über den Bildschirm Projekteinstellungen > Funktionen .

  4. Fügen Sie fb FACEBOOK_APP_ID als URL-Schema in Ihrem Xcode-Projekt hinzu.

  5. Fügen Sie Ihre Facebook-App-ID und Ihren Anzeigenamen zur Datei Info.plist :

    Schlüssel Wert
    FacebookAppID FACEBOOK_APP_ID (zum Beispiel 1234567890 )
    FacebookDisplayName Der Name Ihrer App

Twitter

  1. Ö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-Verbraucherschlüssel und -Geheimnis angeben, die Sie in der Twitter-Anwendungsverwaltungskonsole abrufen können.

  2. Initialisieren Sie eine OAuth-Provider-Instanz, die für die Twitter-Anmeldung konfiguriert ist:

    Schnell

    provider = FUIOAuth.twitterAuthProvider()
    

    Ziel c

    FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
    

Telefonnummer

  1. Öffnen Sie in der Firebase-Konsole den Abschnitt Authentifizierung und aktivieren Sie die Anmeldung über die Telefonnummer.

  2. Firebase muss in der Lage sein, zu überprüfen, ob von Ihrer App Anmeldeanfragen für Telefonnummern 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 Firebase Authentication:

    1. Aktivieren Sie in Xcode Push-Benachrichtigungen für Ihr Projekt.

    2. 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.

      1. Wählen Sie in Ihrem Projekt in der Firebase-Konsole das Zahnradsymbol aus, wählen Sie Projekteinstellungen und dann die Registerkarte Cloud-Messaging aus .

      2. Klicken Sie im APNs-Authentifizierungsschlüssel unter iOS-App-Konfiguration auf die Schaltfläche Hochladen .

      3. 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.

  3. Wenn auf einem Gerät keine APNs-Benachrichtigungen empfangen werden können, verwendet Firebase reCAPTCHA, um Anfragen zu überprüfen.

    Um die reCAPTCHA-Verifizierung zu aktivieren, wenn Sie Ihre umgekehrte Client-ID noch nicht als URL-Schema hinzugefügt haben (z. B. um die Google-Anmeldung zu aktivieren), tun Sie dies in Ihrem Xcode-Projekt. Sie finden diesen Wert in der Datei GoogleService-Info.plist .

  4. Optional : Firebase verwendet Methodenumleitung, um automatisch das APNs-Token Ihrer App abzurufen, um die stillen Push-Benachrichtigungen zu verarbeiten, die Firebase an Ihre App sendet, und um die benutzerdefinierte Schemaweiterleitung von der reCAPTCHA-Bestätigungsseite während der Überprüfung automatisch abzufangen.

    Wenn Sie Swizzling nicht verwenden möchten, lesen Sie Anhang: Verwenden der telefonischen Anmeldung ohne Swizzling in den Firebase SDK-Authentifizierungsdokumenten.

Einloggen

Um den FirebaseUI-Anmeldevorgang zu starten, initialisieren Sie zuerst FirebaseUI:

Schnell

import FirebaseUI

/* ... */

FirebaseApp.configure()
let authUI = FUIAuth.defaultAuthUI()
// You need to adopt a FUIAuthDelegate protocol to receive callback
authUI.delegate = self

Ziel c

@import FirebaseUI;

...

[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 FirebaseUI

let providers: [FUIAuthProvider] = [
  FUIGoogleAuth(),
  FUIFacebookAuth(),
  FUITwitterAuth(),
  FUIPhoneAuth(authUI:FUIAuth.defaultAuthUI()),
]
self.authUI.providers = providers

Ziel c

@import FirebaseUI;

...

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-Anmeldeabläufe:

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];
}

AuthViewController FUIAuth schließlich eine Instanz von AuthViewController von FUIAuth . Sie können ihn dann entweder als ersten Ansichtscontroller Ihrer App oder von einem anderen Ansichtscontroller in Ihrer App präsentieren.

Schnell

So rufen Sie die Auswahl für die Anmeldemethode ab:

let authViewController = authUI.authViewController()

Wenn Sie nur die Telefonnummern-Anmeldung verwenden, können Sie stattdessen direkt die Telefonnummern-Anmeldeansicht anzeigen:

let phoneProvider = FUIAuth.defaultAuthUI().providers.first as! FUIPhoneAuth
phoneProvider.signIn(withPresenting: currentlyVisibleController, phoneNumber: nil)

Ziel c

So rufen Sie die Auswahl für die Anmeldemethode ab:

UINavigationController *authViewController = [authUI authViewController];

Wenn Sie nur die Telefonnummern-Anmeldung verwenden, können Sie stattdessen direkt die Telefonnummern-Anmeldeansicht anzeigen:

FUIPhoneAuth *phoneProvider = [FUIAuth defaultAuthUI].providers.firstObject;
[phoneProvider signInWithPresentingViewController:currentlyVisibleController phoneNumber:nil];

Nachdem Sie die Authentifizierungsansicht präsentiert und sich der Benutzer didSignInWithUser:error: , wird das Ergebnis in der didSignInWithUser:error: -Methode an den FirebaseUI Auth-Delegaten 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 Firebase Authentication sowie allen sozialen Identitätsanbietern:

Schnell

authUI.signOut()

Ziel c

[authUI signOut];

Anpassung

Sie können die FUIAuth , indem Sie die Ansichtscontroller von FirebaseUI FUIAuth und in den Delegate-Methoden von FUIAuth :

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 Bildschirm zur Kontoerstellung verlinkt ist:

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 Aufforderungen, 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 in FirebaseUI ein Problem finden und es melden möchten, verwenden Sie den GitHub-Problem-Tracker .