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

FirebaseUI è una libreria basata sull'SDK Firebase Authentication che fornisce flussi dell'interfaccia utente integrati da utilizzare nella tua app. FirebaseUI offre i seguenti vantaggi:

  • Più provider: flussi di accesso per email/password, link email, autenticazione telefonica , Accedi con Google, Facebook Login e Twitter Login.
  • Gestione account: flussi per gestire le attività di gestione degli account, come la creazione di account e la reimpostazione delle password.
  • Collegamento di account anonimi: flussi per collegare automaticamente gli account anonimi ai provider di identità.
  • Personalizzabile: personalizza l'aspetto di FirebaseUI in modo che corrisponda alla tua app. Inoltre, poiché FirebaseUI è open source, puoi creare un fork del progetto e personalizzarlo esattamente 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 che 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 tuo progetto Firebase, fallo da Firebase console.

Configurare i metodi di accesso

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

Indirizzo email e password

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

  1. Nella Firebase console, apri la sezione Autenticazione. Nella scheda Metodo di accesso, attiva il provider Email/Password. Tieni presente che per utilizzare l'accesso tramite link email devi attivare l'accesso tramite email o password.

  2. Nella stessa sezione, attiva il metodo di accesso Link email (accesso senza password) e fai clic su Salva.

  3. Puoi attivare l'accesso tramite link email inizializzando un'istanza FUIEmailAuth con FIREmailLinkAuthSignInMethod. Dovrai anche fornire un oggetto FIRActionCodeSettings valido con handleCodeInApp impostato su true.

    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. Inoltre, devi inserire l'URL che passi all'inizializzatore nella lista consentita. Per farlo, apri la sezione Autenticazione nella console Firebase. Nella scheda Metodo di accesso, aggiungi l'URL in Domini autorizzati.

  5. Una volta acquisito il link diretto, dovrai passarlo all'interfaccia utente di autenticazione in modo che possa essere gestito.

    Swift

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

    Objective-C

    [[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
    
  6. L'accesso tramite link email in FirebaseUI-iOS è compatibile con FirebaseUI-Android e FirebaseUI-web dove 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 flusso opposto.

Apple

  1. Segui le sezioni Prima di iniziare e Rispettare i requisiti dei dati anonimizzati di Apple nella guida all'accesso con Apple di Firebase .

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

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

    Swift

    provider = FUIOAuth.appleAuthProvider()

    Objective-C

    FUIOAuth *provider = [FUIOAuth appleAuthProvider];

Google

  1. Configura l'accesso con Google utilizzando questo tutorial

Facebook

  1. Configura l'SDK Facebook Login seguendo la pagina di guida introduttiva di Facebook.

  2. Nella Firebase console, apri la sezione Autenticazione e attiva Facebook. Per attivare l'accesso con Facebook, devi fornire l'ID app e il segreto dell'app Facebook, che puoi trovare nella console per sviluppatori di Facebook.

  3. Attiva la condivisione del portachiavi nel progetto Xcode dalla schermata Impostazioni progetto > Funzionalità.

  4. Aggiungi fbFACEBOOK_APP_ID come schema URL nel tuo progetto Xcode.

  5. Aggiungi l'ID app e il nome visualizzato di Facebook al file Info.plist:

    Chiave Valore
    FacebookAppID FACEBOOK_APP_ID (ad es. 1234567890)
    FacebookDisplayName 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 Firebase console, apri la sezione Autenticazione e attiva Twitter. Per attivare l'accesso con Twitter, devi fornire la chiave utente e il segreto dell'API Twitter, che puoi trovare nella console di gestione delle applicazioni Twitter.

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

    Swift

    provider = FUIOAuth.twitterAuthProvider()

    Objective-C

    FUIOAuth *provider = [FUIOAuth twitterAuthProvider];

Numero di telefono

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

  2. Firebase deve essere in grado di verificare che le richieste di accesso con il numero di telefono provengano dalla tua app. Uno dei modi per farlo è tramite le notifiche APN. Per maggiori dettagli, vedi Attivare la verifica dell'app.

    Per attivare le notifiche APN da utilizzare con Firebase Authentication:

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

    2. Carica la chiave di autenticazione APN su Firebase. Se non hai già una chiave di autenticazione APN, assicurati di crearne una nel Centro membri per 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. In Chiave di autenticazione APN nella sezione Configurazione app per iOS, fai clic sul pulsante Carica per caricare la chiave di autenticazione di sviluppo, la chiave di autenticazione di produzione o entrambe. È necessaria almeno una chiave.

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

      Se hai già un certificato APN, puoi caricare il certificato.

  3. Quando le notifiche APN non possono essere ricevute su un dispositivo, Firebase utilizza reCAPTCHA per verificare le richieste.

    Per attivare la verifica reCAPTCHA in Xcode:

    1. Apri la configurazione del progetto: fai doppio clic sul nome del progetto nella visualizzazione 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 schema URL scheme. Puoi trovare l'ID app codificato nella pagina Impostazioni generali della console Firebase, nella sezione relativa alla tua app per iOS. Lascia vuoti gli altri campi.

      Al termine, la configurazione dovrebbe essere simile alla seguente (ma con i valori specifici dell'applicazione):

      Screenshot dell&#39;interfaccia di configurazione dello schema URL personalizzato di Xcode
  4. Facoltativo: Firebase utilizza lo swizzling dei metodi per ottenere automaticamente il token APN della tua app, per gestire le notifiche push silenziose che Firebase invia alla tua app e per intercettare automaticamente il reindirizzamento dello schema personalizzato dalla pagina di verifica reCAPTCHA durante la verifica.

    Se preferisci non utilizzare lo swizzling, consulta l'Appendice: Utilizzare l'accesso telefonico senza swizzling nella documentazione di autenticazione dell'SDK Firebase.

Accedi

Per avviare il flusso di accesso FirebaseUI, inizializza 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 che utilizzi 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 dei 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, recupera un'istanza di AuthViewController da FUIAuth. Puoi quindi presentarla come primo controller di visualizzazione della tua app o da un altro controller di visualizzazione nella tua app.

Swift

Per ottenere il selettore del metodo di accesso:

let authViewController = authUI.authViewController()

Se utilizzi solo l'accesso con il numero di telefono, puoi visualizzare direttamente la visualizzazione di accesso con il numero di telefono:

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 utilizzi solo l'accesso con il numero di telefono, puoi visualizzare direttamente la visualizzazione di accesso con il numero di telefono:

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

Dopo aver presentato la visualizzazione 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 e da tutti i provider di identità social:

Swift

authUI.signOut()

Objective-C

[authUI signOut];

Personalizzazione

Puoi personalizzare le schermate di accesso creando sottoclassi dei controller di visualizzazione di FirebaseUI e specificandoli nei metodi delegati 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, a cui è collegato nella schermata di creazione dell'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 mostrate agli utenti specificando 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 maggiori informazioni sull'utilizzo e la personalizzazione di FirebaseUI, consulta il README file su GitHub.
  • Se riscontri un problema in FirebaseUI e vuoi segnalarlo, utilizza il tracker dei problemi di GitHub.