FirebaseUI est une bibliothèque en plus du SDK Firebase Authentication qui fournit des flux d'interface utilisateur prêts à l'emploi dans votre application. FirebaseUI offre les avantages suivants:
- Plusieurs fournisseurs: procédures de connexion pour l'adresse e-mail/mot de passe, le lien de l'adresse e-mail et le numéro de téléphone Google Sign-In, Facebook et Twitter.
- Gestion des comptes: flux permettant de gérer les tâches de gestion des comptes, telles que la création de compte et la réinitialisation de mots de passe.
- Association de comptes anonymes: procédure permettant d'associer automatiquement des comptes anonymes aux fournisseurs d'identité.
- Personnalisable: personnalisez l'apparence de FirebaseUI pour l'adapter à votre application. Par ailleurs, Comme FirebaseUI est Open Source, vous pouvez dupliquer le projet et le personnaliser exactement à vos besoins.
Avant de commencer
Ajoutez FirebaseUI à votre Podfile:
pod 'FirebaseUI'Si vous préférez, vous pouvez n'ajouter que le composant Auth et les fournisseurs souhaitez utiliser:
pod 'FirebaseUI/Auth' pod 'FirebaseUI/Google' pod 'FirebaseUI/Facebook' pod 'FirebaseUI/OAuth' # Used for Sign in with Apple, Twitter, etc pod 'FirebaseUI/Phone'Si vous n'avez pas encore associé votre application à votre projet Firebase, faites-le depuis la console Firebase.
Configurer des méthodes de connexion
Avant de pouvoir connecter des utilisateurs à l'aide de Firebase, vous devez activer et configurer le méthodes de connexion que vous souhaitez prendre en charge.
Adresse e-mail et mot de passe
Dans la console Firebase, ouvrez la section Authentication (Authentification) et activez l'authentification par e-mail et par mot de passe.
Authentification par lien d'e-mail
Dans la console Firebase, ouvrez la section Authentification. Le l'onglet Mode de connexion, activez le fournisseur Adresse e-mail/Mot de passe. Remarque la connexion par e-mail ou mot de passe doit être activée pour pouvoir utiliser la connexion par lien par e-mail.
Dans la même section, activez la connexion Lien envoyé par e-mail (connexion sans mot de passe). , puis cliquez sur Save (Enregistrer).
Vous pouvez activer la connexion par lien d'e-mail en initialisant un
FUIEmailAuthavecFIREmailLinkAuthSignInMethod. Vous devrez également fournir Un objetFIRActionCodeSettingsvalide avechandleCodeInAppdéfini sur "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];
De plus, vous devez ajouter à la liste blanche l'URL que vous transmettez à l'outil d'initialisation. Pour ce faire, ouvrez la section Authentication (Authentification) dans la console Firebase. Dans l'onglet Méthode de connexion, ajoutez l'URL sous Domaines autorisés :
Une fois que vous avez repéré le lien profond, vous devez le transmettre à l'UI d'authentification peuvent être gérées.
Swift
FUIAuth.defaultAuthUI()!.handleOpen(url, sourceApplication: sourceApplication)
Objective-C
[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
- Dans FirebaseUI-iOS, la connexion par lien par e-mail est compatible avec Interface utilisateur Firebase (Android) et Interface utilisateur Firebase-Web Un utilisateur qui lance le flux depuis FirebaseUI-Android peut ouvrir le lien et connectez-vous avec FirebaseUI-web. Il en va de même pour l'inverse le flux de travail.
Apple
Suivez les instructions Avant de commencer et Se conformer aux données anonymisées d'Apple exigences consultez le guide Firebase Se connecter avec Apple.
Ajoutez la fonctionnalité Se connecter avec Apple à votre fichier d'autorisations.
Initialisez une instance de fournisseur OAuth configurée pour Se connecter avec Apple:
Swift
provider = FUIOAuth.appleAuthProvider()
Objective-C
FUIOAuth *provider = [FUIOAuth appleAuthProvider];
- Configurez la connexion Google à l'aide de ce tutoriel.
Configurez le SDK de connexion Facebook en suivant Page de démarrage de Facebook
Dans la console Firebase, ouvrez la section Authentification et activez l'option Facebook Pour activer la connexion Facebook, vous devez fournir votre ID d'application et votre secret d'application Facebook, que vous pouvez obtenir dans la console des développeurs Facebook.
Activez le partage de trousseau dans votre projet Xcode depuis Paramètres du projet > Capacités.
Ajoutez
fbFACEBOOK_APP_IDcomme schéma d'URL dans votre projet Xcode.Ajoutez l'ID de l'application Facebook et le nom à afficher au fichier
Info.plist:Clé Valeur ID d'application Facebook FACEBOOK_APP_ID(par exemple,1234567890)Nom d'affichage Facebook Nom de votre application Initialisez une instance de fournisseur Facebook:
Swift
provider = FUIFacebookAuth(authUI: FUIAuth.defaultAuthUI())
Objective-C
FUIFacebookAuth *provider = [[FUIFacebookAuth alloc] initWithAuthUI:[FUIAuth defaultAuthUI]];
Si vous souhaitez utiliser la connexion Facebook Limited, définissez la propriété
useLimitedLoginsur l'instanceFUIFacebookAuth.Swift
provider.useLimitedLogin = true
Objective-C
provider.useLimitedLogin = YES;
Dans la console Firebase, ouvrez la section Authentification et activez l'option Twitter Pour activer la connexion Twitter, vous devez fournir votre API Twitter client, que vous pouvez obtenir dans l'application Twitter de la console de gestion Google Cloud.
Initialisez une instance de fournisseur OAuth configurée pour la connexion à Twitter:
Swift
provider = FUIOAuth.twitterAuthProvider()
Objective-C
FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
Numéro de téléphone
Dans la console Firebase, ouvrez la section Authentification et activez l'option connexion via un numéro de téléphone.
Firebase doit pouvoir vérifier que les demandes de connexion par numéro de téléphone sont provenant de votre application. Le service APNs permet d'y parvenir. les notifications. Voir Activer la validation des applications pour en savoir plus.
Pour activer les notifications APNs à utiliser avec Firebase Authentication:
Dans Xcode, activez les notifications push pour votre projet.
Importez votre clé d'authentification APNs dans Firebase. Si vous ne possédez pas encore de clé d'authentification d'APN, veillez à en créer une dans le Centre des membres Apple Developer.
-
Dans votre projet dans la console Firebase, sélectionnez le l'icône en forme de roue dentée, sélectionnez Paramètres du projet, puis sélectionnez le Onglet Cloud Messaging.
-
Dans Clé d'authentification APNs sous Configuration de l'application iOS, procédez comme suit : cliquez sur le bouton Importer .
-
Accédez à l'emplacement où vous avez enregistré votre clé, sélectionnez-la, puis cliquez sur Ouvrir. Ajoutez l'ID de la clé (disponible dans le Apple Developer Member Center), puis cliquez sur Importer.
Si vous disposez déjà d'un certificat APNs, vous pouvez l'importer à la place.
-
Lorsqu'il est impossible de recevoir des notifications APN sur un appareil, Firebase utilise reCAPTCHA pour valider les requêtes.
Pour activer la validation reCAPTCHA, procédez comme suit dans Xcode :
- Ouvrez la configuration de votre projet : double-cliquez sur le nom du projet dans l'arborescence de gauche. Sélectionnez votre application dans la section CIBLES, puis Sélectionnez l'onglet Infos, puis développez la section Types d'URL.
- Cliquez sur le bouton +, puis ajoutez votre ID d'application encodé en tant qu'URL.
d'un schéma. Vous trouverez l'ID d'application encodé dans la
Généralités
Paramètres de la console Firebase, dans la section dédiée à votre iOS
l'application. Laissez les autres champs vides.
Une fois l'opération terminée, votre configuration doit ressembler à l'exemple (mais avec les valeurs propres à votre application):
Facultatif: Firebase utilise la méthode swizzling pour obtenir automatiquement votre le jeton APNs de l'application, pour gérer les notifications push silencieuses envoyées par Firebase envoie à votre application et intercepte automatiquement la redirection du schéma personnalisé sur la page de validation reCAPTCHA.
Si vous préférez ne pas utiliser le swizzling, consultez l'Annexe: Utiliser la connexion par téléphone sans swizzling. dans la documentation sur l'authentification du SDK Firebase.
Se connecter
Pour lancer le flux de connexion FirebaseUI, commencez par initialiser 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;
Ensuite, configurez FirebaseUI pour utiliser les méthodes de connexion que vous souhaitez prendre en charge :
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;
Si vous avez activé la connexion Google ou Facebook, implémentez un gestionnaire pour le résultat des flux d'inscription Google et 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];
}
Enfin, récupérez une instance de AuthViewController à partir de FUIAuth. Vous pouvez ensuite
présentez-le comme premier contrôleur de vue de votre application
un autre contrôleur de vue
dans votre application.
Swift
Pour obtenir le sélecteur de méthode de connexion :
let authViewController = authUI.authViewController()
Si vous n'utilisez que la connexion par numéro de téléphone, vous pouvez afficher le numéro de téléphone directement depuis la page de connexion:
let phoneProvider = FUIAuth.defaultAuthUI().providers.first as! FUIPhoneAuth
phoneProvider.signIn(withPresenting: currentlyVisibleController, phoneNumber: nil)
Objective-C
Pour obtenir le sélecteur de méthode de connexion:
UINavigationController *authViewController = [authUI authViewController];
Si vous n'utilisez que la connexion par numéro de téléphone, vous pouvez afficher le numéro de téléphone directement depuis la page de connexion:
FUIPhoneAuth *phoneProvider = [FUIAuth defaultAuthUI].providers.firstObject;
[phoneProvider signInWithPresentingViewController:currentlyVisibleController phoneNumber:nil];
Une fois la vue d'authentification présentée et l'utilisateur connecté, le résultat est
renvoyé au délégué d'authentification FirebaseUI dans didSignInWithUser:error:
méthode:
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.
}
Se déconnecter
FirebaseUI fournit des méthodes pratiques pour se déconnecter de Firebase Authentication ainsi que tous les fournisseurs d'identité de réseau social:
Swift
authUI.signOut()
Objective-C
[authUI signOut];
Personnalisation
Vous pouvez personnaliser les écrans de connexion en sous-classant la vue de FirebaseUI
contrôleurs et en les spécifiant dans les méthodes déléguées de 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];
}
Vous pouvez personnaliser l'URL des conditions d'utilisation de votre application, accessible via un lien écran de création de compte:
Swift
let kFirebaseTermsOfService = URL(string: "https://example.com/terms")!
authUI.tosurl = kFirebaseTermsOfService
Objective-C
authUI.TOSURL = [NSURL URLWithString:@"https://example.com/terms"];
Enfin, vous pouvez personnaliser les messages et les invites présentés à vos utilisateurs en spécifiant un lot personnalisé :
Swift
authUI.customStringsBundle = NSBundle.mainBundle() // Or any custom bundle.
Objective-C
authUI.customStringsBundle = [NSBundle mainBundle]; // Or any custom bundle.
Étapes suivantes
- Pour en savoir plus sur l'utilisation et la personnalisation de FirebaseUI, consultez le fichier README sur GitHub.
- Si vous rencontrez un problème dans FirebaseUI et que vous souhaitez le signaler, utilisez l'outil de suivi des problèmes de GitHub.