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

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

  1. Fügen Sie Ihrem Apple-Projekt Firebase hinzu .

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

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

  1. Ö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.

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

  3. Sie können die Anmeldung per E-Mail-Link aktivieren, indem Sie eine FUIEmailAuth Instanz mit FIREmailLinkAuthSignInMethod initialisieren. Sie müssen auch ein gültiges FIRActionCodeSettings Objekt bereitstellen, 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. 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.

  2. 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];
  1. 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

  1. Befolgen Sie die Abschnitte Bevor Sie beginnen und Anforderungen an anonymisierte Daten von Apple einhalten im Leitfaden Firebase Anmelden 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. Laden Sie eine neue Kopie der Datei GoogleService-Info.plist Ihres 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 .)

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

  4. Richten Sie das Facebook Login SDK ein, indem Sie der Seite „Erste Schritte“ von Facebook folgen.

  5. Ö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.

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

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

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

    Taste Wert
    FacebookAppID FACEBOOK_APP_ID (zum Beispiel 1234567890 )
    Facebook-Anzeigename Der Name Ihrer App

  9. Initialisieren Sie eine Facebook-Anbieterinstanz:

    Schnell

    provider = FUIFacebookAuth(authUI: FUIAuth.defaultAuthUI())

    Ziel c

    FUIFacebookAuth *provider = [[FUIFacebookAuth alloc] initWithAuthUI:[FUIAuth defaultAuthUI]];

  10. Wenn Sie Facebook Limited Login verwenden möchten, legen Sie die Eigenschaft useLimitedLogin in der FUIFacebookAuth Instanz fest.

    Schnell

    provider.useLimitedLogin = true

    Ziel c

    provider.useLimitedLogin = YES;

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 Consumer Key und Secret angeben, die Sie in der Twitter Application Management Console erhalten.

  2. Initialisieren Sie eine OAuth-Anbieterinstanz, 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 per Telefonnummer.

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

    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 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:

    1. Ö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 .
    2. 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):

      Screenshot der benutzerdefinierten URL-Schema-Setup-Oberfläche von Xcode

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