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 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 des spams et des abus sur l'ensemble du service 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 Firebase Authentication.authentication

L'authentification par téléphone 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 par téléphone, 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 encore défini le hachage SHA-1 de votre application dans la console Firebase , faites-le. Voir 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 APNs 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 .

Remarque ; La connexion par numéro de téléphone ne peut être utilisée que sur des appareils réels et sur le Web. Pour tester votre flux d'authentification sur des émulateurs d'appareils, veuillez consulter Testing .

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 différentes pour valider un numéro de téléphone par rapport au Web. Par conséquent, deux méthodes existent exclusivement pour chaque plate-forme :

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

Natif : `verifyPhoneNumber`

Sur les plates-formes 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 lier son compte à un PhoneAuthCredential .

Vous devez d'abord demander à l'utilisateur son numéro de téléphone. Une fois fourni, 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) {},
);

Il y a 4 rappels distincts que vous devez gérer, chacun déterminera comment vous mettez à jour l'interface utilisateur de l'application :

verificationCompleted : Gestion automatique du code SMS sur les appareils Android.
verificationFailed : traite 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 : poignée 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érificationComplété

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 envoyé à l'appareil, Android vérifie automatiquement le code SMS sans demander à l'utilisateur de 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 de SMS pour le projet est dépassé, une FirebaseAuthException sera envoyée à ce gestionnaire. Dans ce cas, vous indiquerez à 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 à entrer le code SMS qu'il attend. Une fois le code SMS saisi, vous pouvez combiner l'ID 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 de nouveau message SMS s'il a été envoyé récemment. Vous pouvez toutefois 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 qui prennent 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 entrant 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 remplissant un widget Google reCAPTCHA . Une fois confirmé, le code SMS sera envoyé.

Le SDK d'authentification Firebase 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éclenchera d'abord l'affichage du widget reCAPTCHA. L'utilisateur doit terminer le test avant qu'un code SMS soit envoyé. Une fois terminé, vous pouvez alors 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 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 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 la forme d'un modal 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 comme "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é rempli par l'utilisateur, si le reCAPTCHA a expiré ou si une erreur a été renvoyée :

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

Essai

Firebase permet de tester localement les 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 de 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 .