Ajoutez facilement une connexion à votre application iOS avec FirebaseUI

FirebaseUI est une bibliothèque basée sur le SDK Firebase Authentication qui fournit des flux d'interface utilisateur prêts à l'emploi pour votre application. Elle présente les avantages suivants :

  • Plusieurs fournisseurs : flux de connexion pour l'adresse e-mail/le mot de passe, le lien par e-mail, l'authentification par téléphone , Google Sign-In, la connexion Facebook et la connexion Twitter.
  • Gestion des comptes : flux permettant de gérer les tâches de gestion des comptes, telles que la création de comptes et la réinitialisation des mots de passe.
  • Association de comptes anonymes : flux permettant d'associer automatiquement des comptes anonymes à des fournisseurs d'identité.
  • Personnalisation : personnalisez l'apparence de FirebaseUI pour qu'elle corresponde à votre application. De plus, comme FirebaseUI est Open Source, vous pouvez créer un fork 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 Firebase console.

Configurer des 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 Authentication (Authentification) et activez l'authentification par adresse e-mail et mot de passe.

  1. Dans la Firebase console, ouvrez la section Authentication (Authentification). Dans l'onglet Sign in method (Méthode de connexion), activez le fournisseur Email/Password (Adresse e-mail/Mot de passe). Notez que la connexion par adresse e-mail ou 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 Email link (passwordless sign-in) (Lien par e-mail (connexion sans mot de passe)), puis cliquez sur Save (Enregistrer).

  3. Vous pouvez activer la connexion par lien 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];
    
  4. Vous devez également mettre sur liste blanche l'URL que vous transmettez à l'initialiseur. Pour ce faire, ouvrez la section Authentication (Authentification) dans la console Firebase. Dans l'onglet Sign in method (Méthode de connexion), ajoutez l'URL sous Authorized domains (Domaines autorisés).

  5. Une fois le lien profond intercepté, vous devez le transmettre à l'interface utilisateur d'authentification pour qu'il puisse être géré.

    Swift

    FUIAuth.defaultAuthUI()!.handleOpen(url, sourceApplication: sourceApplication)
    

    Objective-C

    [[FUIAuth defaultAuthUI] handleOpenURL:url sourceApplication:sourceApplication];
    
  6. La connexion par lien e-mail dans FirebaseUI-iOS est compatible avec FirebaseUI-Android et FirebaseUI-web . Un utilisateur qui lance le flux à partir de FirebaseUI-Android peut ouvrir le lien et terminer la connexion avec FirebaseUI-web. Il en va de même pour le flux inverse.

Apple

  1. Suivez les sections Avant de commencer et Conformité avec les exigences de données anonymes d'Apple requirements du guide Firebase Connexion avec Apple.

  2. Ajoutez la fonctionnalité Connexion avec Apple à votre fichier d'autorisations.

  3. Initialisez une instance de fournisseur OAuth configurée pour la connexion avec Apple :

    Swift

    provider = FUIOAuth.appleAuthProvider()

    Objective-C

    FUIOAuth *provider = [FUIOAuth appleAuthProvider];

Google

  1. Configurez la connexion Google à l'aide de ce tutoriel.

Facebook

  1. Configurez le SDK Facebook Login en suivant la page Premiers pas de Facebook.

  2. Dans la Firebase console, ouvrez la section Authentication (Authentification) et activez Facebook. Pour activer la connexion Facebook, vous devez fournir l'ID et le secret de votre application Facebook, que vous pouvez obtenir dans la console Facebook pour les développeurs.

  3. Activez le partage du trousseau dans votre projet Xcode à partir de l'écran Project Settings > Capabilities (Paramètres du projet > Fonctionnalités).

  4. Ajoutez fbFACEBOOK_APP_ID en tant que schéma d'URL dans votre projet Xcode.

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

    Clé Valeur
    FacebookAppID FACEBOOK_APP_ID (par exemple, 1234567890)
    FacebookDisplayName 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 la connexion Facebook Limited, définissez la propriété useLimitedLogin sur l'instance FUIFacebookAuth.

    Swift

    provider.useLimitedLogin = true

    Objective-C

    provider.useLimitedLogin = YES;

Twitter

  1. Dans la Firebase console, ouvrez la section Authentication (Authentification) et activez Twitter. Pour activer la connexion Twitter, vous devez fournir la clé client et le secret de l'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 :

    Swift

    provider = FUIOAuth.twitterAuthProvider()

    Objective-C

    FUIOAuth *provider = [FUIOAuth twitterAuthProvider];

Numéro de téléphone

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

  2. Firebase doit pouvoir vérifier que les requêtes de connexion par numéro de téléphone proviennent de votre application. Pour ce faire, il utilise notamment les notifications APN. Pour en savoir plus, consultez Activer la validation des applications.

    Pour activer les notifications APN pour une utilisation avec Firebase Authentication, procédez comme suit :

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

    2. Importez votre clé d'authentification APN dans Firebase. Si vous n'en avez pas encore, veillez à en créer une dans le Apple Developer Member Center.

      1. Dans la console Firebase, accédez à Settings > General (Paramètres > Général). Cliquez ensuite sur l'onglet Cloud Messaging.
      2. Sous APNs authentication key (Clé d'authentification APN) dans iOS app configuration (Configuration de l'application iOS), cliquez sur Upload (Importer) pour importer votre clé d'authentification de développement, ou votre clé d'authentification de production, ou les deux. Vous devez en importer au moins une.
      3. Accédez à l'emplacement où vous avez enregistré votre clé, sélectionnez-la, puis cliquez Open. Ajoutez l'ID de la clé (disponible dans le Apple Developer Member Center) , puis cliquez sur Upload (Importer).

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

  3. Lorsque les notifications APN ne peuvent pas être reçues sur un appareil, Firebase utilise reCAPTCHA pour valider les requêtes.

    Pour activer la validation reCAPTCHA dans Xcode, procédez comme suit :

    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 TARGETS, puis sélectionnez l'onglet Info et développez la section URL Types.
    2. Cliquez sur le bouton +, puis ajoutez l'ID de votre application encodé en tant que schéma d'URL. Vous trouverez l'ID de votre application encodé 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 la configuration terminée, elle doit ressembler à ceci (mais avec les valeurs spécifiques à 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 remplacement de méthode pour obtenir automatiquement le jeton APN de votre application, gérer les notifications push silencieuses que Firebase envoie à votre application et 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 remplacement, consultez l'annexe Utiliser la connexion par téléphone sans remplacement 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 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, obtenez une instance de AuthViewController à partir de FUIAuth. Vous pouvez ensuite la présenter comme premier contrôleur de vue de votre application ou à 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 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)

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 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 la vue d'authentification présentée et l'utilisateur connecté, le résultat est renvoyé au délégué d'authentification FirebaseUI 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 se déconnecter de Firebase Authentication, ainsi que de tous les fournisseurs d'identité sociale :

Swift

authUI.signOut()

Objective-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 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, qui est liée à l'é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 affichés à vos utilisateurs en spécifiant un bundle personnalisé :

Swift

authUI.customStringsBundle = NSBundle.mainBundle() // Or any custom bundle.

Objective-C

authUI.customStringsBundle = [NSBundle mainBundle]; // Or any custom bundle.

Étapes suivantes