查看 2022 年 Google I/O 大会上介绍的 Firebase 新动态。了解详情

Cette page a été traduite par l'API Cloud Translation.

Authentification téléphonique

L'authentification par téléphone permet aux utilisateurs de se connecter à Firebase en utilisant leur téléphone comme authentificateur. Un message SMS est envoyé à l'utilisateur (en utilisant le numéro de téléphone fourni) contenant un code unique. Une fois le code autorisé, l'utilisateur peut se connecter à Firebase.

Les numéros de téléphone fournis par les utilisateurs finaux pour l'authentification seront envoyés et stockés par Google afin d'améliorer la prévention du spam et des abus dans l'ensemble des services Google, y compris, mais sans s'y limiter, Firebase. Les développeurs doivent s'assurer qu'ils disposent du consentement approprié de l'utilisateur final avant d'utiliser le service de connexion par numéro de téléphone d'authentification Firebase.authentification

L'authentification téléphonique Firebase n'est pas prise en charge dans tous les pays. Veuillez consulter leur FAQ pour plus d’informations.

Installation

Avant de commencer avec l'authentification téléphonique, assurez-vous d'avoir suivi ces étapes :

Activez le téléphone comme méthode de connexion dans la console Firebase .
Android : si vous n'avez pas déjà défini le hachage SHA-1 de votre application dans la console Firebase , faites-le. Consultez Authentification de votre client pour plus d’informations sur la recherche du hachage SHA-1 de votre application.
iOS : dans Xcode, activez les notifications push pour votre projet et assurez-vous que votre clé d'authentification APN est configurée avec Firebase Cloud Messaging (FCM) . De plus, vous devez activer les modes d'arrière-plan pour les notifications à distance. Pour afficher une explication détaillée de cette étape, consultez la documentation Firebase iOS Phone Auth .
Web : assurez-vous d'avoir ajouté votre domaine d'applications sur la console Firebase , sous Domaines de redirection OAuth .

Note ; La connexion par numéro de téléphone n'est disponible que pour une utilisation sur des appareils réels et sur le Web. Pour tester votre flux d'authentification sur les émulateurs d'appareils, veuillez consulter Tests .

Usage

Le SDK d'authentification Firebase pour Flutter propose deux manières individuelles de connecter un utilisateur avec son numéro de téléphone. Les plates-formes natives (par exemple Android et iOS) offrent des fonctionnalités de validation d'un numéro de téléphone différentes de celles du Web. Il existe donc deux méthodes exclusivement pour chaque plate-forme :

Plateforme native : verifyPhoneNumber .
Plateforme Web : signInWithPhoneNumber .

Natif : `verifyPhoneNumber`

Sur les plateformes natives, le numéro de téléphone de l'utilisateur doit d'abord être vérifié, puis l'utilisateur peut soit se connecter, soit associer son compte avec un PhoneAuthCredential .

Vous devez d’abord demander à l’utilisateur son numéro de téléphone. Une fois fournie, appelez la méthode verifyPhoneNumber() :

await FirebaseAuth.instance.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  verificationCompleted: (PhoneAuthCredential credential) {},
  verificationFailed: (FirebaseAuthException e) {},
  codeSent: (String verificationId, int? resendToken) {},
  codeAutoRetrievalTimeout: (String verificationId) {},
);

Vous devez gérer 4 rappels distincts, chacun déterminera la manière dont vous mettrez à jour l'interface utilisateur de l'application :

vérificationCompleted : Gestion automatique du code SMS sur les appareils Android.
vérificationFailed : gère les événements d'échec tels que les numéros de téléphone invalides ou si le quota de SMS a été dépassé.
codeSent : gérer lorsqu'un code a été envoyé à l'appareil depuis Firebase, utilisé pour inviter les utilisateurs à saisir le code.
codeAutoRetrievalTimeout : gère un délai d'expiration lorsque la gestion automatique du code SMS échoue.

vérificationTerminée

Ce gestionnaire ne sera appelé que sur les appareils Android prenant en charge la résolution automatique du code SMS.

Lorsque le code SMS est transmis à l'appareil, Android vérifie automatiquement le code SMS sans que l'utilisateur ne doive saisir manuellement le code. Si cet événement se produit, un PhoneAuthCredential est automatiquement fourni et peut être utilisé pour se connecter avec ou lier le numéro de téléphone de l'utilisateur.

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  verificationCompleted: (PhoneAuthCredential credential) async {
    // ANDROID ONLY!

    // Sign the user in (or link) with the auto-generated credential
    await auth.signInWithCredential(credential);
  },
);

échec de la vérification

Si Firebase renvoie une erreur, par exemple pour un numéro de téléphone incorrect ou si le quota SMS du projet a dépassé, une FirebaseAuthException sera envoyée à ce gestionnaire. Dans ce cas, vous informeriez votre utilisateur que quelque chose s'est mal passé en fonction du code d'erreur.

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  verificationFailed: (FirebaseAuthException e) {
    if (e.code == 'invalid-phone-number') {
      print('The provided phone number is not valid.');
    }

    // Handle other errors
  },
);

code envoyé

Lorsque Firebase envoie un code SMS à l'appareil, ce gestionnaire est déclenché avec un verificationId et resendToken (un resendToken n'est pris en charge que sur les appareils Android, les appareils iOS renverront toujours une valeur null ).

Une fois déclenché, ce serait le bon moment pour mettre à jour l’interface utilisateur de votre application pour inviter l’utilisateur à saisir le code SMS qu’il attend. Une fois le code SMS saisi, vous pouvez combiner l'identifiant de vérification avec le code SMS pour créer un nouveau PhoneAuthCredential :

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  codeSent: (String verificationId, int? resendToken) async {
    // Update the UI - wait for the user to enter the SMS code
    String smsCode = 'xxxx';

    // Create a PhoneAuthCredential with the code
    PhoneAuthCredential credential = PhoneAuthProvider.credential(verificationId: verificationId, smsCode: smsCode);

    // Sign the user in (or link) with the credential
    await auth.signInWithCredential(credential);
  },
);

Par défaut, Firebase ne renverra pas un nouveau message SMS s'il a été récemment envoyé. Vous pouvez cependant remplacer ce comportement en rappelant la méthode verifyPhoneNumber avec le jeton de renvoi à l'argument forceResendingToken . En cas de succès, le message SMS sera renvoyé.

codeAutoRetrievalTimeout

Sur les appareils Android prenant en charge la résolution automatique du code SMS, ce gestionnaire sera appelé si l'appareil n'a pas résolu automatiquement un message SMS dans un certain délai. Une fois le délai écoulé, l'appareil ne tentera plus de résoudre les messages entrants.

Par défaut, l'appareil attend 30 secondes, mais cela peut être personnalisé avec l'argument timeout :

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  timeout: const Duration(seconds: 60),
  codeAutoRetrievalTimeout: (String verificationId) {
    // Auto-resolution timed out...
  },
);

Web : `signInWithPhoneNumber`

Sur les plateformes Web, les utilisateurs peuvent se connecter en confirmant qu'ils ont accès à un téléphone en saisissant le code SMS envoyé au numéro de téléphone fourni. Pour plus de sécurité et de prévention du spam, les utilisateurs sont priés de prouver qu'ils sont humains en complétant un widget Google reCAPTCHA . Une fois confirmé, le code SMS sera envoyé.

Le SDK d'authentification Firebase pour Flutter gérera le widget reCAPTCHA par défaut, mais permettra de contrôler la façon dont il est affiché et configuré si nécessaire. Pour commencer, appelez la méthode signInWithPhoneNumber avec le numéro de téléphone.

FirebaseAuth auth = FirebaseAuth.instance;

// Wait for the user to complete the reCAPTCHA & for an SMS code to be sent.
ConfirmationResult confirmationResult = await auth.signInWithPhoneNumber('+44 7123 123 456');

L’appel de la méthode déclenchera d’abord l’affichage du widget reCAPTCHA. L'utilisateur doit terminer le test avant qu'un code SMS ne soit envoyé. Une fois terminé, vous pouvez ensuite connecter l'utilisateur en fournissant le code SMS à la méthode confirm sur la réponse ConfirmationResult résolue :

UserCredential userCredential = await confirmationResult.confirm('123456');

Comme pour les autres flux de connexion, une connexion réussie déclenchera tous les écouteurs d’état d’authentification auxquels vous avez souscrit dans votre application.

Configuration de reCAPTCHA

Le widget reCAPTCHA est un flux entièrement géré qui assure la sécurité de votre application Web.

Le deuxième argument de signInWithPhoneNumber accepte une instance facultative RecaptchaVerifier qui peut être utilisée pour gérer le widget. Par défaut, le widget s'affichera comme un widget invisible lorsque le flux de connexion est déclenché. Un widget « invisible » apparaîtra sous forme de modale pleine page au-dessus de votre application.

Il est cependant possible d'afficher un widget en ligne sur lequel l'utilisateur doit appuyer explicitement pour se vérifier.

Pour ajouter un widget en ligne, spécifiez un ID d'élément DOM à l'argument container de l'instance RecaptchaVerifier . L'élément doit exister et être vide sinon une erreur sera générée. Si aucun argument container n'est fourni, le widget sera rendu "invisible".

ConfirmationResult confirmationResult = await auth.signInWithPhoneNumber('+44 7123 123 456', RecaptchaVerifier(
  container: 'recaptcha',
  size: RecaptchaVerifierSize.compact,
  theme: RecaptchaVerifierTheme.dark,
));

Vous pouvez éventuellement modifier la taille et le thème en personnalisant les arguments size et theme comme indiqué ci-dessus.

Il est également possible d'écouter des événements, par exemple si le reCAPTCHA a été complété par l'utilisateur, si le reCAPTCHA a expiré ou si une erreur a été générée :

RecaptchaVerifier(
  onSuccess: () => print('reCAPTCHA Completed!'),
  onError: (FirebaseAuthException error) => print(error),
  onExpired: () => print('reCAPTCHA Expired!'),
);

Essai

Firebase prend en charge le test local des numéros de téléphone :

Sur la console Firebase, sélectionnez le fournisseur d'authentification « Téléphone » et cliquez sur le menu déroulant « Numéros de téléphone à tester ».
Entrez un nouveau numéro de téléphone (par exemple +44 7444 555666 ) et un code de test (par exemple 123456 ).

Si vous fournissez un numéro de téléphone test aux méthodes verifyPhoneNumber ou signInWithPhoneNumber , aucun SMS ne sera réellement envoyé. Vous pouvez à la place fournir le code de test directement au PhoneAuthProvider ou avec le gestionnaire de résultats de confirmation de signInWithPhoneNumber .