Ajoutez facilement une connexion à votre application iOS avec FirebaseUI

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 de compte : flux permettant de gérer les tâches de gestion de compte, telles que la création de compte et la réinitialisation de mot de passe.
  • Association de comptes anonymes : flux permettant d'associer automatiquement des comptes anonymes à des fournisseurs d'identité.
  • Personnalisable : personnalisez l'apparence de FirebaseUI pour qu'elle corresponde à votre application. De plus, comme FirebaseUI est open source, vous pouvez créer une fourchette du projet et le personnaliser exactement selon vos besoins.

Avant de commencer

  1. Ajoutez Firebase à votre projet Apple.

  2. Ajoutez FirebaseUI à votre Podfile :

    pod 'FirebaseUI'

    Si vous préférez, vous pouvez n'ajouter que 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 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.

  1. Dans la console Firebase, ouvrez la section Authentication (Authentification). Dans l'onglet Mode de connexion, activez le fournisseur Adresse e-mail/Mot de passe. Notez que la connexion par e-mail ou par mot de passe doit être activée pour utiliser la connexion par lien d'e-mail.

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

  3. Vous pouvez activer la connexion via un lien d'e-mail en initialisant une instance FUIEmailAuth avec FIREmailLinkAuthSignInMethod. Vous devrez également fournir Un objet FIRActionCodeSettings valide avec handleCodeInApp défini sur "true".

Swift

var actionCodeSettings = ActionCodeSettings()
actionCodeSettings.url = URL(string: "https://example.firebasestorage.app")
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.firebasestorage.app"];
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. Vous devez également ajouter l'URL que vous transmettez à l'initialiseur à la liste blanche. 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.

  2. 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];
  1. 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 le flux inverse.

Apple

  1. Suivez les sections Avant de commencer et Conformez-vous aux exigences d'Apple concernant les données anonymisées du guide Firebase Se connecter avec Apple.

  2. Ajoutez la fonctionnalité Se connecter avec Apple à votre fichier de droits d'accès.

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

    Swift

    provider = FUIOAuth.appleAuthProvider()

    Objective-C

    FUIOAuth *provider = [FUIOAuth appleAuthProvider];

Google

  1. Configurez Google Sign-In en suivant ce tutoriel.

Facebook

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

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

  3. Activez le partage de trousseau dans votre projet Xcode depuis Paramètres du projet > Capacités.

  4. Ajoutez fbFACEBOOK_APP_ID comme schéma d'URL dans votre projet Xcode.

  5. Ajoutez votre ID d'application Facebook et votre nom à afficher au fichier Info.plist :

    Clé Valeur
    FacebookAppID FACEBOOK_APP_ID (par exemple, 1234567890)
    Nom d'affichage Facebook Nom de votre application

  6. Initialisez une instance de fournisseur Facebook:

    Swift

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

    Objective-C

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

  7. Si vous souhaitez utiliser Facebook Limited Login (Connexion limitée à Facebook) définissez la propriété useLimitedLogin sur l'instance FUIFacebookAuth.

    Swift

    provider.useLimitedLogin = true

    Objective-C

    provider.useLimitedLogin = YES;

Twitter

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

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

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

  2. Firebase doit pouvoir vérifier que les demandes de connexion par numéro de téléphone proviennent de votre application. Pour ce faire, il peut utiliser les notifications APN. Voir Activer la validation des applications pour en savoir plus.

    Pour activer les notifications APN pour une utilisation avec Firebase Authentication :

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

    2. Importez votre clé d'authentification APNs dans Firebase. Si vous ne possédez pas encore de clé d'authentification APNs, veillez à en créer une dans le Apple Developer Member Center.

      1. Dans la console Firebase, sélectionnez l'icône en forme de roue dentée, Paramètres du projet, puis l'onglet Cloud Messaging.

      2. Dans Clés d'authentification d'APN, sous Configuration de l'application iOS, cliquez sur le bouton Importer.

      3. 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 <ph type="x-smartling-placeholder"></ph> Apple Developer Member Center), puis cliquez sur Importer.

      Si vous disposez déjà d'un certificat APN, vous pouvez l'importer à la place.

  3. 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:

    1. Ouvrez la configuration de votre projet: double-cliquez sur le nom du projet dans le 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.
    2. Cliquez sur le bouton +, puis ajoutez votre ID d'application encodé en tant que schéma d'URL. 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):

      Capture d&#39;écran de l&#39;interface de configuration du schéma d&#39;URL personnalisé d&#39;Xcode

  4. Facultatif : Firebase utilise le mélange de méthodes pour obtenir automatiquement le jeton APN de votre application, pour gérer les notifications push silencieuses que Firebase envoie à votre application et pour intercepter automatiquement la redirection de schéma personnalisé à partir de la page de validation reCAPTCHA lors de la validation.

    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;

Configurez ensuite FirebaseUI pour qu'il utilise 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é Google ou Facebook Sign-In, implémentez un gestionnaire pour le résultat de les procédures 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, obtenez une instance de AuthViewController à partir 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 de 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 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: :

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 vous déconnecter de Firebase Authentication et de tous les fournisseurs d'identité sociale :

Swift

authUI.signOut()

Objective-C

[authUI signOut];

Personnalisation

Vous pouvez personnaliser les écrans de connexion en créant une sous-classe des contrôleurs de vue de FirebaseUI et en les spécifiant dans les méthodes de délégué 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 groupe 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 le Outil de suivi des problèmes GitHub.