Catch up on everthing we announced at this year's Firebase Summit. Learn more

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

FirebaseUI ist eine Bibliothek auf der SDK Firebase Authentifizierung aufgebaut , die Drop-in - UI bietet die Verwendung in Ihrer Anwendung fließt für. FirebaseUI bietet die folgenden Vorteile:

  • Mehrere Anbieter: Anmelde-Flows für E - Mail / Passwort, E - Mail - Link, Telefon - Authentifizierung, Google Sign-In, Facebook Login und Twitter Anmeldung.
  • Account - Management: Ströme zu Account - Management - Aufgaben wie Kontoerstellung und das Zurücksetzen von Kennwörtern umgehen.
  • Anonymes Konto verknüpfen: fließt automatisch anonyme Konten zu Identity - Provider verknüpfen.
  • Anpassbare: Anpassen des Aussehens von FirebaseUI Ihre Anwendung anzupassen. Da FirebaseUI Open Source ist, können Sie das Projekt außerdem abzweigen und genau an Ihre Bedürfnisse anpassen.

Bevor Sie beginnen

  1. In Firebase zu Ihrem Apple - Projekt .

  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 noch nicht Ihre App auf Ihr Projekt verbunden Firebase, tun Sie dies aus der Firebase Konsole .

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

In der Firebase Konsole , öffnen Sie den Abschnitt Authentifizierung und E - Mail und Passwort - Authentifizierung aktivieren.

  1. In der Firebase Konsole öffnen den Abschnitt Authentication. 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. Im selben Abschnitt aktivieren E - Mail - Link ( ohne Passwort-Anmeldung) Anmelde-Methode und klicken Sie auf Speichern.

  3. Sie können E - Mail - Link einloggen durch Initialisierung einer aktivieren FUIEmailAuth Instanz mit FIREmailLinkAuthSignInMethod . Dort finden Sie auch ein gültiges zur Verfügung stellen müssen FIRActionCodeSettings Objekt mit handleCodeInApp Satz auf true.

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 so in die tun Firebase - Konsole , um den Authentifizierungsabschnitt öffnen. Auf dem Anmelden Methode Registerkarte, fügen Sie die URL unter autorisierten Domänen.

  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. E - Mail - Link-Anmeldung in FirebaseUI-iOS ist kompatibel mit FirebaseUI-Android und FirebaseUI-Bahn , wo ein Benutzer den Fluss von FirebaseUI-Android starten kann den Link öffnen und vollständige Anmeldung in FirebaseUI-web. Das gleiche gilt für den Gegenstrom.

Apfel

  1. Folgen Sie den Bevor Sie beginnen und die Einhaltung von Apple Datenanforderungen anonymisierter Abschnitte in Firebase Anmeldung mit Apple - Führer.

  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. In der Firebase Konsole , öffnen Sie den Abschnitt Authentifizierung und aktivieren Sie Google Sign-in.

  2. Fügen Sie Ihre umgekehrte Client-ID als URL-Schema in Ihrem Xcode-Projekt hinzu. Sie können diesen Wert in dem finden GoogleService-Info.plist - Datei.

Facebook

  1. Stellen Sie die Facebook Login SDK up von folgenden Facebook-Seite Erste Schritte .

  2. In der Firebase Konsole , öffnen Sie den Abschnitt Authentifizierung und aktivieren 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 Schlüsselanhänger - Sharing in Ihrem Xcode - Projekt aus den Projekteinstellungen> Capabilities Bildschirm.

  4. In fb FACEBOOK_APP_ID als URL - Schema in Ihrem Xcode - Projekt.

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

    Taste Wert
    FacebookAppID FACEBOOK_APP_ID (zB 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 verwenden möchten , Facebook Eingeschränkte Anmeldung , stellen Sie die useLimitedLogin Eigenschaft auf der FUIFacebookAuth Instanz.

    Schnell

    provider.useLimitedLogin = true
    

    Ziel c

    provider.useLimitedLogin = YES;
    

Twitter

  1. In der Firebase Konsole , öffnen Sie den Abschnitt Authentifizierung und aktivieren 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. In der Firebase Konsole , öffnen Sie den Abschnitt Authentifizierung und Telefonnummer-Anmeldung aktivieren.

  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. Siehe Aktivieren App - Bestätigung für weitere Einzelheiten.

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

    1. In Xcode, ermöglicht Push - Benachrichtigungen für Ihr Projekt.

    2. Laden Sie Ihren APNs-Authentifizierungsschlüssel in Firebase hoch. Wenn Sie nicht bereits über einen APNs Authentifizierungsschlüssel haben, stellen Sie sicher , dass man in der erstellen Apple Developer Member Center .

      1. In Ihrem Projekt in der Firebase - Konsole, wählen Sie das Zahnradsymbol, Projekteinstellungen auswählen und anschließend die Cloud Messaging Registerkarte.

      2. In APNs Authentifizierungsschlüssel unter iOS - App - Konfiguration, klicken Sie auf die Schaltfläche Hochladen.

      3. Wechseln Sie zu dem Ort , an dem Sie Ihren Schlüssel gespeichert, wählen Sie aus und klicken Sie auf Öffnen. Fügen Sie den Schlüssel - ID für den Schlüssel (erhältlich 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 können diesen Wert in dem finden GoogleService-Info.plist - Datei.

  4. Optional: Firebase verwendet Methode Swizzling automatisch Ihre App APNs Token zu erhalten, die stille Push - Benachrichtigungen zu handhaben, dass Firebase zu Ihrer App sendet, und automatisch abfangen benutzerdefiniertes Schema Umleitung von der reCAPTCHA Verifizierungsseite während der Überprüfung.

    Wenn Sie nicht zu verwenden Swizzling bevorzugen, finden Sie Anhang: Mit Telefon-Anmeldung ohne Umstellen in Firebase SDK Authentifizierungs docs.

Einloggen

Um den FirebaseUI-Anmeldevorgang 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 Google- und Facebook-Anmeldevorgänge:

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

Schließlich eine Instanz erhalten 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 Authentifizierung Ansicht und die Benutzer bei präsentieren, wird das Ergebnis auf den FirebaseUI Auth Delegaten in dem zurück didSignInWithUser:error: Methode:

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 Anmelde-Bildschirm anpassen , indem FirebaseUI Ansicht Controller und spezifizieren sie in Subklassen FUIAuth ‚s Delegatmethoden:

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 über die Verwendung und FirebaseUI Customizing finden Sie in der Readme - Datei auf GitHub.
  • Wenn Sie in FirebaseUI finden und Ausgabe und möchte es berichten, verwenden Sie die GitHub issue tracker .