Aggiungi facilmente l'accesso alla tua app iOS con FirebaseUI

Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

FirebaseUI è una libreria basata su Firebase Authentication SDK che fornisce flussi di interfaccia utente drop-in da utilizzare nella tua app. FirebaseUI offre i seguenti vantaggi:

  • Fornitori multipli : flussi di accesso per e-mail/password, collegamento e-mail, autenticazione telefonica, accesso a Google, accesso a Facebook e accesso a Twitter.
  • Gestione dell'account : flussi per gestire le attività di gestione dell'account, come la creazione dell'account e la reimpostazione della password.
  • Collegamento di account anonimi : flussi per collegare automaticamente account anonimi a provider di identità.
  • Personalizzabile : personalizza l'aspetto di FirebaseUI in modo che corrisponda alla tua app. Inoltre, poiché FirebaseUI è open source, puoi eseguire il 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 desideri 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 la tua app al tuo progetto Firebase, fallo dalla console Firebase .

Imposta i metodi di accesso

Prima di poter utilizzare Firebase per l'accesso degli utenti, devi abilitare e configurare i metodi di accesso che desideri supportare.

Indirizzo e-mail e password

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

  1. Nella console Firebase , apri la sezione Autenticazione . Nella scheda Metodo di accesso abilitare il provider di posta elettronica/password . Tieni presente che l'accesso tramite e-mail/password deve essere abilitato per utilizzare l'accesso tramite collegamento e-mail.

  2. Nella stessa sezione, abilita il metodo di accesso tramite collegamento e-mail (accesso senza password) e fai clic su Salva .

  3. Puoi abilitare l'accesso tramite collegamento e-mail inizializzando un'istanza FUIEmailAuth con FIREmailLinkAuthSignInMethod . Sarà inoltre necessario fornire un oggetto FIRActionCodeSettings valido con handleCodeInApp impostato su true.

Rapido

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)

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

  2. Una volta individuato il deep link, dovrai passarlo all'interfaccia utente di autenticazione in modo che possa essere gestito.

Rapido

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

Obiettivo-C

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

Mela

  1. Segui le sezioni Prima di iniziare e Rispetta i requisiti dei dati anonimi di Apple nella guida Firebase Accedi con Apple .

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

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

    Rapido

    provider = FUIOAuth.appleAuthProvider()

    Obiettivo-C

    FUIOAuth *provider = [FUIOAuth appleAuthProvider];

Google

  1. Nella console di Firebase , apri la sezione Autenticazione e abilita l'accesso con Google.

  2. Aggiungi il tuo ID client invertito come schema URL nel tuo progetto Xcode. Puoi trovare questo valore nel file GoogleService-Info.plist .

Facebook

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

  2. Nella console Firebase , apri la sezione Autenticazione e abilita Facebook. Per abilitare l'accesso a Facebook, devi fornire il tuo ID app di Facebook e il segreto dell'app, che puoi ottenere nella console per sviluppatori di Facebook.

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

  4. Aggiungi fb FACEBOOK_APP_ID come schema URL nel tuo progetto Xcode.

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

    Chiave Valore
    ID app Facebook FACEBOOK_APP_ID (ad esempio, 1234567890 )
    FacebookDisplayName Il nome della tua app

  6. Inizializza un'istanza del provider di Facebook:

    Rapido

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

    Obiettivo-C

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

  7. Se desideri utilizzare Facebook Limited Login , imposta la proprietà useLimitedLogin FUIFacebookAuth .

    Rapido

    provider.useLimitedLogin = true

    Obiettivo-C

    provider.useLimitedLogin = YES;

Cinguettio

  1. Nella console Firebase , apri la sezione Autenticazione e abilita Twitter. Per abilitare l'accesso a Twitter, devi fornire la chiave utente e il segreto dell'API di Twitter, che puoi ottenere nella console di Twitter Application Management.

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

    Rapido

    provider = FUIOAuth.twitterAuthProvider()

    Obiettivo-C

    FUIOAuth *provider = [FUIOAuth twitterAuthProvider];

Numero di telefono

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

  2. Firebase deve essere in grado di verificare che le richieste di accesso tramite numero di telefono provengano dalla tua app. Uno dei modi in cui ciò viene realizzato è tramite le notifiche APN. Vedi Abilitare la verifica dell'app per i dettagli.

    Per abilitare le notifiche APN da utilizzare con Firebase Authentication:

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

    2. Carica la tua chiave di autenticazione APN su Firebase. Se non disponi già di una chiave di autenticazione APNs, assicurati di crearne una nell'Apple Developer Member Center .

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

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

      3. Passare alla posizione in cui è stata salvata la chiave, selezionarla e fare clic su Apri . Aggiungi l'ID chiave per la chiave (disponibile nell'Apple Developer Member Center ) e fai clic su Carica .

      Se disponi già di un certificato APNs, puoi invece caricare il certificato.

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

    Per abilitare la verifica reCAPTCHA, se non hai già aggiunto il tuo ID client invertito come schema URL (ad esempio, per abilitare l'accesso con Google), fallo nel tuo progetto Xcode. Puoi trovare questo valore nel file GoogleService-Info.plist .

  4. Facoltativo : Firebase utilizza il metodo swizzling 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: Utilizzo dell'accesso tramite telefono senza lo swizzling nei documenti di autenticazione dell'SDK Firebase.

Registrazione

Per avviare il flusso di accesso FirebaseUI, inizializza prima FirebaseUI:

Rapido

import FirebaseAuthUI

/* ... */

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

Obiettivo-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 per utilizzare i metodi di accesso che vuoi supportare:

Rapido

import FirebaseAuthUI
import FirebaseFacebookAuthUI
import FirebaseGoogleAuthUI
import FirebaseOAuthUI
import FirebasePhoneAuthUI

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

Obiettivo-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 abilitato l'accesso a Google o Facebook, implementa un gestore per il risultato dei flussi di iscrizione a Google e Facebook:

Rapido

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
}

Obiettivo-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 presentarlo come primo controller di visualizzazione della tua app o presentarlo da un altro controller di visualizzazione nella tua app.

Rapido

Per ottenere il selettore del metodo di accesso:

let authViewController = authUI.authViewController()

Se utilizzi solo l'accesso tramite numero di telefono, puoi invece visualizzare direttamente la vista di accesso tramite numero di telefono:

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

Obiettivo-C

Per ottenere il selettore del metodo di accesso:

UINavigationController *authViewController = [authUI authViewController];

Se utilizzi solo l'accesso tramite numero di telefono, puoi invece visualizzare direttamente la vista di accesso tramite numero di telefono:

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

Dopo aver presentato la vista di autenticazione e l'utente ha effettuato l'accesso, il risultato viene restituito al delegato FirebaseUI Auth nel metodo didSignInWithUser:error: ::

Rapido

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

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

Disconnessione

FirebaseUI fornisce metodi pratici per disconnettersi da Firebase Authentication e da tutti i provider di identità social:

Rapido

authUI.signOut()

Obiettivo-C

[authUI signOut];

Personalizzazione

Puoi personalizzare le schermate di accesso creando una sottoclasse dei controller di visualizzazione di FirebaseUI e specificandoli nei metodi delegati di FUIAuth :

Rapido

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

Obiettivo-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 in base ai termini di servizio della tua app, che è collegato nella schermata di creazione dell'account:

Rapido

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

Obiettivo-C

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

Infine, puoi personalizzare i messaggi e i prompt mostrati ai tuoi utenti specificando un pacchetto personalizzato:

Rapido

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

Obiettivo-C

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

Prossimi passi

  • Per ulteriori informazioni sull'utilizzo e la personalizzazione di FirebaseUI, consulta il file README su GitHub.
  • Se trovi un problema in FirebaseUI e desideri segnalarlo, usa GitHub issue tracker .