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

Authentification par téléphone

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

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

Firebase Phone Authentication n'est pas disponible dans tous les pays. Pour en savoir plus, consultez leurs questions fréquentes.

Préparation

Avant de commencer à utiliser l'authentification par téléphone, assurez-vous d'avoir suivi ces étapes :

Activez "Téléphone" comme méthode de connexion dans la console Firebase.
Android : si vous n'avez pas encore défini le hachage SHA-1 de votre application dans la console Firebase, faites-le. Pour savoir comment trouver le hachage SHA-1 de votre application, consultez Authentifier votre client.
iOS : dans Xcode, activez les notifications push pour votre projet et assurez-vous que votre clé d'authentification APNs est configurée avec Firebase Cloud Messaging (FCM). De plus, vous devez activer les modes en arrière-plan pour les notifications à distance. Pour obtenir une explication détaillée de cette étape, consultez la documentation Firebase iOS Phone Auth.
Web : assurez-vous d'avoir ajouté le domaine de vos applications dans la console Firebase, sous Domaines de redirection OAuth.

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

Utilisation

Le SDK Firebase Authentication pour Flutter propose deux méthodes distinctes pour connecter un utilisateur avec son numéro de téléphone. Les plates-formes natives (Android et iOS, par exemple) offrent des fonctionnalités différentes pour valider un numéro de téléphone par rapport au Web. Par conséquent, deux méthodes existent pour chaque plate-forme exclusivement :

Plate-forme native : verifyPhoneNumber.
Plate-forme Web : signInWithPhoneNumber.

Native : `verifyPhoneNumber`

Sur les plates-formes natives, le numéro de téléphone de l'utilisateur doit d'abord être validé. L'utilisateur peut ensuite se connecter ou associer son compte à un PhoneAuthCredential.

Vous devez d'abord demander à l'utilisateur de saisir son numéro de téléphone. Une fois la valeur 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 quatre rappels distincts, chacun déterminant la façon dont vous mettez à jour l'UI de l'application :

verificationCompleted : gestion automatique du code SMS sur les appareils Android.
verificationFailed : gérez les événements d'échec tels que les numéros de téléphone non valides ou le dépassement du quota de SMS.
codeSent : gère le cas où un code a été envoyé à l'appareil depuis Firebase. Il est utilisé pour inviter les utilisateurs à saisir le code.
codeAutoRetrievalTimeout : gère un délai d'expiration en cas d'échec du traitement automatique du code SMS.

verificationCompleted

Ce gestionnaire ne sera appelé que sur les appareils Android compatibles avec la résolution automatique des codes SMS.

Lorsque le code SMS est envoyé à l'appareil, Android le valide automatiquement sans que l'utilisateur ait besoin de le saisir manuellement. Si cet événement se produit, un PhoneAuthCredential est automatiquement fourni. Il peut être utilisé pour se connecter ou associer 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);
  },
);

verificationFailed

Si Firebase renvoie une erreur (par exemple, en cas de numéro de téléphone incorrect ou si le quota de SMS pour le projet a été dépassé), un FirebaseAuthException sera envoyé à ce gestionnaire. Dans ce cas, vous devez indiquer à l'utilisateur qu'une erreur s'est produite 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
  },
);

codeSent

Lorsque Firebase envoie un code par SMS à l'appareil, ce gestionnaire est déclenché avec un verificationId et un resendToken (un resendToken n'est compatible qu'avec les appareils Android. Les appareils iOS renverront toujours une valeur null).

Une fois déclenché, c'est le bon moment pour mettre à jour l'UI de votre application afin d'inviter l'utilisateur à saisir le code SMS qu'il attend. Une fois le code SMS saisi, vous pouvez combiner l'ID de validation avec le code SMS pour créer un 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 renvoie pas de nouveau message SMS s'il a été envoyé récemment. Vous pouvez toutefois remplacer ce comportement en appelant à nouveau la méthode verifyPhoneNumber avec le jeton de renvoi à l'argument forceResendingToken. Si l'opération réussit, le message SMS est renvoyé.

codeAutoRetrievalTimeout

Sur les appareils Android compatibles avec la résolution automatique des codes SMS, ce gestionnaire est 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 vous pouvez personnaliser ce délai 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 plates-formes 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 renforcer la sécurité et éviter le spam, les utilisateurs sont invités à prouver qu'ils sont humains en remplissant un widget Google reCAPTCHA. Une fois confirmé, le code SMS sera envoyé.

Le SDK Firebase Authentication pour Flutter gère le widget reCAPTCHA prêt à l'emploi par défaut, mais permet de contrôler son affichage et sa configuration 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éclenche d'abord l'affichage du widget reCAPTCHA. L'utilisateur doit réussir le test avant qu'un code SMS lui soit envoyé. Une fois l'opération terminée, vous pouvez 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 vous êtes abonné dans votre application.

Configuration 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 RecaptchaVerifier facultative qui peut être utilisée pour gérer le widget. Par défaut, le widget s'affiche sous la forme d'un widget invisible lorsque le flux de connexion est déclenché. Un widget "invisible" s'affiche sous la forme d'un modal en plein écran au-dessus de votre application.

Il est toutefois possible d'afficher un widget intégré sur lequel l'utilisateur doit appuyer explicitement pour se valider.

Pour ajouter un widget intégré, 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 les événements, par exemple si l'utilisateur a terminé le reCAPTCHA, 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!'),
);

Tests

Firebase permet de tester les numéros de téléphone en local :

Dans la console Firebase, sélectionnez le fournisseur d'authentification "Téléphone", puis cliquez sur le menu déroulant "Numéros de téléphone à des fins de test".
Saisissez 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 de test aux méthodes verifyPhoneNumber ou signInWithPhoneNumber, aucun SMS ne sera envoyé. Vous pouvez plutôt fournir le code de test directement au PhoneAuthProvider ou avec le gestionnaire de résultats de confirmation de signInWithPhoneNumber.