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 : Flows zur Abwicklung von Kontoverwaltungsaufgaben, wie z. B. Kontoerstellung und Passwort-Zurücksetzungen.
  • 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 außerdem Open Source ist, können Sie das Projekt forken und genau an Ihre Bedürfnisse anpassen.

Bevor Sie beginnen

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

  2. Fügen Sie FirebaseUI zu Ihrer Poddatei 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 Passwort-Authentifizierung.

  1. Öffnen Sie in der Firebase-Konsole den Abschnitt Authentifizierung . Aktivieren Sie auf der Registerkarte Anmeldemethode den E-Mail-/Passwort- Anbieter. Beachten Sie, dass die E-Mail- oder Passwort-Anmeldung aktiviert sein muss, um die E-Mail-Link-Anmeldung zu verwenden.

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

  3. Sie können die E-Mail-Link-Anmeldung aktivieren, indem Sie eine FUIEmailAuth Instanz mit FIREmailLinkAuthSignInMethod initialisieren. Sie müssen außerdem ein gültiges FIRActionCodeSettings Objekt bereitstellen, wobei 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 und den Abschnitt „Authentifizierung“ öffnen. 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-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 über FirebaseUI-Android startet, den Link öffnen und die Anmeldung mit FirebaseUI-web abschließen kann. Dasselbe gilt auch für den umgekehrten Fluss.

Apfel

  1. Befolgen Sie die Abschnitte „Bevor Sie beginnen“ und „Anforderungen an anonymisierte Daten von Apple einhalten“ im Firebase-Leitfaden „Mit Apple anmelden“ .

  2. Fügen Sie die Funktion „Mit Apple anmelden“ zu Ihrer Berechtigungsdatei 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. Richten Sie die Google-Anmeldung mithilfe dieser Anleitung ein

Facebook

  1. Richten Sie das Facebook Login SDK ein, indem Sie der Facebook-Erste-Startseite 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 erhalten.

  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 Info.plist Datei hinzu:

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

  6. Initialisieren Sie eine Facebook-Anbieterinstanz:

    Schnell

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

    Ziel c

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

  7. Wenn Sie Facebook Limited Login verwenden möchten, legen Sie die Eigenschaft useLimitedLogin für die 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-Verbraucherschlüssel und Ihr Geheimnis angeben, die Sie in der Twitter Application Management-Konsole erhalten 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 per Telefonnummer.

  2. Firebase muss in der Lage sein, zu überprüfen, ob Anmeldeanfragen für Telefonnummern von Ihrer App kommen. Dies wird unter anderem durch APN-Benachrichtigungen erreicht. Weitere Informationen finden Sie unter App-Überprüfung aktivieren .

    So aktivieren Sie APNs-Benachrichtigungen für die Verwendung mit Firebase-Authentifizierung:

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

    2. Laden Sie Ihren APNs-Authentifizierungsschlüssel auf Firebase hoch. Wenn Sie noch keinen APNs-Authentifizierungsschlüssel haben, erstellen Sie unbedingt einen im Apple Developer Member Center .

      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 unter „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 APN-Benachrichtigungen 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 auf den Projektnamen in der linken Baumansicht. Wählen Sie Ihre App im Abschnitt „ZIELE“ aus, wählen Sie dann die Registerkarte „Info“ aus und erweitern Sie den Abschnitt „URL-Typen“ .
    2. Klicken Sie auf die Schaltfläche „+“ und fügen Sie Ihre verschlüsselte 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.

      Nach Abschluss sollte Ihre Konfiguration etwa wie folgt aussehen (jedoch mit Ihren anwendungsspezifischen Werten):

      Screenshot der benutzerdefinierten URL-Schema-Einrichtungsschnittstelle von Xcode

  4. Optional : Firebase verwendet Methoden-Swizzling, 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 Schemaumleitung von der reCAPTCHA-Überprüfungsseite während der Überprüfung automatisch abzufangen.

    Wenn Sie Swizzling lieber nicht verwenden möchten, lesen Sie Anhang: Telefonanmeldung ohne Swizzling verwenden in den Firebase SDK-Authentifizierungsdokumenten.

anmelden

Um den Anmeldevorgang bei FirebaseUI zu starten, initialisieren Sie zunächst 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 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];
}

Holen Sie sich abschließend eine Instanz von AuthViewController von FUIAuth . Sie können ihn dann entweder als ersten View-Controller Ihrer App oder von einem anderen View-Controller in Ihrer App präsentieren.

Schnell

So erhalten Sie die Anmeldemethodenauswahl:

let authViewController = authUI.authViewController()

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

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

Ziel c

So erhalten Sie die Anmeldemethodenauswahl:

UINavigationController *authViewController = [authUI authViewController];

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

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

Nachdem Sie die Authentifizierungsansicht angezeigt und der Benutzer sich angemeldet haben, 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.
}

Abmelden

FirebaseUI bietet praktische Methoden zum Abmelden von der Firebase-Authentifizierung sowie allen sozialen Identitätsanbietern:

Schnell

authUI.signOut()

Ziel c

[authUI signOut];

Anpassung

Sie können die Anmeldebildschirme anpassen, indem Sie die Ansichtscontroller von FirebaseUI in Unterklassen unterteilen und sie in den Delegate-Methoden 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 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 Ihren Benutzern angezeigten Nachrichten und Eingabeaufforderungen 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 .