Z łatwością dodaj logowanie do aplikacji na iOS za pomocą FirebaseUI

FirebaseUI to biblioteka zbudowana na bazie pakietu SDK Firebase Authentication, która zapewnia przepływy interfejsu użytkownika do wykorzystania w Twojej aplikacji. FirebaseUI zapewnia następujące korzyści:

  • Wielu dostawców : przepływy logowania dla adresu e-mail/hasła, łącza e-mail, uwierzytelniania telefonicznego, logowania Google, logowania do Facebooka i logowania do Twittera.
  • Zarządzanie kontem : przepływy do obsługi zadań związanych z zarządzaniem kontem, takich jak tworzenie konta i resetowanie haseł.
  • Łączenie kont anonimowych : automatyczne łączenie kont anonimowych z dostawcami tożsamości.
  • Możliwość dostosowania : dostosuj wygląd FirebaseUI do swojej aplikacji. Ponadto, ponieważ FirebaseUI jest oprogramowaniem typu open source, możesz rozwidlić projekt i dostosować go dokładnie do swoich potrzeb.

Zanim zaczniesz

  1. Dodaj Firebase do swojego projektu Apple .

  2. Dodaj FirebaseUI do swojego Podfile:

    pod 'FirebaseUI'

    Jeśli wolisz, możesz dodać tylko komponent Auth i dostawców, z których chcesz korzystać:

    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 jeszcze nie połączyłeś aplikacji z projektem Firebase, zrób to z konsoli Firebase .

Skonfiguruj metody logowania

Zanim będziesz mógł używać Firebase do logowania użytkowników, musisz włączyć i skonfigurować metody logowania, które chcesz obsługiwać.

Adres e-mail i hasło

W konsoli Firebase otwórz sekcję Uwierzytelnianie i włącz uwierzytelnianie za pomocą poczty elektronicznej i hasła.

  1. W konsoli Firebase otwórz sekcję Uwierzytelnianie . Na karcie Metoda logowania włącz dostawcę adresu e-mail/hasła . Pamiętaj, że aby móc logować się za pomocą łącza e-mail, musi być włączone logowanie za pomocą adresu e-mail/hasła.

  2. W tej samej sekcji włącz metodę logowania za pomocą łącza e-mail (logowanie bez hasła) i kliknij Zapisz .

  3. Możesz włączyć logowanie za pomocą łącza e-mail, inicjując instancję FUIEmailAuth za pomocą FIREmailLinkAuthSignInMethod . Będziesz także musiał podać prawidłowy obiekt FIRActionCodeSettings z handleCodeInApp ustawionym na true.

Szybki

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)

Cel 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. Dodatkowo musisz dodać do białej listy adres URL przekazywany do inicjatora. Możesz to zrobić w konsoli Firebase , otwórz sekcję Uwierzytelnianie . Na karcie Metoda logowania dodaj adres URL w obszarze Autoryzowane domeny .

  2. Po złapaniu głębokiego linku musisz przekazać go do interfejsu uwierzytelniania, aby można było go obsłużyć.

Szybki

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

Cel C

[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
  1. Logowanie za pomocą łącza e-mail w FirebaseUI-iOS jest zgodne z FirebaseUI-Android i FirebaseUI-web , gdzie jeden użytkownik rozpoczynający przepływ z FirebaseUI-Android może otworzyć łącze i dokończyć logowanie za pomocą FirebaseUI-web. To samo dotyczy przepływu przeciwnego.

Jabłko

  1. Postępuj zgodnie z sekcjami Zanim zaczniesz i Zgodność z wymaganiami dotyczącymi anonimowych danych Apple w przewodniku Firebase Zaloguj się za pomocą Apple .

  2. Dodaj funkcję Zaloguj się za pomocą Apple do swojego pliku uprawnień.

  3. Zainicjuj instancję dostawcy OAuth skonfigurowaną do logowania się za pomocą Apple:

    Szybki

    provider = FUIOAuth.appleAuthProvider()

    Cel C

    FUIOAuth *provider = [FUIOAuth appleAuthProvider];

Google

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

  2. Pobierz nową kopię pliku GoogleService-Info.plist swojego projektu i skopiuj ją do projektu Xcode. Zastąp istniejące wersje nową. (Zobacz Dodawanie Firebase do projektu na iOS .)

  3. Dodaj odwrócony identyfikator klienta jako schemat adresu URL w projekcie Xcode. Tę wartość można znaleźć w pliku GoogleService-Info.plist .

    Facebook

  4. Skonfiguruj pakiet SDK logowania do Facebooka, postępując zgodnie ze stroną wprowadzającą na Facebooku .

  5. W konsoli Firebase otwórz sekcję Uwierzytelnianie i włącz Facebook. Aby włączyć logowanie przez Facebooka, musisz podać swój identyfikator aplikacji Facebook i sekret aplikacji, które możesz uzyskać w konsoli programistów Facebooka.

  6. Włącz udostępnianie pęku kluczy w swoim projekcie Xcode na ekranie Ustawienia projektu > Możliwości .

  7. Dodaj fb FACEBOOK_APP_ID jako schemat adresu URL w swoim projekcie Xcode.

  8. Dodaj swój identyfikator aplikacji Facebook i nazwę wyświetlaną do pliku Info.plist :

    Klucz Wartość
    Identyfikator aplikacji Facebooka FACEBOOK_APP_ID (na przykład 1234567890 )
    Nazwa wyświetlana na Facebooku Nazwa Twojej aplikacji

  9. Zainicjuj instancję dostawcy Facebooka:

    Szybki

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

    Cel C

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

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

    Szybki

    provider.useLimitedLogin = true

    Cel C

    provider.useLimitedLogin = YES;

Świergot

  1. W konsoli Firebase otwórz sekcję Uwierzytelnianie i włącz Twitter. Aby włączyć logowanie na Twitterze, musisz podać klucz konsumenta i tajny sekret interfejsu API Twittera, które można uzyskać w konsoli zarządzania aplikacjami Twittera.

  2. Zainicjuj instancję dostawcy OAuth skonfigurowaną do logowania na Twitterze:

    Szybki

    provider = FUIOAuth.twitterAuthProvider()

    Cel C

    FUIOAuth *provider = [FUIOAuth twitterAuthProvider];

Numer telefonu

  1. W konsoli Firebase otwórz sekcję Uwierzytelnianie i włącz logowanie za pomocą numeru telefonu.

  2. Firebase musi mieć możliwość sprawdzenia, czy prośby o zalogowanie się na numer telefonu pochodzą z Twojej aplikacji. Jednym ze sposobów osiągnięcia tego są powiadomienia APN. Aby uzyskać szczegółowe informacje, zobacz Włączanie weryfikacji aplikacji .

    Aby włączyć powiadomienia APN do użytku z uwierzytelnianiem Firebase:

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

    2. Prześlij swój klucz uwierzytelniający APNs do Firebase. Jeśli nie masz jeszcze klucza uwierzytelniającego APNs, pamiętaj o utworzeniu go w Apple Developer Member Center .

      1. Wewnątrz projektu w konsoli Firebase wybierz ikonę koła zębatego, wybierz Ustawienia projektu , a następnie wybierz kartę Cloud Messaging .

      2. W kluczu uwierzytelniania APN w obszarze konfiguracji aplikacji na iOS kliknij przycisk Prześlij .

      3. Przejdź do lokalizacji, w której zapisałeś klucz, wybierz ją i kliknij Otwórz . Dodaj identyfikator klucza (dostępny w Apple Developer Member Center ) i kliknij Prześlij .

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

  3. Gdy na urządzeniu nie można odebrać powiadomień APN, Firebase używa reCAPTCHA do weryfikacji żądań.

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

    1. Otwórz konfigurację projektu: kliknij dwukrotnie nazwę projektu w lewym widoku drzewa. Wybierz swoją aplikację w sekcji CELE , następnie wybierz kartę Informacje i rozwiń sekcję Typy adresów URL .
    2. Kliknij przycisk + i dodaj zakodowany identyfikator aplikacji jako schemat adresu URL. Zakodowany identyfikator aplikacji znajdziesz na stronie Ustawienia ogólne konsoli Firebase, w sekcji aplikacji na iOS. Pozostałe pola pozostaw puste.

      Po zakończeniu konfiguracja powinna wyglądać podobnie do poniższej (ale z wartościami specyficznymi dla aplikacji):

      Zrzut ekranu przedstawiający interfejs konfiguracji niestandardowego schematu adresu URL Xcode

  4. Opcjonalnie : Firebase używa metody swizzling, aby automatycznie uzyskać token APNs Twojej aplikacji, obsługiwać ciche powiadomienia push wysyłane przez Firebase do Twojej aplikacji i automatycznie przechwytywać przekierowanie niestandardowego schematu ze strony weryfikacji reCAPTCHA podczas weryfikacji.

    Jeśli wolisz nie używać swizzlingu, zobacz Dodatek: Korzystanie z logowania za pomocą telefonu bez swizzlingu w dokumentach uwierzytelniania Firebase SDK.

Zalogować się

Aby rozpocząć proces logowania do FirebaseUI, najpierw zainicjuj FirebaseUI:

Szybki

import FirebaseAuthUI

/* ... */

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

Cel 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ł z metod logowania, które chcesz obsługiwać:

Szybki

import FirebaseAuthUI
import FirebaseFacebookAuthUI
import FirebaseGoogleAuthUI
import FirebaseOAuthUI
import FirebasePhoneAuthUI

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

Cel 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 włączyłeś logowanie przez Google lub Facebook, zaimplementuj procedurę obsługi wyników procesów rejestracji w Google i Facebooku:

Szybki

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
}

Cel 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 FUIAuth . Następnie możesz zaprezentować go jako pierwszy kontroler widoku aplikacji lub zaprezentować go z innego kontrolera widoku w aplikacji.

Szybki

Aby uzyskać selektor metody logowania:

let authViewController = authUI.authViewController()

Jeśli korzystasz tylko z logowania za pomocą numeru telefonu, możesz zamiast tego wyświetlić bezpośrednio widok logowania za pomocą numeru telefonu:

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

Cel C

Aby uzyskać selektor metody logowania:

UINavigationController *authViewController = [authUI authViewController];

Jeśli korzystasz tylko z logowania za pomocą numeru telefonu, możesz zamiast tego wyświetlić bezpośrednio widok logowania za pomocą numeru telefonu:

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

Po przedstawieniu widoku uwierzytelniania i zalogowaniu się użytkownika wynik jest zwracany do delegata FirebaseUI Auth w metodzie didSignInWithUser:error: ::

Szybki

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

Cel 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 zapewnia wygodne metody wylogowywania się z uwierzytelniania Firebase, a także ze wszystkich dostawców tożsamości społecznościowych:

Szybki

authUI.signOut()

Cel C

[authUI signOut];

Dostosowywanie

Możesz dostosować ekrany logowania, podklasując kontrolery widoku FirebaseUI i określając je w metodach delegowania FUIAuth :

Szybki

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

Cel 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, do których link znajduje się na ekranie tworzenia konta:

Szybki

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

Cel C

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

Na koniec możesz dostosować komunikaty i podpowiedzi wyświetlane użytkownikom, określając niestandardowy pakiet:

Szybki

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

Cel C

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

Następne kroki