FirebaseUI è una libreria basata su Firebase Authentication SDK che fornisce flussi dell'interfaccia utente da utilizzare nella tua app. FirebaseUI offre i seguenti vantaggi:
- Più provider : flussi di accesso per e-mail / password, collegamento e-mail, autenticazione del telefono, accesso con Google, accesso a Facebook e accesso a Twitter.
- Gestione account : flussi per gestire le attività di gestione dell'account, come la creazione di account e la reimpostazione della password.
- Account anonimo collega: i flussi di collegare automaticamente gli account anonimi di provider di identità.
- Personalizzabile : personalizza l'aspetto di FirebaseUI per adattarlo 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
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'Se non hai ancora collegato la tua app al tuo progetto Firebase, fallo dalla console Firebase .
Configura metodi di accesso
Prima di poter utilizzare Firebase per accedere agli 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 posta elettronica e password.
Autenticazione tramite collegamento e-mail
Nella console Firebase , apri la sezione Autenticazione . Nella scheda Metodo di accesso , abilita 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.
Nella stessa sezione, abilita il metodo di accesso al collegamento e-mail (accesso senza password) e fai clic su Salva .
È possibile attivare collegamento e-mail Accedi inizializzando un
FUIEmailAuthun'istanza conFIREmailLinkAuthSignInMethod. Sarà inoltre necessario fornire un oggettoFIRActionCodeSettingsvalido conhandleCodeInAppimpostato 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)
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];
Inoltre, è necessario inserire nella whitelist l'URL passato all'inizializzatore. Puoi farlo nella console Firebase , apri la sezione Autenticazione . Nella scheda Metodo di accesso , aggiungi l'URL in Domini autorizzati .
Una volta individuato il link diretto, dovrai passarlo all'interfaccia utente di autenticazione in modo che possa essere gestito.
Swift
FUIAuth.defaultAuthUI()!.handleOpen(url, sourceApplication: sourceApplication)
Obiettivo-C
[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
- L'accesso tramite collegamento e-mail in FirebaseUI-iOS è compatibile con FirebaseUI-Android e FirebaseUI-web dove 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
Segui le sezioni Prima di iniziare e Rispetta i requisiti per i dati anonimi di Apple nella guida Accedi con Apple di Firebase.
Aggiungi la funzionalità Accedi con Apple al file dei diritti.
Inizializza un'istanza del provider OAuth configurata per Accedi con Apple:
Swift
provider = FUIOAuth.appleAuthProvider()
Obiettivo-C
FUIOAuth *provider = [FUIOAuth appleAuthProvider];
Nella console Firebase , apri la sezione Autenticazione e abilita Google Sign-in.
Aggiungi il tuo ID client invertito come schema URL nel tuo progetto Xcode. Puoi trovare questo valore nel file
GoogleService-Info.plist.
Configura l'SDK di accesso a Facebook seguendo la pagina iniziale di Facebook .
Nella console Firebase , apri la sezione Autenticazione e abilita Facebook. Per abilitare l'accesso a Facebook, devi fornire il tuo ID app Facebook e il segreto dell'app, che puoi ottenere nella console degli sviluppatori di Facebook.
Abilita la condivisione del portachiavi nel tuo progetto Xcode dalla schermata Impostazioni progetto> Funzionalità .
Aggiungi
fb FACEBOOK_APP_IDcome schema URL nel tuo progetto Xcode.Aggiungi il tuo ID app Facebook e il nome visualizzato al file
Info.plist:Chiave Valore FacebookAppID FACEBOOK_APP_ID(ad esempio,1234567890)FacebookDisplayName Il nome della tua app
Nella console Firebase , apri la sezione Autenticazione e abilita Twitter. Per abilitare l'accesso a Twitter, è necessario fornire la chiave utente e il segreto dell'API Twitter, che è possibile ottenere nella console di gestione delle applicazioni Twitter.
Inizializza un'istanza del provider OAuth configurata per l'accesso a Twitter:
Swift
provider = FUIOAuth.twitterAuthProvider()
Obiettivo-C
FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
Numero di telefono
Nella console Firebase , apri la sezione Autenticazione e abilita l'accesso tramite numero di telefono.
Firebase deve essere in grado di verificare che le richieste di accesso al numero di telefono provengano dalla tua app. Uno dei modi in cui ciò viene ottenuto è tramite le notifiche APN. Vedi Abilitare la verifica dell'app per i dettagli.
Per abilitare le notifiche degli APN da utilizzare con Firebase Authentication:
In Xcode, abilita le notifiche push per il tuo progetto.
Carica la tua chiave di autenticazione APN su Firebase. Se non si dispone già di una chiave di autenticazione APN, vedere Configurazione di APN con FCM .
All'interno del progetto nella console Firebase, seleziona l'icona a forma di ingranaggio, seleziona Impostazioni progetto , quindi seleziona la scheda Messaggistica cloud .
Nella chiave di autenticazione APN nella configurazione dell'app iOS , fai clic sul pulsante Carica .
Individua la posizione in cui hai salvato la chiave, selezionala e fai clic su Apri . Aggiungi l'ID della chiave (disponibile in Certificati, identificatori e profili nell'Apple Developer Member Center ) e fai clic su Carica .
Se hai già un certificato APN, puoi invece caricare il certificato.
Quando le notifiche APN non possono essere ricevute 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 Google Sign-in), fallo nel tuo progetto Xcode. Puoi trovare questo valore nel file
GoogleService-Info.plist.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 swizzling, consulta l' Appendice: utilizzo dell'accesso tramite telefono senza swizzling nei documenti di autenticazione dell'SDK di Firebase.
registrati
Per avviare il flusso di accesso FirebaseUI, inizializza prima FirebaseUI:
Swift
import FirebaseUI
/* ... */
FirebaseApp.configure()
let authUI = FUIAuth.defaultAuthUI()
// You need to adopt a FUIAuthDelegate protocol to receive callback
authUI.delegate = self
Obiettivo-C
@import FirebaseUI;
...
[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 desideri supportare:
Swift
import FirebaseUI
let providers: [FUIAuthProvider] = [
FUIGoogleAuth(),
FUIFacebookAuth(),
FUITwitterAuth(),
FUIPhoneAuth(authUI:FUIAuth.defaultAuthUI()),
]
self.authUI.providers = providers
Obiettivo-C
@import FirebaseUI;
...
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:
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
}
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.
Swift
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 di didSignInWithUser:error: FirebaseUI nel metodo didSignInWithUser:error: ::
Swift
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 convenienti per disconnettersi da Firebase Authentication e da tutti i provider di identità social:
Swift
authUI.signOut()
Obiettivo-C
[authUI signOut];
Personalizzazione
Puoi personalizzare le schermate di accesso sottoclassando i 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)
}
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 dei termini di servizio della tua app, che è collegato nella schermata di creazione dell'account:
Swift
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 le richieste mostrati ai tuoi utenti specificando un bundle personalizzato:
Swift
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, vedere il file README su GitHub.
- Se trovi un problema in FirebaseUI e desideri segnalarlo, utilizza il tracker dei problemi di GitHub .