Aggiungi facilmente l'accesso alla tua app per iOS con FirebaseUI

FirebaseUI è una libreria creata in aggiunta all'SDK Firebase Authentication che fornisce flussi di interfaccia utente drop-in da utilizzare all'interno dell'app. FirebaseUI offre i seguenti vantaggi:

  • Più fornitori: flussi di accesso per email/password, link email, telefono l'autenticazione, l'accesso con Google, l'accesso a Facebook e l'accesso a Twitter.
  • Gestione dell'account: flussi per gestire le attività di gestione dell'account, ad esempio: creazione di account e reimpostazione delle password.
  • Collegamento anonimo di account: consente di collegare automaticamente gli account anonimi. ai provider di identità.
  • Personalizzabile: personalizza l'aspetto di FirebaseUI in base alla tua app. Inoltre, Poiché FirebaseUI è open source, puoi creare un fork del progetto e personalizzarlo in base alle tue esigenze.

Prima di iniziare

  1. Aggiungi Firebase al tuo progetto Apple.

  2. Aggiungi FirebaseUI al tuo podfile:

    pod 'FirebaseUI'

    Se preferisci, puoi aggiungere solo il componente Auth e i provider vuoi utilizzare:

    pod 'FirebaseUI/Auth'

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

  3. Se non hai ancora collegato l'app al progetto Firebase, fallo dalla console Firebase.

Configura i metodi di accesso

Prima di poter utilizzare Firebase per far accedere gli utenti, devi attivare e configurare i metodi di accesso che vuoi supportare.

Indirizzo email e password

Nella console Firebase, apri la sezione Autenticazione e abilita l'email e l'autenticazione tramite password.

  1. Nella console Firebase, apri la sezione Autenticazione. Il giorno Nella scheda Metodo di accesso, attiva il provider Email/Password. Nota è necessario che l'accesso con email o password sia abilitato per utilizzare l'accesso tramite link via email.

  2. Nella stessa sezione, attiva l'accesso Invia email tramite link (accesso senza password). e fai clic su Salva.

  3. Puoi abilitare l'accesso tramite link via email inizializzando un FUIEmailAuth con FIREmailLinkAuthSignInMethod. Dovrai inoltre fornire un oggetto FIRActionCodeSettings valido con handleCodeInApp impostato su true.

Swift

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)

Objective-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. Inoltre, devi autorizzare l'URL trasmesso all'iniatializer. Puoi farlo nella console Firebase, aprendo la sezione Autenticazione. Nella scheda Metodo di accesso, aggiungi l'URL in Domini autorizzati.

  2. Una volta individuato il link diretto, dovrai passarlo alla UI di autenticazione gestire.

Swift

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

Objective-C

[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
  1. L'accesso tramite link email in FirebaseUI-iOS è compatibile con FirebaseUI-Android e FirebaseUI-web in cui un utente che avvia il flusso da FirebaseUI-Android può aprire il link e completare l'accesso con FirebaseUI-web. Lo stesso vale per il contrario flusso di lavoro.

Apple

  1. Segui le istruzioni Prima di iniziare e Rispetta i dati anonimizzati di Apple. requisiti in consulta la guida Accedi con Apple di Firebase.

  2. Aggiungi la funzionalità Accedi con Apple al file dei diritti.

  3. Inizializza un'istanza del provider OAuth configurata per Accedi con Apple:

    Swift

    provider = FUIOAuth.appleAuthProvider()

    Objective-C

    FUIOAuth *provider = [FUIOAuth appleAuthProvider];

Google

  1. Configura Accedi con Google utilizzando questo tutorial

Facebook

  1. Configura l'SDK di accesso a Facebook seguendo Pagina introduttiva di Facebook.

  2. Nella console Firebase, apri la sezione Autenticazione e attiva Facebook Per attivare l'accesso con Facebook, devi fornire il tuo ID app Facebook e App Secret, che puoi trovare nella Facebook Developers Console.

  3. Attiva la condivisione del portachiavi nel tuo progetto Xcode da Impostazioni progetto > Funzionalità.

  4. Aggiungi fbFACEBOOK_APP_ID come schema URL nel progetto Xcode.

  5. Aggiungi il tuo ID app Facebook e il tuo nome visualizzato al file Info.plist:

    Chiave Valore
    ID app Facebook FACEBOOK_APP_ID (ad es. 1234567890)
    NomeDisplay Facebook Il nome della tua app

  6. Inizializza un'istanza del provider Facebook:

    Swift

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

    Objective-C

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

  7. Se vuoi utilizzare l'accesso limitato di Facebook, imposta la proprietà useLimitedLogin sull'istanza FUIFacebookAuth.

    Swift

    provider.useLimitedLogin = true

    Objective-C

    provider.useLimitedLogin = YES;

Twitter

  1. Nella console Firebase, apri la sezione Autenticazione e attiva Twitter Per abilitare l'accesso a Twitter, devi fornire la tua API Twitter chiave e segreto dell'utente, disponibili nell'applicazione Twitter Console di gestione.

  2. Inizializza un'istanza del provider OAuth configurata per l'accesso a Twitter:

    Swift

    provider = FUIOAuth.twitterAuthProvider()

    Objective-C

    FUIOAuth *provider = [FUIOAuth twitterAuthProvider];

Numero di telefono

  1. Nella console Firebase, apri la sezione Autenticazione e attiva l'accesso con numero di telefono.

  2. Firebase deve essere in grado di verificare che le richieste di accesso al numero di telefono siano provenienti dalla tua app. Uno dei modi per farlo è tramite gli APN notifiche. Consulta Attivare la verifica app per maggiori dettagli.

    Per attivare le notifiche del servizio APN da utilizzare con Firebase Authentication:

    1. In Xcode, attiva le notifiche push. per il tuo progetto.

    2. Carica la chiave di autenticazione del servizio APN in Firebase. Se non disponi già di una chiave di autenticazione del servizio APN, assicurati di crearne una nella Centro membri per gli sviluppatori Apple.

      1. All'interno del progetto nella console Firebase, seleziona l'icona a forma di ingranaggio, seleziona Impostazioni progetto e poi la scheda Cloud Messaging.

      2. Nella sezione Chiave di autenticazione APN in Configurazione app per iOS, fai clic sul pulsante Carica .

      3. Vai alla posizione in cui hai salvato la chiave, selezionala e fai clic su Apri. Aggiungi l'ID chiave per la chiave (disponibile nel Centro membri Apple Developer) e fai clic su Carica.

      Se hai già un certificato del servizio APN, puoi caricarlo .

  3. Quando non è possibile ricevere notifiche APN su un dispositivo, Firebase utilizza reCAPCHA per verificare le richieste.

    Per attivare la verifica reCAPTCHA, svolgi i seguenti passaggi in Xcode:

    1. Apri la configurazione del progetto: fai doppio clic sul nome del progetto nella vista ad albero a sinistra. Seleziona la tua app dalla sezione TARGET, poi Seleziona la scheda Informazioni ed espandi la sezione Tipi di URL.
    2. Fai clic sul pulsante + e aggiungi l'ID app codificato come URL . Puoi trovare l'ID app codificato nella Generali Impostazioni della console Firebase, nella sezione iOS. dell'app. Lascia vuoti gli altri campi.

      Una volta completata, la configurazione dovrebbe essere simile alla seguenti (ma con valori specifici per l'applicazione):

      Screenshot dell&#39;interfaccia di configurazione dello schema URL personalizzato di Xcode

  4. Facoltativo: Firebase utilizza la rotazione dei metodi per ottenere automaticamente il token APN dell'app, per gestire le notifiche push silenziose che Firebase invia alla tua app e intercettare automaticamente il reindirizzamento dello schema personalizzato dalla pagina di verifica reCAPTCHA durante la verifica.

    Se preferisci non utilizzare la funzionalità di rotazione, consulta l'Appendice: utilizzo dell'accesso tramite telefono senza ruotare nella documentazione sull'autenticazione dell'SDK di Firebase.

Accedi

Per avviare il flusso di accesso a FirebaseUI, inizializza prima 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;

Quindi, configura FirebaseUI in modo da utilizzare i metodi di accesso che vuoi supportare:

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;

Se hai attivato l'accesso con Google o Facebook, implementa un gestore per il risultato i flussi di registrazione di Google e Facebook:

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

Infine, ottieni un'istanza di AuthViewController da FUIAuth. Puoi quindi presentarla come primo controller di visualizzazione dell'app o presentarla da con un altro controller di visualizzazione nella tua app.

Swift

Per ottenere il selettore del metodo di accesso:

let authViewController = authUI.authViewController()

Se usi solo l'accesso tramite numero di telefono, puoi visualizzare il numero di telefono direttamente la visualizzazione dell'accesso:

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

Objective-C

Per ottenere il selettore del metodo di accesso:

UINavigationController *authViewController = [authUI authViewController];

Se usi solo l'accesso tramite numero di telefono, puoi visualizzare il numero di telefono direttamente la visualizzazione dell'accesso:

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

Dopo aver presentato la vista di autenticazione e l'utente ha eseguito l'accesso, il risultato viene restituito al delegato di autenticazione FirebaseUI nel metodo 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.
}

Esci

FirebaseUI fornisce metodi pratici per uscire da Firebase Authentication così come tutti i provider di identità social:

Swift

authUI.signOut()

Objective-C

[authUI signOut];

Personalizzazione

Puoi personalizzare le schermate di accesso sottoclassificando i controller di visualizzazione di FirebaseUI e specificandoli nei metodi del delegato di 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];
}

Puoi personalizzare l'URL dei Termini di servizio della tua app, di cui trovi il link nella schermata di creazione account:

Swift

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

Objective-C

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

Infine, puoi personalizzare i messaggi e le richieste mostrati agli utenti per specificare un bundle personalizzato:

Swift

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

Objective-C

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

Passaggi successivi

  • Per ulteriori informazioni sull'utilizzo e sulla personalizzazione di FirebaseUI, consulta README su GitHub.
  • Se trovi un problema in FirebaseUI e vuoi segnalarlo, utilizza lo issue tracker di GitHub.