Catch up on everything we announced at this year's Firebase Summit. Learn more

Ajoutez facilement la connexion à votre application iOS avec FirebaseUI

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

  1. Ajouter Firebase à votre projet d' Apple .

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

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

  2. Dans la même section, activer la connexion méthode lien e - mail (connexion passwordless) et cliquez sur Enregistrer.

  3. Vous pouvez activer la connexion de lien e - mail dans un en initialisant FUIEmailAuth exemple avec FIREmailLinkAuthSignInMethod . Vous devrez également fournir un valide FIRActionCodeSettings objet avec handleCodeInApp valeur 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'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.

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

  1. Suivez l'Avant de commencer et se conformer aux exigences d' Apple données anonymisées sections du Firebase Connectez - vous avec Apple guide.

  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 d'authentification et activer Google Sign-in.

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

Facebook

  1. Mettre en place le SDK Facebook Connectez - vous en suivant obtenir la page Facebook a commencé .

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

  3. Activer le partage trousseau dans votre projet Xcode dans les paramètres du projet> écran Capacités.

  4. Ajouter fb FACEBOOK_APP_ID comme schéma d'URL dans votre projet Xcode.

  5. Ajoutez votre nom Facebook App ID et l' affichage à l' Info.plist fichier:

    Clé Valeur
    FacebookAppID FACEBOOK_APP_ID (par exemple, 1234567890 )
    Nom d'affichage Facebook Le nom de votre application
  6. Initialisez une instance de fournisseur Facebook :

    Rapide

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

    Objectif c

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

  7. Si vous voulez utiliser Facebook limitée Connectez - useLimitedLogin FUIFacebookAuth vous , définissez la useLimitedLogin propriété sur le FUIFacebookAuth exemple.

    Rapide

    provider.useLimitedLogin = true
    

    Objectif c

    provider.useLimitedLogin = YES;
    

Twitter

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

  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 d'authentification et activer la connexion 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 l' application de vérification pour plus de détails.

    Pour activer les notifications APN à utiliser avec Firebase Authentication :

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

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

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

      2. Dans clé d'authentification APNs sous la configuration iOS app, cliquez sur le bouton Ajouter.

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

  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, 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.plist fichier.

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