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

Authentification avec Firebase avec un numéro de téléphone en utilisant JavaScript

Vous pouvez utiliser l'authentification Firebase pour connecter un utilisateur en envoyant un message SMS sur le téléphone de l'utilisateur. L'utilisateur se connecte à l'aide d'un code à usage unique contenu dans le message SMS.

La meilleure façon d'ajouter de connexion à votre application numéro de téléphone est d'utiliser FirebaseUI , qui comprend un widget un signe en baisse en implémentant signe en flux pour le numéro de téléphone de connexion, ainsi que par mot de passe et signe fédéré -dans. Ce document explique comment mettre en œuvre un flux de connexion par numéro de téléphone à l'aide du SDK Firebase.

Avant que tu commences

Si vous avez pas déjà, copiez l'extrait d'initialisation de la console Firebase à votre projet tel que décrit dans Ajouter Firebase à votre projet JavaScript .

Problèmes de sécurité

L'authentification utilisant uniquement un numéro de téléphone, bien que pratique, est moins sécurisée que les autres méthodes disponibles, car la possession d'un numéro de téléphone peut être facilement transférée entre les utilisateurs. De plus, sur les appareils dotés de plusieurs profils d'utilisateurs, tout utilisateur pouvant recevoir des messages SMS peut se connecter à un compte à l'aide du numéro de téléphone de l'appareil.

Si vous utilisez la connexion basée sur un numéro de téléphone dans votre application, vous devez l'offrir avec des méthodes de connexion plus sécurisées et informer les utilisateurs des compromis de sécurité 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 :

  1. Dans la console Firebase , ouvrez la section d' authentification.
  2. Sur la page de connexion Méthode, activez le signe dans Numéro de téléphone méthode.
  3. Sur la même page, si le domaine qui hébergera votre application ne figure pas dans la section domaines de redirection OAuth, ajoutez votre domaine.

Le quota de demande de connexion par numéro de téléphone de Firebase est suffisamment élevé pour que la plupart des applications ne soient pas affectées. Cependant, si vous devez vous connecter à un très grand nombre d'utilisateurs avec une authentification téléphonique, vous devrez peut-être mettre à niveau votre plan tarifaire. Voir la prix page.

Configurer le vérificateur reCAPTCHA

Avant de pouvoir connecter les utilisateurs avec leurs numéros de téléphone, vous devez configurer le vérificateur reCAPTCHA de Firebase. Firebase utilise reCAPTCHA pour éviter les abus, par exemple en s'assurant que la demande de vérification du numéro de téléphone provient de l'un des domaines autorisés de votre application.

Vous n'avez pas besoin de configurer manuellement un client reCAPTCHA ; lorsque vous utilisez le SDK Firebase RecaptchaVerifier l'objet, Firebase crée automatiquement et gère toutes les clés nécessaires client et secrets.

Les RecaptchaVerifier objet supports reCAPTCHA invisible , qui peut vérifier souvent l'utilisateur sans nécessiter aucune action de l' utilisateur, ainsi que le widget reCAPTCHA, ce qui nécessite toujours une interaction utilisateur pour terminer avec succès.

Le reCAPTCHA rendu sous-jacent peut être localisé selon les préférences de l'utilisateur en mettant à jour le code de langue sur l'instance Auth avant de rendre le reCAPTCHA. La localisation susmentionnée s'appliquera également au message SMS envoyé à l'utilisateur, contenant le code de vérification.

Web version 9

import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();

Web version 8

firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();

Utiliser reCAPTCHA invisible

Pour utiliser un reCAPTCHA invisible, créer un RecaptchaVerifier objet avec la size du jeu de paramètres à invisible , en spécifiant l'ID du bouton qui soumet votre signe en forme. Par exemple:

Web version 9

import { getAuth, RecaptchaVerifier } from "firebase/auth";

const auth = getAuth();
window.recaptchaVerifier = new RecaptchaVerifier('sign-in-button', {
  'size': 'invisible',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    onSignInSubmit();
  }
}, auth);

Web version 8

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 RecaptchaVerifier objet, en spécifiant l'ID du conteneur lorsque vous le faites. Par exemple:

Web version 9

import { getAuth, RecaptchaVerifier } from "firebase/auth";

const auth = getAuth();
window.recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {}, auth);

Web version 8

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');

Facultatif : spécifiez les paramètres reCAPTCHA

Vous pouvez également définir des fonctions de rappel sur l' RecaptchaVerifier objet qui sont appelés lorsque les utilisateurs permet de résoudre le reCAPTCHA ou le reCAPTCHA expire avant la fin de l' utilisateur soumet le formulaire:

Web version 9

import { getAuth, RecaptchaVerifier } from "firebase/auth";

const auth = getAuth();
window.recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {
  'size': 'normal',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    // ...
  },
  'expired-callback': () => {
    // Response expired. Ask user to solve reCAPTCHA again.
    // ...
  }
}, auth);

Web version 8

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é-rendez le reCAPTCHA

Si vous souhaitez effectuer une pré-rendre le reCAPTCHA avant de soumettre un signe en demande, appel render :

Web version 9

recaptchaVerifier.render().then((widgetId) => {
  window.recaptchaWidgetId = widgetId;
});

Web version 8

recaptchaVerifier.render().then((widgetId) => {
  window.recaptchaWidgetId = widgetId;
});

Après render décide, vous obtenez ID widget de reCAPTCHA, que vous pouvez utiliser pour faire des appels à l' reCAPTCHA API:

Web version 9

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);

Web version 8

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);

Envoyer un code de vérification sur le téléphone de l'utilisateur

Pour lancer la connexion au numéro de téléphone, présenter à l'utilisateur une interface qui les invite à fournir leur numéro de téléphone, puis appelez signInWithPhoneNumber pour demander que Firebase envoyer un code d'authentification sur le téléphone de l'utilisateur par SMS:

  1. Obtenez le numéro de téléphone de l'utilisateur.

    Les exigences légales varient, mais en tant que meilleure pratique et pour définir les attentes de vos utilisateurs, vous devez les informer que s'ils utilisent la connexion par téléphone, ils peuvent recevoir un message SMS pour vérification et que les tarifs standard s'appliquent.

  2. Appel signInWithPhoneNumber , en lui passant le numéro de téléphone de l'utilisateur et le RecaptchaVerifier créé précédemment.

    Web version 9

    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 version 8

    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
          // ...
        });
    Si signInWithPhoneNumber se traduit par une erreur, réinitialiser le reCAPTCHA afin que l'utilisateur peut essayer à nouveau:
    grecaptcha.reset(window.recaptchaWidgetId);
    
    // Or, if you haven't stored the widget ID:
    window.recaptchaVerifier.render().then(function(widgetId) {
      grecaptcha.reset(widgetId);
    }
    

Les signInWithPhoneNumber problèmes de méthode le défi reCAPTCHA à l'utilisateur, et si l'utilisateur passe le défi, demandes d' authentification Firebase envoyer un message SMS contenant un code de vérification au téléphone de l'utilisateur.

Connectez-vous à l'utilisateur avec le code de vérification

Après l'appel à signInWithPhoneNumber réussit, invite l'utilisateur à saisir le code de vérification qu'ils ont reçu par SMS. Ensuite, l'utilisateur signe en faisant passer le code à la confirm procédé de l' ConfirmationResult objet qui a été transmis à signInWithPhoneNumber gestionnaire d'exécution de l »(qui est, son then bloc). Par exemple:

Web version 9

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 version 8

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 réussi, l'utilisateur est correctement signé.

Obtenir l'objet AuthCredential intermédiaire

Si vous avez besoin d'obtenir un AuthCredential objet pour le compte de l'utilisateur, passer le code de vérification du résultat de confirmation et le code de vérification pour PhoneAuthProvider.credential au lieu d'appeler confirm :

var credential = firebase.auth.PhoneAuthProvider.credential(confirmationResult.verificationId, code);

Ensuite, vous pouvez vous connecter à l'utilisateur avec les informations d'identification :

firebase.auth().signInWithCredential(credential);

Test 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. Les tests avec des numéros de téléphone fictifs offrent les avantages suivants :

  • Testez l'authentification du numéro de téléphone sans consommer votre quota d'utilisation.
  • Testez l'authentification du numéro de téléphone sans envoyer de message SMS réel.
  • Exécutez des tests consécutifs avec le même numéro de téléphone sans être limité. Cela minimise le risque de rejet lors du processus de révision de l'App Store si le réviseur utilise le même numéro de téléphone pour les tests.
  • Testez facilement dans des environnements de développement sans aucun effort supplémentaire, comme la possibilité de développer dans un simulateur iOS ou un émulateur Android sans les services Google Play.
  • Rédigez des tests d'intégration sans être bloqué par les 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 répondre aux exigences suivantes :

  1. Assurez-vous d'utiliser des numéros de téléphone qui sont effectivement fictifs et qui n'existent pas déjà. L'authentification Firebase ne vous permet pas de définir des numéros de téléphone existants utilisés par de vrais utilisateurs comme numéros de test. Une option consiste à utiliser 555 numéros préfixés que les numéros de téléphone de test américain, par exemple: +1 650-555-3434
  2. Les numéros de téléphone doivent être correctement formatés pour la longueur et d'autres contraintes. Ils passeront toujours par la même validation que le numéro de téléphone d'un utilisateur réel.
  3. Vous pouvez ajouter jusqu'à 10 numéros de téléphone pour le développement.
  4. Utilisez des numéros de téléphone/codes de test difficiles à deviner et changez-les fréquemment.

Créez des numéros de téléphone et des codes de vérification fictifs

  1. Dans la console Firebase , ouvrez la section d' authentification.
  2. Dans l'onglet Connexion de la méthode, permettre au fournisseur de téléphone si vous avez pas déjà.
  3. Ouvrez les numéros de téléphone pour tester le menu accordéon.
  4. Indiquez le numéro de téléphone que vous souhaitez tester, par exemple: +1 650-555-3434.
  5. Fournir le code de vérification à 6 chiffres pour ce numéro spécifique, par exemple: 654321.
  6. Ajouter le numéro. En cas de besoin, vous pouvez supprimer le numéro de téléphone et son code en survolant la ligne correspondante et en cliquant sur l'icône de la corbeille.

Test manuel

Vous pouvez directement commencer à utiliser un numéro de téléphone fictif dans votre application. Cela vous permet d'effectuer des tests manuels pendant les étapes de développement sans rencontrer de problèmes de quota ou de limitation. Vous pouvez également tester directement à partir d'un simulateur iOS ou d'un émulateur Android sans que les services Google Play soient installés.

Lorsque vous fournissez le numéro de téléphone fictif et envoyez le code de vérification, aucun SMS réel n'est envoyé. Au lieu de cela, vous devez fournir le code de vérification précédemment configuré pour terminer la connexion.

Une fois la connexion terminée, un 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 de la même manière à la base de données en temps réel/au Cloud Firestore et à d'autres services. Le jeton d'identification créé au cours de ce processus a la même signature qu'un véritable utilisateur de numéro de téléphone.

Une autre option est de définir un rôle de test via les revendications personnalisées sur ces utilisateurs pour les différencier les utilisateurs de faux si vous voulez limiter davantage l' accès.

Tests d'intégration

En plus des tests manuels, Firebase Authentication fournit des API pour aider à écrire des tests d'intégration pour les tests d'authentification téléphonique. Ces API désactivent la vérification des applications en désactivant l'exigence reCAPTCHA dans les notifications push Web et silencieuses dans iOS. Cela rend les tests d'automatisation possibles dans ces flux et plus faciles à mettre en œuvre. En outre, ils permettent de tester les flux de vérification instantanée sur Android.

Sur le Web, ensemble appVerificationDisabledForTesting à true avant de rendre l' firebase.auth.RecaptchaVerifier . Cela résout le reCAPTCHA automatiquement, vous permettant de transmettre le numéro de téléphone sans le résoudre manuellement. Notez que même si reCAPTCHA est désactivé, l'utilisation d'un numéro de téléphone non fictif ne permettra toujours pas de terminer la connexion. Seuls les 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 vérificateurs d'application reCAPTCHA simulés visibles et invisibles se comportent différemment lorsque la vérification d'application est désactivée :

  • ReCAPTCHA Visible: Lorsque le visible reCAPTCHA est rendu via appVerifier.render() , il se résout automatiquement après une fraction d'un second retard. Cela équivaut à un utilisateur cliquant sur le reCAPTCHA immédiatement après le rendu. La réponse reCAPTCHA expirera après un certain temps, puis se résoudra automatiquement.
  • ReCAPTCHA Invisible: Le reCAPTCHA invisible ne pas automatiquement résolution sur le rendu et ne place donc sur le appVerifier.verify() appel ou lorsque l'ancre bouton de reCAPTCHA est cliqué après une fraction de seconde de retard. De même, la réponse expire après un certain temps et ne auto-détermination , soit après l' appVerifier.verify() appel ou lorsque l'ancre bouton de reCAPTCHA est cliqué à nouveau.

Chaque fois qu'un reCAPTCHA fictif est résolu, la fonction de rappel correspondante est déclenchée comme prévu avec la fausse réponse. Si un rappel d'expiration est également spécifié, il se déclenchera à l'expiration.

Prochaines étapes

Une fois qu'un utilisateur se connecte pour la première fois, un nouveau compte d'utilisateur est créé et lié aux informations d'identification, c'est-à-dire le nom d'utilisateur et le mot de passe, le numéro de téléphone ou les informations du fournisseur d'autorisation, avec lesquelles l'utilisateur s'est connecté. Ce nouveau compte est stocké dans le cadre de votre projet Firebase et peut être utilisé pour identifier un utilisateur dans chaque application de votre projet, quel que soit le mode de connexion de l'utilisateur.

  • Dans vos applications, la méthode recommandée de connaître l'état de votre auth utilisateur de définir un observateur sur le Auth objet. Vous pouvez obtenir des informations sur le profil de base de l'utilisateur de l' User objet. Voir Gérer les utilisateurs .

  • Dans votre base de données et en temps réel Firebase Cloud Storage Les règles de auth sécurité , vous pouvez obtenir la signature dans ID d'utilisateur unique de l' utilisateur de la auth variable et l' utiliser pour contrôler les données d' un accès utilisateur peut.

Vous pouvez permettre aux utilisateurs de se connecter à votre application à l' aide des fournisseurs d'authentification multiples en reliant les informations d' identification de fournisseur auth à un compte d'utilisateur existant.

Pour vous déconnecter un utilisateur, appelez signOut :

Web version 9

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

Web version 8

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});