FirebaseUI est une bibliothèque construite au - dessus du SDK d' authentification Firebase qui fournit des flux UI drop-in pour une utilisation dans votre application. FirebaseUI offre les avantages suivants :
- Fournisseurs multiples: inscription des flux pour le courrier électronique / mot de passe, lien e - mail, l' authentification de téléphone, connexion Google, Facebook Connectez - vous et Twitter Connectez - vous.
- Gestion des comptes: flux pour gérer les tâches de gestion de compte, tels que la création de compte et remet à zéro le mot de passe.
- Compte anonyme reliant: flux de lier automatiquement les comptes anonymes aux fournisseurs d'identité.
- Personnalisable: personnaliser l'apparence de FirebaseUI pour correspondre à votre application. De plus, comme FirebaseUI est open source, vous pouvez bifurquer le projet et le personnaliser exactement selon vos besoins.
Avant que tu commences
Ajoutez FirebaseUI à votre fichier Podfile :
pod 'FirebaseUI'Si vous préférez, vous pouvez ajouter uniquement le composant Auth et les fournisseurs que vous 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'êtes pas encore connecté votre application à votre projet Firebase, faites à partir de la console Firebase .
Configurer des méthodes de connexion
Avant de pouvoir utiliser Firebase pour connecter les utilisateurs, vous devez activer et configurer les méthodes de connexion que vous souhaitez prendre en charge.
Adresse e-mail et mot de passe
Dans la console Firebase , ouvrez la section d'authentification et activer l' authentification par e - mail et mot de passe.
Authentification par lien de messagerie
Dans la console Firebase , ouvrez la section d' authentification. Sur l'onglet Connexion méthode, activez le fournisseur Email / mot de passe. Notez que la connexion par e-mail/mot de passe doit être activée pour utiliser la connexion par lien de messagerie.
Dans la même section, activer la connexion méthode lien e - mail (connexion passwordless) et cliquez sur Enregistrer.
Vous pouvez activer la connexion de lien e - mail dans un en initialisant
FUIEmailAuthexemple avecFIREmailLinkAuthSignInMethod. Vous devrez également fournir un valideFIRActionCodeSettingsobjet avechandleCodeInAppvaleur true.
Rapide
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)
Objectif 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'initiateur. Vous pouvez le faire dans la console Firebase , ouvrez la section d' authentification. Sur l'onglet Connexion méthode, ajoutez l'URL dans les domaines autorisés.
Une fois que vous avez capturé le lien profond, vous devrez le transmettre à l'interface utilisateur d'authentification afin qu'il puisse être géré.
Rapide
FUIAuth.defaultAuthUI()!.handleOpen(url, sourceApplication: sourceApplication)
Objectif c
[[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
- Lien e - mail de connexion dans FirebaseUI-iOS est compatible avec FirebaseUI Android et FirebaseUI Web où un utilisateur à partir du flux de FirebaseUI Android peut ouvrir le lien et complet de connexion avec FirebaseUI Web. Il en est de même pour le flux inverse.
Pomme
Suivez l'Avant de commencer et se conformer aux exigences d' Apple données anonymisées sections du Firebase Connectez - vous avec Apple guide.
Ajoutez la fonctionnalité Se connecter avec Apple à votre fichier de droits.
Initialisez une instance de fournisseur OAuth configurée pour Se connecter avec Apple :
Rapide
provider = FUIOAuth.appleAuthProvider()
Objectif c
FUIOAuth *provider = [FUIOAuth appleAuthProvider];
Dans la console Firebase , ouvrez la section d'authentification et activer Google Sign-in.
Ajoutez votre ID client inversé en tant que schéma d'URL dans votre projet Xcode. Vous pouvez trouver cette valeur dans le
GoogleService-Info.plistfichier.
Mettre en place le SDK Facebook Connectez - vous en suivant obtenir la page Facebook a commencé .
Dans la console Firebase , ouvrez la section d'authentification et activer Facebook. Pour activer la connexion Facebook, vous devez fournir votre identifiant d'application Facebook et votre secret d'application, que vous pouvez obtenir dans la console des développeurs Facebook.
Activer le partage trousseau dans votre projet Xcode dans les paramètres du projet> écran Capacités.
Ajouter
fb FACEBOOK_APP_IDcomme schéma d'URL dans votre projet Xcode.Ajoutez votre nom Facebook App ID et l' affichage à l'
Info.plistfichier:Clé Valeur FacebookAppID FACEBOOK_APP_ID(par exemple,1234567890)Nom d'affichage Facebook Le nom de votre application Initialisez une instance de fournisseur Facebook :
Rapide
provider = FUIFacebookAuth(authUI: FUIAuth.defaultAuthUI())
Objectif c
FUIFacebookAuth *provider = [[FUIFacebookAuth alloc] initWithAuthUI:[FUIAuth defaultAuthUI]];
Si vous voulez utiliser Facebook limitée Connectez -
useLimitedLoginFUIFacebookAuthvous , définissez lauseLimitedLoginpropriété sur leFUIFacebookAuthexemple.Rapide
provider.useLimitedLogin = true
Objectif c
provider.useLimitedLogin = YES;
Dans la console Firebase , ouvrez la section d'authentification et activer Twitter. Pour activer la connexion Twitter, vous devez fournir votre clé client et votre secret API Twitter, que vous pouvez obtenir dans la console de gestion des applications Twitter.
Initialisez une instance de fournisseur OAuth configurée pour la connexion Twitter :
Rapide
provider = FUIOAuth.twitterAuthProvider()
Objectif c
FUIOAuth *provider = [FUIOAuth twitterAuthProvider];
Numéro de téléphone
Dans la console Firebase , ouvrez la section d'authentification et activer la connexion numéro de téléphone.
Firebase doit être en mesure de vérifier que les demandes de connexion par numéro de téléphone proviennent de votre application. L'une des façons d'y parvenir consiste à utiliser les notifications APN. Voir Activer l' application de vérification pour plus de détails.
Pour activer les notifications APN à utiliser avec Firebase Authentication :
Dans Xcode, activer les notifications push pour votre projet.
Téléchargez votre clé d'authentification APNs sur Firebase. Si vous ne possédez pas déjà une clé d'authentification APNs, assurez - vous de créer un dans le Apple Developer Member Center .
A l' intérieur de votre projet dans la console Firebase, sélectionnez l'icône d'engrenage, sélectionnez Paramètres du projet, puis sélectionnez l'onglet Nuage de messagerie.
Dans clé d'authentification APNs sous la configuration iOS app, cliquez sur le bouton Ajouter.
Accédez à l'emplacement où vous avez enregistré votre clé, sélectionnez - le et cliquez sur Ouvrir. Ajoutez l'ID de la touche (disponible dans le membre Apple Developer Centre ) et cliquez sur Télécharger.
Si vous disposez déjà d'un certificat APNs, vous pouvez le télécharger à la place.
Lorsque les notifications APN ne peuvent pas être reçues sur un appareil, Firebase utilise reCAPTCHA pour vérifier les demandes.
Pour activer la vérification reCAPTCHA, si vous n'avez pas encore ajouté votre ID client inversé en tant que schéma d'URL (par exemple, pour activer Google Sign-in), faites-le dans votre projet Xcode. Vous pouvez trouver cette valeur dans le
GoogleService-Info.plistfichier.En option: Firebase utilise la méthode swizzling pour obtenir automatiquement jeton de APNs de votre application, gérer les notifications push silencieux qui Firebase envoie à votre application, et automatiquement intercepter le système personnalisé de la redirection page de vérification reCAPTCHA lors de la vérification.
Si vous préférez ne pas utiliser swizzling, voir Annexe: Utilisation de connexion téléphone sans swizzling dans l' authentification Firebase SDK docs.
S'identifier
Pour lancer le flux de connexion FirebaseUI, commencez par initialiser FirebaseUI :
Rapide
import FirebaseAuthUI
/* ... */
FirebaseApp.configure()
let authUI = FUIAuth.defaultAuthUI()
// You need to adopt a FUIAuthDelegate protocol to receive callback
authUI.delegate = self
Objectif 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 :
Rapide
import FirebaseAuthUI
import FirebaseFacebookAuthUI
import FirebaseGoogleAuthUI
import FirebaseOAuthUI
import FirebasePhoneAuthUI
let providers: [FUIAuthProvider] = [
FUIGoogleAuth(),
FUIFacebookAuth(),
FUITwitterAuth(),
FUIPhoneAuth(authUI:FUIAuth.defaultAuthUI()),
]
self.authUI.providers = providers
Objectif 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 :
Rapide
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
}
Objectif c
- (BOOL)application:(UIApplication *)app
openURL:(NSURL *)url
options:(NSDictionary *)options {
NSString *sourceApplication = options[UIApplicationOpenURLOptionsSourceApplicationKey];
return [[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
}
Enfin, obtenir une instance de AuthViewController de FUIAuth . Vous pouvez ensuite le présenter comme le premier contrôleur de vue de votre application ou le présenter à partir d'un autre contrôleur de vue dans votre application.
Rapide
Pour obtenir le sélecteur de méthode de connexion :
let authViewController = authUI.authViewController()
Si vous utilisez uniquement la connexion par numéro de téléphone, vous pouvez afficher directement la vue de connexion par numéro de téléphone :
let phoneProvider = FUIAuth.defaultAuthUI().providers.first as! FUIPhoneAuth
phoneProvider.signIn(withPresenting: currentlyVisibleController, phoneNumber: nil)
Objectif c
Pour obtenir le sélecteur de méthode de connexion :
UINavigationController *authViewController = [authUI authViewController];
Si vous utilisez uniquement la connexion par numéro de téléphone, vous pouvez afficher directement la vue de connexion par numéro de téléphone :
FUIPhoneAuth *phoneProvider = [FUIAuth defaultAuthUI].providers.firstObject;
[phoneProvider signInWithPresentingViewController:currentlyVisibleController phoneNumber:nil];
Après avoir présenté le point de vue de l' authentification et les signes d' un utilisateur, le résultat est retourné au délégué FirebaseUI Auth dans le didSignInWithUser:error: méthode:
Rapide
func authUI(_ authUI: FUIAuth, didSignInWith user: FIRUser?, error: Error?) {
// handle user and error as necessary
}
Objectif 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 de tous les fournisseurs d'identité sociale :
Rapide
authUI.signOut()
Objectif c
[authUI signOut];
Personnalisation
Vous pouvez personnaliser la page de connexion des écrans par les contrôleurs de sous - classement vue de FirebaseUI et les spécifiant dans FUIAuth méthodes de délégué »:
Rapide
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)
}
Objectif 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 en fonction des conditions d'utilisation de votre application, qui sont liées à l'écran de création de compte :
Rapide
let kFirebaseTermsOfService = URL(string: "https://example.com/terms")!
authUI.tosurl = kFirebaseTermsOfService
Objectif 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 ensemble personnalisé :
Rapide
authUI.customStringsBundle = NSBundle.mainBundle() // Or any custom bundle.
Objectif c
authUI.customStringsBundle = [NSBundle mainBundle]; // Or any custom bundle.
Prochaines étapes
- Pour plus d' informations sur l' utilisation et la personnalisation FirebaseUI, consultez le README fichier sur GitHub.
- Si vous trouvez et conduire à FirebaseUI et que vous souhaitez signaler, utilisez le suivi des problèmes GitHub .