Mit FirebaseUI ganz einfach Anmeldungen zu iOS-Apps hinzufügen

FirebaseUI ist eine Bibliothek, die auf dem Firebase Authentication SDK basiert und Drop-in-UI-Abläufe für die Verwendung in Ihrer App bietet. FirebaseUI bietet folgende Vorteile:

• Mehrere Anbieter: Anmeldeabläufe für E-Mail-Adresse/Passwort, E-Mail-Link, Telefon authentifizierung, Google Log-in, Facebook-Anmeldung und Twitter-Anmeldung
• Kontoverwaltung: Abläufe zur Verwaltung von Konten, z. B. zum Erstellen von Konten und Zurücksetzen von Passwörtern
• Verknüpfung anonymer Konten: Abläufe zum automatischen Verknüpfen anonymer Konten mit Identitätsanbietern.
• Anpassbar: Sie können das Erscheinungsbild von FirebaseUI an Ihre App anpassen. Auch, da FirebaseUI Open Source ist, können Sie das Projekt forken und es genau an Ihre Bedürfnisse anpassen.

Hinweis

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

2. Fügen Sie FirebaseUI Ihrem Podfile hinzu:

   pod 'FirebaseUI'
   

   Alternativ 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 verknüpft haben, tun Sie das in der Firebase Konsole.

Anmeldemethoden einrichten

Bevor Sie Firebase verwenden können, um Nutzer anzumelden, 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 Bereich Authentifizierung und aktivieren Sie die Authentifizierung mit E-Mail-Adresse und Passwort.

Authentifizierung per E-Mail-Link

1. Öffnen Sie in der Firebase Konsole den Bereich Authentifizierung. Aktivieren Sie auf dem Tab Anmeldemethode den Anbieter E-Mail-Adresse/Passwort. Beachten Sie, dass die Anmeldung mit E-Mail-Adresse oder Passwort aktiviert sein muss, um die Anmeldung per E-Mail-Link verwenden zu können.

2. Aktivieren Sie im selben Bereich die Anmeldemethode E-Mail-Link (passwortlose 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 mit handleCodeInApp auf „true“ bereitstellen.

   Swift

   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)
   

   Objective-C

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

4. Außerdem müssen Sie die URL auf die Zulassungsliste setzen, die Sie an den Initialisierer übergeben. Öffnen Sie dazu in der Firebase Console den Bereich Authentifizierung. Fügen Sie auf dem Tab Anmeldemethode die URL unter Autorisierte Domains hinzu.

5. Sobald Sie den Deeplink erfasst haben, müssen Sie ihn an die Authentifizierungs-UI übergeben, damit er verarbeitet werden kann.

   Swift

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

   Objective-C

   [[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
   

6. Die Anmeldung per E-Mail-Link in FirebaseUI-iOS ist mit FirebaseUI-Android und FirebaseUI-Web kompatibel. Ein Nutzer, der den Ablauf in FirebaseUI-Android startet, kann den Link öffnen und die Anmeldung mit FirebaseUI-Web abschließen. Das Gleiche gilt für den umgekehrten Ablauf.

Apple

1. Folgen Sie der Anleitung unter Hinweis und Anforderungen von Apple für anonymisierte Daten einhalten in der Anleitung zur Anmeldung mit Apple in Firebase.

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:

   Swift

   provider = FUIOAuth.appleAuthProvider()

   Objective-C

   FUIOAuth *provider = [FUIOAuth appleAuthProvider];

Google

1. Richten Sie die Google-Anmeldung mit dieser Anleitung ein.

Facebook

1. Richten Sie das Facebook Login SDK ein. Folgen Sie dazu der Seite Erste Schritte von Facebook.

2. Ö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 und Ihr App-Secret angeben. Sie finden diese in der Facebook Developers Console.

3. Aktivieren Sie die Keychain-Freigabe in Ihrem Xcode-Projekt auf dem Bildschirm Projekteinstellungen > Funktionen.

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

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

   Schlüssel	Wert
   FacebookAppID	FACEBOOK_APP_ID (z. B. 1234567890)
   FacebookDisplayName	Der Name Ihrer App

6. Initialisieren Sie eine Facebook-Anbieterinstanz:

   Swift

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

   Objective-C

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

7. Wenn Sie Facebook Limited Login verwenden möchten, legen Sie das useLimitedLogin Attribut für die FUIFacebookAuth Instanz fest.

   Swift

   provider.useLimitedLogin = true

   Objective-C

   provider.useLimitedLogin = YES;

Twitter

1. Öffnen Sie in der Firebase Konsole den Bereich Authentifizierung und aktivieren Sie Twitter. Um die Twitter-Anmeldung zu aktivieren, müssen Sie Ihren Twitter-API-Consumer-Key und Ihr Consumer-Secret angeben. Sie finden diese in der Twitter Application Management Console.

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

   Swift

   provider = FUIOAuth.twitterAuthProvider()

   Objective-C

   FUIOAuth *provider = [FUIOAuth twitterAuthProvider];

Telefonnummer

1. Öffnen Sie in der Firebase Console den Bereich Authentifizierung und aktivieren Sie die Anmeldung mit Telefonnummer.

2. Firebase muss bestätigen können, dass Anfragen zur Anmeldung mit Telefonnummer von Ihrer App stammen. Eine Möglichkeit dazu sind APNs-Benachrichtigungen. Weitere Informationen finden Sie unter App-Überprüfung aktivieren.

   So aktivieren Sie APNs-Benachrichtigungen zur Verwendung mit Firebase Authentication:

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

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

      1. Rufen Sie in der Firebase Console die settings Einstellungen > Allgemein auf. Klicken Sie dann auf den Cloud Messaging Tab.
      2. Klicken Sie unter APNs-Authentifizierungsschlüssel im Abschnitt Konfiguration der iOS-App auf Hochladen , um Ihren Authentifizierungsschlüssel für die Entwicklung oder den Authentifizierungsschlüssel für die Produktion oder beide hochzuladen. Mindestens einer ist erforderlich.
      3. Suchen Sie den Speicherort, 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 im Apple Developer Member Center) und klicken Sie auf Hochladen.

      Wenn Sie bereits ein APNs-Zertifikat haben, 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.

   So aktivieren Sie die reCAPTCHA-Überprüfung in Xcode:

   1. Öffnen Sie die Projektkonfiguration. Doppelklicken Sie in der linken Baumansicht auf den Projektnamen. Wählen Sie Ihre App im Bereich TARGETS aus, dann wählen Sie den Tab Info und maximieren Sie den Bereich URL Types.
   2. Klicken Sie auf die Schaltfläche + und fügen Sie Ihre codierte App-ID als URL Schema hinzu. Sie finden Ihre codierte App-ID auf der Allgemeine Einstellungen Seite der Firebase Console im Bereich für Ihre iOS App. Lassen Sie die anderen Felder leer.

      Ihre Konfiguration sollte dann in etwa so aussehen (aber mit Ihren anwendungsspezifischen Werten):

      

4. Optional: Firebase verwendet Method Swizzling, um automatisch das APNs-Token Ihrer App abzurufen, die stummen Push-Benachrichtigungen zu verarbeiten, die Firebase an Ihre App sendet, und die Umleitung des benutzerdefinierten Schemas von der reCAPTCHA-Überprüfungsseite während der Überprüfung automatisch abzufangen.

   Wenn Sie Swizzling nicht verwenden möchten, lesen Sie den Anhang: Anmeldung mit Telefonnummer ohne Swizzling in der Dokumentation zur Firebase SDK-Authentifizierung.

Anmelden

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

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 schließlich eine Instanz von AuthViewController aus FUIAuth ab. Sie können sie dann entweder als ersten Ansichtscontroller Ihrer App präsentieren oder von einem anderen Ansichtscontroller in Ihrer App aus.

let authViewController = authUI.authViewController()

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

UINavigationController *authViewController = [authUI authViewController];

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

Nachdem Sie die Authentifizierungsansicht präsentiert haben und sich der Nutzer angemeldet hat, wird das Ergebnis an den FirebaseUI Auth-Delegaten in der Methode 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 zum Abmelden von der Firebase-Authentifizierung sowie von allen sozialen Identitätsanbietern:

authUI.signOut()

[authUI signOut];

Anpassung

Sie können die Anmeldebildschirme anpassen, indem Sie die Ansichtscontroller von FirebaseUI unterklassen und sie in den Delegatenmethoden 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 zu den Nutzungsbedingungen Ihrer App anpassen, die auf dem Bildschirm zur Kontoerstellung verlinkt ist:

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 ein benutzerdefiniertes Bundle angeben:

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 Datei README auf GitHub.
• Wenn Sie ein Problem in FirebaseUI finden und es melden möchten, verwenden Sie den GitHub-Issue-Tracker.