Ajoutez facilement une connexion à votre application iOS avec FirebaseUI

FirebaseUI est une bibliothèque construite au-dessus du SDK d'authentification Firebase qui fournit des flux d'interface utilisateur à utiliser dans votre application. FirebaseUI offre les avantages suivants :

  • Plusieurs fournisseurs : flux de connexion pour e-mail/mot de passe, lien e-mail, authentification par téléphone, connexion Google, connexion Facebook et connexion Twitter.
  • Gestion de compte : flux pour gérer les tâches de gestion de compte, telles que la création de compte et les réinitialisations de mot de passe.
  • Liaison de comptes anonymes : flux permettant de lier automatiquement des comptes anonymes à des fournisseurs d'identité.
  • Personnalisable : personnalisez l'apparence de FirebaseUI en fonction de 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

  1. Ajoutez Firebase à votre projet Apple .

  2. Ajoutez FirebaseUI à votre 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'

  3. Si vous n'avez pas encore connecté votre application à votre projet Firebase, faites-le depuis la console Firebase .

Configurer les méthodes de connexion

Avant de pouvoir utiliser Firebase pour connecter des 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 Authentification et activez l'authentification par e-mail et par mot de passe.

  1. Dans la console Firebase , ouvrez la section Authentification . Dans l'onglet Méthode de connexion , activez le fournisseur d'adresse e-mail/mot de passe . Notez que la connexion par e-mail/mot de passe doit être activée pour utiliser la connexion par lien e-mail.

  2. Dans la même section, activez la méthode de connexion par lien par e-mail (connexion sans mot de passe) et cliquez sur Enregistrer .

  3. Vous pouvez activer la connexion par lien de messagerie en initialisant une instance FUIEmailAuth avec FIREmailLinkAuthSignInMethod . Vous devrez également fournir un objet FIRActionCodeSettings valide avec handleCodeInApp défini sur 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];

  1. De plus, vous devez ajouter à la liste blanche l'URL que vous transmettez à l'initialisateur. Vous pouvez le faire dans la console Firebase , ouvrez la section Authentification . Dans l'onglet Méthode de connexion , ajoutez l'URL sous Domaines autorisés .

  2. Une fois que vous aurez saisi 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];
  1. La connexion par lien par e-mail dans FirebaseUI-iOS est compatible avec FirebaseUI-Android et FirebaseUI-web où un utilisateur démarrant le flux à partir de FirebaseUI-Android peut ouvrir le lien et terminer la connexion avec FirebaseUI-web. Il en est de même pour le flux inverse.

Pomme

  1. Suivez les sections Avant de commencer et Conformez-vous aux exigences en matière de données anonymisées d'Apple dans le guide Firebase Se connecter avec Apple .

  2. Ajoutez la fonctionnalité Se connecter avec Apple à votre fichier de droits.

  3. Initialisez une instance de fournisseur OAuth configurée pour se connecter avec Apple :

    Rapide

    provider = FUIOAuth.appleAuthProvider()

    Objectif c

    FUIOAuth *provider = [FUIOAuth appleAuthProvider];

Google

  1. Dans la console Firebase , ouvrez la section Authentification et activez Google Sign-in.

  2. Téléchargez une nouvelle copie du fichier GoogleService-Info.plist de votre projet et copiez-la dans votre projet Xcode. Remplacez toutes les versions existantes par la nouvelle. (Voir Ajouter Firebase à votre projet iOS .)

  3. Ajoutez votre ID client inversé en tant que schéma d'URL dans votre projet Xcode. Vous pouvez trouver cette valeur dans le fichier GoogleService-Info.plist .

    Facebook

  4. Configurez le SDK de connexion Facebook en suivant la page de démarrage de Facebook .

  5. Dans la console Firebase , ouvrez la section Authentification et activez 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.

  6. Activez le partage de trousseau dans votre projet Xcode à partir de l'écran Paramètres du projet > Capacités .

  7. Ajoutez fb FACEBOOK_APP_ID en tant que schéma d'URL dans votre projet Xcode.

  8. Ajoutez votre ID d'application Facebook et votre nom d'affichage au fichier Info.plist :

    Clé Valeur
    ID d'application Facebook FACEBOOK_APP_ID (par exemple, 1234567890 )
    NomAffichage Facebook Le nom de votre application

  9. Initialisez une instance de fournisseur Facebook :

    Rapide

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

    Objectif c

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

  10. Si vous souhaitez utiliser Facebook Limited Login , définissez la propriété useLimitedLogin sur l'instance FUIFacebookAuth .

    Rapide

    provider.useLimitedLogin = true

    Objectif c

    provider.useLimitedLogin = YES;

Twitter

  1. Dans la console Firebase , ouvrez la section Authentification et activez Twitter. Pour activer la connexion à Twitter, vous devez fournir votre clé client et votre secret d'API Twitter, que vous pouvez obtenir dans la console de gestion des applications Twitter.

  2. 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

  1. Dans la console Firebase , ouvrez la section Authentification et activez la connexion par numéro de téléphone.

  2. 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 la vérification des applications pour plus de détails.

    Pour activer les notifications APN à utiliser avec Firebase Authentication :

    1. Dans Xcode, activez les notifications push pour votre projet.

    2. Téléchargez votre clé d'authentification APNs sur Firebase. Si vous n'avez pas encore de clé d'authentification APNs, assurez-vous d'en créer une dans l' Apple Developer Member Center .

      1. Dans votre projet dans la console Firebase, sélectionnez l'icône d'engrenage, sélectionnez Paramètres du projet , puis sélectionnez l'onglet Cloud Messaging .

      2. Dans la clé d'authentification APNs sous la configuration de l'application iOS , cliquez sur le bouton Télécharger .

      3. Accédez à l'emplacement où vous avez enregistré votre clé, sélectionnez-la et cliquez sur Ouvrir . Ajoutez l'ID de clé pour la clé (disponible dans l' Apple Developer Member Center ) et cliquez sur Upload .

      Si vous avez déjà un certificat APNs, vous pouvez le télécharger à la place.

  3. 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, procédez comme suit dans Xcode :

    1. 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 et développez la section Types d'URL .
    2. Cliquez sur le bouton + et ajoutez votre ID d'application codé en tant que schéma d'URL. Vous pouvez trouver votre ID d'application codé sur la page Paramètres généraux de la console Firebase, dans la section de votre application iOS. Laissez les autres champs vides.

      Une fois terminée, votre configuration devrait ressembler à ce qui suit (mais avec les valeurs spécifiques à votre application) :

      Capture d'écran de l'interface de configuration du schéma d'URL personnalisé de Xcode

  4. Facultatif : Firebase utilise la méthode swizzling pour obtenir automatiquement le jeton APNs de votre application, pour gérer les notifications push silencieuses que Firebase envoie à votre application et pour intercepter automatiquement la redirection du schéma personnalisé à partir de la page de vérification reCAPTCHA pendant la vérification.

    Si vous préférez ne pas utiliser le swizzling, consultez l'annexe : Utilisation de la connexion par téléphone sans swizzling dans les documents d'authentification du SDK Firebase.

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, obtenez une instance de AuthViewController à partir de FUIAuth . Vous pouvez ensuite soit le présenter comme premier contrôleur de vue de votre application, soit le présenter à partir d'un autre contrôleur de vue de 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];

Une fois que vous avez présenté la vue d'authentification et que l'utilisateur s'est connecté, le résultat est renvoyé au délégué FirebaseUI Auth dans la méthode didSignInWithUser:error: :

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 les écrans de connexion en sous-classant les contrôleurs de vue de FirebaseUI et en les spécifiant dans les méthodes déléguées de FUIAuth :

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 des conditions d'utilisation de votre application, qui est liée sur 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 groupe 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 de FirebaseUI, consultez le fichier README sur GitHub.
  • Si vous trouvez un problème dans FirebaseUI et que vous souhaitez le signaler, utilisez le suivi des problèmes GitHub .