Łatwe logowanie się w aplikacji na iOS dzięki FirebaseUI

FirebaseUI to biblioteka utworzona oprócz pakietu SDK Uwierzytelniania Firebase, który udostępnia przepływy w interfejsie użytkownika, w aplikacji. FirebaseUI zapewnia następujące korzyści:

  • Wielu dostawców: procesy logowania w przypadku adresu e-mail i hasła, linku do e-maila, numeru telefonu. uwierzytelnianie, Logowanie przez Google, logowanie przez Facebooka i logowanie na Twitterze.
  • Zarządzanie kontem: procesy zarządzania kontem, takie jak: tworzenia kont i resetowania haseł.
  • Anonimowe łączenie kont: automatyczne łączenie anonimowych kont. z dostawcami tożsamości.
  • Personalizacja: możesz dostosować wygląd FirebaseUI do swojej aplikacji. Oprócz tego: Ponieważ FirebaseUI to oprogramowanie typu open source, możesz utworzyć rozwidlenie projektu i go dostosować aby dostosować je do swoich potrzeb.

Zanim zaczniesz

  1. Dodaj Firebase do projektu Apple.

  2. Dodaj FirebaseUI do pliku Podfile:

    pod 'FirebaseUI'

    Jeśli wolisz, możesz dodać tylko komponent Auth i dostawców, chcesz używać:

    pod 'FirebaseUI/Auth'

pod 'FirebaseUI/Google'
pod 'FirebaseUI/Facebook'
pod 'FirebaseUI/OAuth' # Used for Sign in with Apple, Twitter, etc
pod 'FirebaseUI/Phone'

  3. Jeśli Twoja aplikacja nie jest jeszcze połączona z projektem Firebase, zrób to na stronie konsolę Firebase.

Skonfiguruj metody logowania

Aby móc używać Firebase do logowania użytkowników, musisz włączyć i skonfigurować metod logowania, które chcesz obsługiwać.

Adres e-mail i hasło

W konsoli Firebase otwórz sekcję Uwierzytelnianie i włącz pocztę e-mail. i uwierzytelnianie przy użyciu hasła.

  1. W konsoli Firebase otwórz sekcję Uwierzytelnianie. Dzień kartę Metoda logowania, włącz dostawcę E-mail/hasło. Notatka że logowanie za pomocą linku e-mail wymaga włączenia logowania za pomocą adresu e-mail lub hasła.

  2. W tej samej sekcji włącz logowanie się przy użyciu opcji Link w e-mailu (logowanie bez hasła). i kliknij Zapisz.

  3. Aby włączyć logowanie za pomocą linku w e-mailu, zainicjuj FUIEmailAuth z instancją FIREmailLinkAuthSignInMethod. Musisz też podać prawidłowy obiekt FIRActionCodeSettings z wartością handleCodeInApp ustawioną jako prawda.

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

  1. Dodatkowo musisz umieścić na białej liście adres URL przekazywany do narzędzia iniatializer. Możesz to zrobić w konsoli Firebase, a następnie otwórz Uwierzytelnianie. . Na karcie Metoda logowania dodaj adres URL z Autoryzowane domeny.

  2. Po wykryciu precyzyjnego linku musisz przekazać go do interfejsu uwierzytelniania, można obsłużyć.

Swift

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

Objective-C

[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
  1. Logowanie za pomocą linku w e-mailu w FirebaseUI-iOS jest zgodne z FirebaseUI – Android. oraz Strona internetowa FirebaseUI w którym użytkownik rozpoczynający proces od FirebaseUI-Androida może otworzyć link. i zaloguj się za pomocą FirebaseUI-web. To samo dotyczy przeciwności przepływu danych.

Apple

  1. Postępuj zgodnie z sekcjami Zanim zaczniesz oraz Stosuj zanonimizowane dane Apple wymagań przewodnik po logowaniu się przez Apple w Firebase.

  2. Dodaj do pliku uprawnień funkcję Zaloguj się przez Apple.

  3. Zainicjuj instancję dostawcy OAuth skonfigurowaną pod kątem funkcji Zaloguj się przez Apple:

    Swift

    provider = FUIOAuth.appleAuthProvider()

    Objective-C

    FUIOAuth *provider = [FUIOAuth appleAuthProvider];

Google

  1. Skonfiguruj Logowanie przez Google, korzystając z tego samouczka

Facebook

  1. Aby skonfigurować pakiet Facebook Login SDK, wykonaj następujące czynności Facebook – pierwsze kroki.

  2. W konsoli Firebase otwórz sekcję Uwierzytelnianie i włącz Facebooka. Aby włączyć logowanie przez Facebooka, musisz podać swój identyfikator aplikacji Facebook i App Secret, które znajdziesz w konsoli Facebook Developers Console.

  3. Włącz udostępnianie pęku kluczy w projekcie Xcode w sekcji Ustawienia projektu > Funkcje.

  4. Dodaj fbFACEBOOK_APP_ID jako schemat adresu URL w Projekt Xcode.

  5. Dodaj identyfikator aplikacji Facebook i wyświetlaną nazwę do pliku Info.plist:

    Klucz Wartość
    Identyfikator aplikacji Facebook FACEBOOK_APP_ID (np. 1234567890)
    NazwaWyświetlana na Facebooku Nazwa Twojej aplikacji

  6. Zainicjuj instancję dostawcy Facebooka:

    Swift

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

    Objective-C

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

  7. Jeśli chcesz użyć funkcji Facebook Limited Login, ustaw właściwość useLimitedLogin w instancji FUIFacebookAuth.

    Swift

    provider.useLimitedLogin = true

    Objective-C

    provider.useLimitedLogin = YES;

Twitter

  1. W konsoli Firebase otwórz sekcję Uwierzytelnianie i włącz Twittera Aby włączyć logowanie przez Twittera, musisz podać swój interfejs API Twittera tajny klucz klienta i tajny klucz, które można pobrać w aplikacji Twittera. Konsola zarządzania.

  2. Zainicjuj instancję dostawcy OAuth skonfigurowaną na potrzeby logowania przez Twittera:

    Swift

    provider = FUIOAuth.twitterAuthProvider()

    Objective-C

    FUIOAuth *provider = [FUIOAuth twitterAuthProvider];

Numer telefonu

  1. W konsoli Firebase otwórz sekcję Uwierzytelnianie i włącz numer telefonu.

  2. Firebase musi mieć możliwość sprawdzania, czy prośby o zalogowanie się są pochodzące z aplikacji. Można to zrobić na przykład za pomocą APN-ów, powiadomienia. Zobacz Włączanie weryfikacji aplikacji .

    Aby włączyć powiadomienia APNs na potrzeby usługi Firebase Authentication:

    1. Włącz powiadomienia push w Xcode. do swojego projektu.

    2. Prześlij swój klucz uwierzytelniania APNs do Firebase. Jeśli nie masz jeszcze klucza uwierzytelniania APNs, utwórz go w Apple Developer Member Center

      1. W projekcie w konsoli Firebase wybierz ikona koła zębatego, wybierz Ustawienia projektu i wybierz Komunikacja w chmurze.

      2. W sekcji Klucz uwierzytelniania APN w sekcji Konfiguracja aplikacji na iOS kliknij przycisk Prześlij Przycisk

      3. Przejdź do miejsca, w którym masz zapisany klucz, wybierz go i kliknij Otwórz. Dodaj identyfikator klucza (dostępny w sekcji Apple Developer Member Center) i kliknij Prześlij.

      Jeśli masz już certyfikat APNs, możesz go przesłać .

  3. Gdy nie można odebrać powiadomień APNs na urządzenie, Firebase używa reCAPTCHA w celu weryfikacji żądań.

    Aby włączyć weryfikację reCAPTCHA, wykonaj te czynności w Xcode:

    1. Otwórz konfigurację projektu: kliknij dwukrotnie jego nazwę w lewy widok drzewa. Wybierz aplikację w sekcji CELE, a potem wybierz kartę Informacje i rozwiń sekcję Typy adresów URL.
    2. Kliknij przycisk + i dodaj zakodowany identyfikator aplikacji jako adres URL. oszustw. Zakodowany identyfikator aplikacji znajdziesz w Ogólne Ustawienia w konsoli Firebase w sekcji dotyczącej iOS. . Pozostałe pola pozostaw puste.

      Po zakończeniu konfiguracja powinna wyglądać podobnie do następujące (ale z wartościami związanymi z daną aplikacją):

      Zrzut ekranu interfejsu konfiguracji niestandardowego schematu adresu URL Xcode

  4. Opcjonalnie: Firebase wykorzystuje przesuwanie metod, aby automatycznie uzyskiwać token APNs aplikacji do obsługi cichych powiadomień push wysyłanych wysyła do aplikacji i automatycznie przechwytuje przekierowanie schematu niestandardowego na stronie weryfikacji reCAPTCHA.

    Jeśli nie chcesz używać przesuwania palcem, zobacz Dodatek: logowanie się przy użyciu telefonu bez przesuwania palcem. w dokumentacji uwierzytelniania pakietu SDK Firebase.

Zaloguj się

Aby uruchomić logowanie się w FirebaseUI, najpierw zainicjuj interfejs FirebaseUI:

Swift

import FirebaseAuthUI

/* ... */

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

Objective-C

@import FirebaseAuthUI;

...

[FIRApp configure];
FUIAuth *authUI = [FUIAuth defaultAuthUI];
// You need to adopt a FUIAuthDelegate protocol to receive callback
authUI.delegate = self;

Następnie skonfiguruj FirebaseUI, tak aby korzystała z metod logowania, które chcesz obsługiwać:

Swift

import FirebaseAuthUI
import FirebaseFacebookAuthUI
import FirebaseGoogleAuthUI
import FirebaseOAuthUI
import FirebasePhoneAuthUI

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

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

Jeśli masz włączone logowanie przez Google lub Facebooka, zaimplementuj moduł obsługi polecenia Proces rejestracji w Google i na Facebooku:

Swift

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
}

Objective-C

- (BOOL)application:(UIApplication *)app
            openURL:(NSURL *)url
            options:(NSDictionary *)options {
  NSString *sourceApplication = options[UIApplicationOpenURLOptionsSourceApplicationKey];
  return [[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
}

Na koniec pobierz instancję AuthViewController z usługi FUIAuth. Następnie możesz: możesz przedstawić go jako pierwszy kontroler widoku aplikacji lub inny kontroler widoku danych w aplikacji.

Swift

Aby pobrać selektor metody logowania:

let authViewController = authUI.authViewController()

Jeśli logujesz się tylko przy użyciu numeru telefonu, możesz wyświetlać numer telefonu w widoku logowania:

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

Objective-C

Aby pobrać selektor metody logowania:

UINavigationController *authViewController = [authUI authViewController];

Jeśli logujesz się tylko przy użyciu numeru telefonu, możesz wyświetlać numer telefonu w widoku logowania:

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

Wyświetlenie widoku uwierzytelniania i zalogowanie się użytkownika wrócił do przedstawiciela uwierzytelniania FirebaseUI w interfejsie didSignInWithUser:error: :

Swift

func authUI(_ authUI: FUIAuth, didSignInWith user: FIRUser?, error: Error?) {
  // handle user and error as necessary
}

Objective-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.
}

Wyloguj się

FirebaseUI udostępnia wygodne metody wylogowywania się z Uwierzytelniania Firebase a także wszystkich dostawców tożsamości społecznościowych:

Swift

authUI.signOut()

Objective-C

[authUI signOut];

Dostosowywanie

Możesz dostosować ekrany logowania, przypisując widok FirebaseUI do podklasy. i określenie ich w metodach przekazywania dostępu w FUIAuth:

Swift

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)
}

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

Możesz dostosować adres URL do warunków korzystania z aplikacji. Link znajdziesz na ekran tworzenia konta:

Swift

let kFirebaseTermsOfService = URL(string: "https://example.com/terms")!
authUI.tosurl = kFirebaseTermsOfService

Objective-C

authUI.TOSURL = [NSURL URLWithString:@"https://example.com/terms"];

Możesz też dostosować komunikaty i prompty wyświetlane użytkownikom przez: określenie pakietu niestandardowego:

Swift

authUI.customStringsBundle = NSBundle.mainBundle() // Or any custom bundle.

Objective-C

authUI.customStringsBundle = [NSBundle mainBundle]; // Or any custom bundle.

Następne kroki

  • Więcej informacji o używaniu i dostosowywaniu FirebaseUI znajdziesz README (w języku angielskim) znajdziesz w serwisie GitHub.
  • Jeśli znajdziesz i zgłosisz problem w FirebaseUI, skorzystaj z Narzędzie do śledzenia błędów GitHub.