Vous pouvez utiliser Firebase Authentication pour connecter un utilisateur en envoyant un SMS au téléphone de l'utilisateur. L'utilisateur se connecte à l'aide d'un code à usage unique contenu dans le message SMS.
Le moyen le plus simple d'ajouter un numéro de téléphone à votre application est d'utiliser FirebaseUI qui inclut un widget de connexion qui implémente les flux de connexion pour les la connexion avec un numéro, ainsi que la connexion fédérée et basée sur un mot de passe. Ce document explique comment implémenter un flux de connexion par numéro de téléphone à l'aide du SDK Firebase.
Avant de commencer
Si vous ne l'avez pas déjà fait, copiez l'extrait de code d'initialisation à partir du console Firebase à votre projet, comme décrit dans la section Ajoutez Firebase à votre projet JavaScript.Problèmes de sécurité
L'authentification par simple numéro de téléphone est moins sécurisée, même si elle est pratique. que les autres méthodes disponibles, car la possession d'un numéro de téléphone peuvent être facilement transférés d'un utilisateur à l'autre. De plus, sur les appareils dotés de plusieurs profils utilisateur, tout utilisateur pouvant recevoir des SMS peut se connecter à un compte à l'aide du numéro de téléphone de l'appareil.
Si vous utilisez la connexion par numéro de téléphone dans votre application, vous devez la proposer ainsi que des méthodes de connexion plus sécurisées, et informer les utilisateurs les compromis liés à l'utilisation de la connexion par numéro de téléphone.
Activer la connexion par numéro de téléphone pour votre projet Firebase
Pour connecter les utilisateurs par SMS, vous devez d'abord activer la méthode de connexion par numéro de téléphone pour votre projet Firebase :
- Dans la console Firebase, ouvrez la section Authentification.
- Sur la page Sign-in Method (Méthode de connexion), activez le Phone Number (Numéro de téléphone). méthode de connexion.
- Sur la même page, si le domaine qui hébergera votre application n'est pas listé dans la section Domaines de redirection OAuth, ajoutez-le. Notez que localhost n'est pas autorisé en tant que domaine hébergé à des fins d'authentification par téléphone.
Configurer l'outil de vérification reCAPTCHA
Avant de pouvoir connecter des utilisateurs à l'aide de leur numéro de téléphone, vous devez configurer l'outil de vérification reCAPTCHA de Firebase. Firebase utilise reCAPTCHA pour éviter les utilisations abusives, telles que en vous assurant que la demande de validation du numéro de téléphone provient les domaines autorisés de votre application.
Vous n'avez pas besoin de configurer manuellement un client reCAPTCHA. lorsque vous utilisez
Objet RecaptchaVerifier
du SDK Firebase, Firebase automatiquement
qui crée et gère les clés et les secrets
client nécessaires.
L'objet RecaptchaVerifier
est compatible avec le reCAPTCHA invisible, qui permet souvent de valider l'utilisateur sans aucune action de sa part, ainsi que le widget reCAPTCHA, qui nécessite toujours une interaction de l'utilisateur pour être exécuté.
Le reCAPTCHA affiché en arrière-plan peut être localisé en fonction des préférences de l'utilisateur en mettant à jour le code de langue sur l'instance Auth avant d'afficher le reCAPTCHA. La localisation mentionnée ci-dessus s'applique également au message SMS envoyé à l'utilisateur, contenant le code de validation.
Web
import { getAuth } from "firebase/auth"; const auth = getAuth(); auth.languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // auth.useDeviceLanguage();
Web
firebase.auth().languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // firebase.auth().useDeviceLanguage();
Utiliser un reCAPTCHA invisible
Pour utiliser la méthode reCAPTCHA invisible, créez un objet RecaptchaVerifier
avec le paramètre size
défini sur invisible
, en spécifiant l'ID du bouton qui envoie votre formulaire de connexion. Exemple :
Web
import { getAuth, RecaptchaVerifier } from "firebase/auth"; const auth = getAuth(); window.recaptchaVerifier = new RecaptchaVerifier(auth, 'sign-in-button', { 'size': 'invisible', 'callback': (response) => { // reCAPTCHA solved, allow signInWithPhoneNumber. onSignInSubmit(); } });
Web
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', { 'size': 'invisible', 'callback': (response) => { // reCAPTCHA solved, allow signInWithPhoneNumber. onSignInSubmit(); } });
Utiliser le widget reCAPTCHA
Pour utiliser le widget reCAPTCHA visible, créez un élément sur votre page pour
contenir le widget, puis créer un objet RecaptchaVerifier
,
en spécifiant l'ID du conteneur lorsque vous effectuez cette opération. Par exemple:
Web
import { getAuth, RecaptchaVerifier } from "firebase/auth"; const auth = getAuth(); window.recaptchaVerifier = new RecaptchaVerifier(auth, 'recaptcha-container', {});
Web
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
(Facultatif) Spécifier des paramètres reCAPTCHA
Vous pouvez éventuellement définir des fonctions de rappel sur la
Les objets RecaptchaVerifier
qui sont appelés lorsque l'utilisateur résout le
reCAPTCHA ou reCAPTCHA expire avant que l'utilisateur n'envoie le formulaire:
Web
import { getAuth, RecaptchaVerifier } from "firebase/auth"; const auth = getAuth(); window.recaptchaVerifier = new RecaptchaVerifier(auth, 'recaptcha-container', { 'size': 'normal', 'callback': (response) => { // reCAPTCHA solved, allow signInWithPhoneNumber. // ... }, 'expired-callback': () => { // Response expired. Ask user to solve reCAPTCHA again. // ... } });
Web
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', { 'size': 'normal', 'callback': (response) => { // reCAPTCHA solved, allow signInWithPhoneNumber. // ... }, 'expired-callback': () => { // Response expired. Ask user to solve reCAPTCHA again. // ... } });
Facultatif : Préafficher le reCAPTCHA
Si vous souhaitez préafficher le reCAPTCHA avant d'envoyer une demande de connexion,
appelez render
:
Web
recaptchaVerifier.render().then((widgetId) => { window.recaptchaWidgetId = widgetId; });
Web
recaptchaVerifier.render().then((widgetId) => { window.recaptchaWidgetId = widgetId; });
Une fois render
résolu, vous obtenez l'ID de widget reCAPTCHA, qui
que vous pouvez utiliser pour appeler
API reCAPTCHA:
Web
const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);
Web
const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);
Envoyer un code de validation sur le téléphone de l'utilisateur
Pour lancer la connexion avec un numéro de téléphone, présentez à l'utilisateur une invite
de fournir son numéro de téléphone, puis d'appeler
signInWithPhoneNumber
pour demander à Firebase d'envoyer une
code d'authentification par SMS sur le téléphone de l'utilisateur:
-
Obtenez le numéro de téléphone de l'utilisateur.
Les exigences légales varient, mais il est recommandé d'informer vos utilisateurs qu'ils peuvent recevoir un SMS de validation s'ils utilisent la connexion par téléphone et que les tarifs standards s'appliquent.
- Appeler
signInWithPhoneNumber
en lui transmettant le numéro de téléphone de l'utilisateur et leRecaptchaVerifier
que vous avez créé précédemment.Web
import { getAuth, signInWithPhoneNumber } from "firebase/auth"; const phoneNumber = getPhoneNumberFromUserInput(); const appVerifier = window.recaptchaVerifier; const auth = getAuth(); signInWithPhoneNumber(auth, phoneNumber, appVerifier) .then((confirmationResult) => { // SMS sent. Prompt user to type the code from the message, then sign the // user in with confirmationResult.confirm(code). window.confirmationResult = confirmationResult; // ... }).catch((error) => { // Error; SMS not sent // ... });
Web
const phoneNumber = getPhoneNumberFromUserInput(); const appVerifier = window.recaptchaVerifier; firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier) .then((confirmationResult) => { // SMS sent. Prompt user to type the code from the message, then sign the // user in with confirmationResult.confirm(code). window.confirmationResult = confirmationResult; // ... }).catch((error) => { // Error; SMS not sent // ... });
signInWithPhoneNumber
génère une erreur, réinitialisez le reCAPTCHA afin que l'utilisateur puisse réessayer:grecaptcha.reset(window.recaptchaWidgetId); // Or, if you haven't stored the widget ID: window.recaptchaVerifier.render().then(function(widgetId) { grecaptcha.reset(widgetId); });
La méthode signInWithPhoneNumber
émet le test reCAPTCHA
à l'utilisateur, et s'il réussit l'examen, il lui demande
Firebase Authentication envoie un SMS contenant un code de validation au
téléphone de l'utilisateur.
Connecter l'utilisateur avec le code de validation
Une fois l'appel de signInWithPhoneNumber
réussi, envoyez une invite
à l'utilisateur de saisir le code de validation reçu par SMS. Ensuite, connectez l'utilisateur
en transmettant le code à la méthode confirm
Objet ConfirmationResult
transmis à
le gestionnaire de fulfillment de signInWithPhoneNumber
(c'est-à-dire son
bloc then
). Exemple :
Web
const code = getCodeFromUserInput(); confirmationResult.confirm(code).then((result) => { // User signed in successfully. const user = result.user; // ... }).catch((error) => { // User couldn't sign in (bad verification code?) // ... });
Web
const code = getCodeFromUserInput(); confirmationResult.confirm(code).then((result) => { // User signed in successfully. const user = result.user; // ... }).catch((error) => { // User couldn't sign in (bad verification code?) // ... });
Si l'appel à confirm
aboutit, l'utilisateur est correctement
connecté(e).
Obtenir l'objet AuthCredential intermédiaire
Si vous devez obtenir un objet AuthCredential
pour l'objet
compte, transmettez le code de validation indiqué dans le résultat de la confirmation et le
le code de validation à PhoneAuthProvider.credential
au lieu de
Appel de confirm
:
var credential = firebase.auth.PhoneAuthProvider.credential(confirmationResult.verificationId, code);
Vous pouvez ensuite connecter l'utilisateur à l'aide de ces identifiants:
firebase.auth().signInWithCredential(credential);
Tester avec des numéros de téléphone fictifs
Vous pouvez configurer des numéros de téléphone fictifs pour le développement via la console Firebase. Test avec un téléphone fictif offrent les avantages suivants:
- Testez l'authentification par numéro de téléphone sans consommer votre quota d'utilisation.
- Testez l'authentification par numéro de téléphone sans envoyer de SMS.
- Exécutez des tests consécutifs avec le même numéro de téléphone sans être limité. Ce réduit le risque de refus lors du processus d'examen de la plate-forme de téléchargement d'applications si l'examinateur utilise le même numéro de téléphone à des fins de test.
- Effectuez des tests facilement dans des environnements de développement, sans effort supplémentaire la possibilité de développer dans un simulateur iOS ou un émulateur Android sans les services Google Play.
- Écrire des tests d'intégration sans être bloqué par des contrôles de sécurité normalement appliqués sur de vrais numéros de téléphone dans un environnement de production.
Les numéros de téléphone fictifs doivent respecter les conditions suivantes :
- Assurez-vous d'utiliser des numéros de téléphone fictifs et qui n'existent pas déjà. Firebase Authentication ne vous permet pas de définir des numéros de téléphone existants utilisés par de véritables utilisateurs comme numéros de test. Vous pouvez utiliser des numéros avec le préfixe 555 comme numéros de téléphone de test aux États-Unis, par exemple : +1 650-555-3434
- Le format des numéros de téléphone doit respecter les règles de longueur de contraintes. Ils seront toujours soumis à la même validation que le numéro de téléphone de l'utilisateur réel.
- Vous pouvez ajouter jusqu'à 10 numéros de téléphone pour le développement.
- Utilisez des numéros/codes de test difficiles à deviner et modifiez-les fréquemment.
Créer des numéros de téléphone et des codes de validation fictifs
- Dans la console Firebase, ouvrez la section Authentication (Authentification).
- Dans l'onglet Mode de connexion, activez l'opérateur téléphonique, si ce n'est pas déjà fait.
- Ouvrez le menu accordéon Numéros de téléphone à des fins de test.
- Indiquez le numéro de téléphone que vous souhaitez tester, par exemple : +1 650-555-3434.
- Indiquez le code de validation à six chiffres correspondant à ce numéro spécifique, par exemple: 654321.
- Ajoutez le numéro. Si nécessaire, vous pouvez supprimer le numéro de téléphone et son code en pointant sur la ligne correspondante et en cliquant sur l'icône de la corbeille.
Tests manuels
Vous pouvez commencer directement à utiliser un numéro de téléphone fictif dans votre demande. Vous pouvez ainsi effectuer des tests manuels pendant les phases de développement sans rencontrer de problèmes de quota ni de limitation. Vous pouvez également effectuer des tests directement depuis un simulateur iOS ou un émulateur Android sans les services Google Play. installés.
Lorsque vous fournissez le numéro de téléphone fictif et que vous envoyez le code de validation, aucun SMS n'est envoyé. Vous devrez fournir le code de validation précédemment configuré pour finaliser la signature. po.
Une fois la connexion terminée, un compte utilisateur Firebase est créé avec ce numéro de téléphone. L'utilisateur a le même comportement et les mêmes propriétés qu'un véritable utilisateur de numéro de téléphone, et peut accéder à Realtime Database/Cloud Firestore et à d'autres services de la même manière. Le jeton d'ID généré pendant ce processus a la même signature qu’un vrai utilisateur de numéro de téléphone.
Vous pouvez également définir un rôle de test via des revendications personnalisées sur ces utilisateurs pour les identifier comme des utilisateurs fictifs si vous souhaitez restreindre davantage l'accès.
Tests d'intégration
En plus des tests manuels, Firebase Authentication fournit des API pour vous aider à écrire des tests d'intégration pour les tests d'authentification par téléphone. Ces API désactivent la validation des applications en désactivant reCAPTCHA pour les notifications push Web et silencieuses sur iOS. Cela permet de tester l'automatisation dans ces flux et de l'implémenter plus facilement. De plus, elles permettent de tester les flux de validation instantanée sur Android.
Sur le Web, définissez appVerificationDisabledForTesting
sur true
avant d'afficher firebase.auth.RecaptchaVerifier
. Cette opération résout
reCAPTCHA automatiquement, ce qui vous permet de transmettre le numéro de téléphone sans le résoudre manuellement. Remarque
que, même si reCAPTCHA est désactivé, l'utilisation d'un numéro de téléphone non fictif ne permettra toujours pas
terminer la procédure de connexion. Seuls des numéros de téléphone fictifs peuvent être utilisés avec cette API.
// Turn off phone auth app verification. firebase.auth().settings.appVerificationDisabledForTesting = true; var phoneNumber = "+16505554567"; var testVerificationCode = "123456"; // This will render a fake reCAPTCHA as appVerificationDisabledForTesting is true. // This will resolve after rendering without app verification. var appVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container'); // signInWithPhoneNumber will call appVerifier.verify() which will resolve with a fake // reCAPTCHA response. firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier) .then(function (confirmationResult) { // confirmationResult can resolve with the fictional testVerificationCode above. return confirmationResult.confirm(testVerificationCode) }).catch(function (error) { // Error; SMS not sent // ... });
Les outils de validation de reCAPTCHA factice visible et invisible se comportent différemment lorsque la validation des applications est désactivée :
- reCAPTCHA visible : lorsque le reCAPTCHA visible est affiché via
appVerifier.render()
, il se résout automatiquement après un délai d'une fraction de seconde. Cela équivaut à ce qu'un utilisateur clique sur le reCAPTCHA immédiatement après l'affichage. reCAPTCHA expire après un certain temps avant d'être à nouveau résolu automatiquement. - reCAPTCHA invisible:
Le reCAPTCHA invisible ne se résout pas automatiquement lors de l'affichage, mais le fait au niveau du
appVerifier.verify()
ou lorsque l'ancre du bouton reCAPTCHA est après un délai d'une fraction de seconde. De même, la réponse expire après un certain temps ne sera résolu automatiquement qu'après l'appelappVerifier.verify()
ou lorsque la l'ancre du bouton reCAPTCHA est une nouvelle fois.
Chaque fois qu'une simulation reCAPTCHA est résolue, la fonction de rappel correspondante est déclenchée comme prévu. avec cette fausse réponse. Si un rappel d'expiration est également spécifié, il se déclenchera au moment de l'expiration.
Étapes suivantes
Lorsqu'un utilisateur se connecte pour la première fois, un compte utilisateur est créé et associé aux identifiants (nom d'utilisateur et mot de passe, numéro de téléphone ou informations du fournisseur d'authentification) avec lesquels l'utilisateur s'est connecté. Ce nouveau compte est stocké dans votre projet Firebase et peut être utilisé pour identifier un utilisateur dans toutes les applications de votre projet, quelle que soit la manière dont il se connecte.
-
Dans vos applications, la méthode recommandée pour connaître l'état d'authentification de votre utilisateur consiste à définir un observateur sur l'objet
Auth
. Vous pouvez ensuite obtenir les informations de profil de base de l'objetUser
. Voir Gérer les utilisateurs Dans votre Firebase Realtime Database et votre Cloud Storage Règles de sécurité, vous pouvez obtenez l'ID utilisateur unique de l'utilisateur connecté à partir de la variable
auth
et l'utiliser pour contrôler les données auxquelles un utilisateur peut accéder.
Vous pouvez autoriser les utilisateurs à se connecter à votre appli à l'aide de plusieurs authentifications fournisseurs en associant leurs identifiants compte utilisateur existant.
Pour déconnecter un utilisateur, appelez .
signOut
:
Web
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
Web
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });