Améliorez votre authentification multifactorielle avec les API de Vonage et Firebase

Cet article a été mis à jour pour la dernière fois le 4 mars 2026

Introduction

Dans cet article de blog, je vous montrerai comment améliorer votre authentification multifactorielle à l'aide de notre API Vonage Identity Insights API de Vonage, SIM Swap insightet Verify API. Nous utilisons également Firebase Services pour stocker nos fonctions avec Fonctions dans le nuageles données dans le Cloud Firestore et notre application web à l'aide de l'hébergement hébergement Firebase.

Le code source de l'application est disponible sur notre GitHub repo.

Note : Ce billet de blog ajoute les services Firebase à la liste des services existants. Améliorez votre authentification multifactorielle avec l'API Verify et SIM Swap Insight. Le tutoriel couvre à la fois la création du serveur à l'aide d'Express et son déploiement dans le nuage. Vous pouvez consulter ce précédent article de blog et le GitHub repo pour des explications approfondies.

Conditions préalables

• Un compte de développeur Vonage

• Node.js et npm sont installés sur votre machine

• Un projet Firebase est mis en place dans la Firebase Console (j'ai nommé le mien account-recovery-demo)

• CLI Firebase installé

• Un éditeur de code/texte

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Diagramme d'ensemble et architecture de l'application

Ce tutoriel sur la récupération des comptes montre comment les utilisateurs peuvent se connecter, réinitialiser leur mot de passe ou vérifier leur identité en accédant à la page web front-end. Cette page interagit avec le back-end Firebase Functions pour stocker et récupérer les informations d'identification de l'utilisateur dans Firebase Cloud Firestore.

Lorsque l'utilisateur tente de réinitialiser son mot de passe, il reçoit un code unique de vérification généré par l'API Verify de Vonage. Cependant, cela ne se produira qu'une fois que les détails de l'échange de cartes SIM auront été vérifiés auprès des fournisseurs de services de communication à l'aide de l'API Vonage Identity Insights SIM Swap insight.

Overview DiagramL'application suit une architecture client-serveur. Le client gère les interactions des utilisateurs par le biais de HTML et de JavaScript, notamment la saisie des numéros de téléphone et la soumission des codes de vérification. Firebase Hosting sert l'application web, Firebase Functions gère la logique côté serveur et Firestore stocke les données des utilisateurs et les statuts de vérification.

Comment mettre en place un projet de fonctions cloud

Auparavant, l'application Express gérait les routes et les appels API directement dans un environnement serveur. Grâce aux fonctions cloud de Firebase, chaque point d'extrémité défini précédemment dans l'application Express est associé à une fonction cloud spécifique en réécrivant les règles dans le fichier firebase.json dans le fichier firebase.json. Cette configuration découple le mécanisme de routage de la logique de l'application, ce qui permet à chaque fonction d'être mise à l'échelle et gérée de manière indépendante. Firebase traite automatiquement les demandes entrantes et les dirige vers la fonction cloud appropriée en fonction des règles de réécriture, telles que envoyer un code à sendCode ou /login à login. Comme le client web réside maintenant dans un domaine différent de celui du serveur, nous utilisons également CORS (Cross-Origin Resource Sharing).

Comment mettre en place le projet

Vous pouvez travailler sur ce projet en utilisant votre éditeur de code préféré. Dans mon cas, j'ai utilisé Visual Studio Code, et Firebase Studio prend en charge les projets Firebase, ce qui facilite le développement. Vous pouvez choisir l'éditeur qui vous convient le mieux !

1. Vous pouvez commencer par cloner le GitHub.

2. Installer les dépendances nécessaires : npm install.

Comment configurer Firebase

Vous trouverez ci-dessous les étapes de la mise en place du projet. pouvez créer un projet Firebase soit à partir de la console Firebase soit en utilisant la ligne de commande. Les services Firebase que nous utiliserons sont les fonctions, l'hébergement et Firestore.

• Dans la console, cliquez sur pour créer un nouveau projet, donnez-lui un nom et cliquez sur continuer.

• Indiquez si vous souhaitez utiliser des outils d'analyse.

• Attendez que le projet soit créé.

• Définissez le type de facturation sous l'engrenage ⚙ -> Utilisation et facturation -> Détails et paramètres à Blaze (le plan Pay-as-you-go doit utiliser une API tierce).

• Définissez l'emplacement de la ressource Google Cloud dans ⚙ -> Paramètres du projet.

Comment définir les cibles de déploiement de Firebase ?

Définissez vos objectifs de déploiement. Créez un fichier .firebaserc dans le dossier de votre projet et mettez à jour 'PROJECT_ID' avec l'ID de votre projet. Il y a un .firebaserc.example qui indique où vous pouvez le trouver dans le dossier.

// .firebaserc

{

  "projects": {

    "default": "PROJECT_ID"

  }

}

Configurez vos variables d'environnement

Il est temps d'ajouter les variables d'environnement à votre projet.

A partir du fichier /fonctions/.env.exemple vous pouvez créer le fichier /functions/.env et inclure les variables d'environnement suivantes :

# .env

VONAGE_API_KEY=your_api_key VONAGE_API_SECRET=your_api_secret VONAGE_APPLICATION_ID=your_application_id VONAGE_APPLICATION_PRIVATE_KEY=/path/to/your/private.key
PERIOD=72

Note : Secret Manager est un moyen sûr d'importer des variables d'environnement. Ce tutoriel utilise dotenv, car Cloud Functions for Firebase supporte dotenv.

Comment tester localement avec l'émulateur Firebase

Pour tester localement, vous pouvez utiliser Firebase Local Emulator Suite.

1. Initialiser les émulateurs firebase init emulators.

2. Démarrer les émulateurs firebase emulators:start.

3. Vous trouverez l'URL permettant d'ouvrir l'application web locale et l'instance Firestore dans la ligne de commande. Ouvrez les deux pages et remplissez l'instance Firestore. N'oubliez pas qu'il s'agit de votre instance Firestore locale. Par conséquent, elle sera différente de celle que vous trouverez sur le projet actuel dans la console cloud.

Note : Pour ce projet, je les ai inclus dans le fichier firebase.json afin que vous puissiez trouver votre émulateur sur le port 5001 et Firestore sur le port 8080.

Déployez votre application Web et essayez-la

Comment déployer avec Firebase Hosting

Déployez vos fichiers statiques (HTML, CSS, JavaScript) sur Firebase Hosting. Assurez-vous que la CLI Firebase est installée et initialisée dans votre projet. Exécutez la commande suivante pour déployer :

firebase deploy --only hosting

Vous pouvez voir qu'une page HTML sera générée pour vous dans la ligne de commande. Dans mon exemple, l'ID de mon projet est "Account-recovery-demo", et l'URL générée est "Account-recovery-demo".https://account-recovery-demo.web.app'. Allez-y et ouvrez la vôtre !

Fonctions cloud pour Firebase

Déployez votre logique côté serveur en utilisant Firebase Functions. Assurez-vous que le CLI Firebase est installé et initialisé dans votre projet. Exécutez la commande suivante pour déployer :

firebase deploy --only functions

Si vous allez dans l'onglet "fonctions" de votre console console Firebase vous pouvez repérer les quatre fonctions : sendCode, login, verify et simSwap. Si vous avez besoin de vérifier les versions et les journaux, vous pouvez le faire pour chacune des fonctions créées.

Base de données Firebase Cloud Firestore

Utilisez Firestore pour stocker les données de l'utilisateur et le statut de vérification. Créez une collection "credentials" et remplissez les champs de Firestore avec les nœuds de credentials.

Créez chaque nœud d'événement contenant les champs de type chaîne suivants : mot de passe, numéro de téléphone, request_id et nom d'utilisateur. Nous avons stocké ces champs sensibles dans le Firestore pour cet exemple d'application. Idéalement, dans une application réelle, ils devraient être mieux sécurisés en utilisant, par exemple, Secret Manager.

Cloud Firestore Database Instance

Essayez-le

Il est temps d'aller sur l'application web que vous avez déployée en utilisant l'hébergement Firebase.

Le processus de test doit être le suivant : imaginez que vous avez oublié votre mot de passe. Cliquez sur "Mot de passe oublié" pour commencer la récupération. Vous serez invité à saisir votre numéro de téléphone et à demander une vérification.

Si l'application détecte un changement récent de carte SIM, un avertissement s'affiche : Avertissement ! Un récent changement d'appairage SIM lié au compte mobile de l'utilisateur s'est produit. Poursuivre ?" Si ce n'est pas vous qui avez procédé à l'échange et que vous choisissez "Non, ce n'est pas moi", c'est le signe qu'il pourrait y avoir une fraude avec votre numéro. C'est le moment de vérifier auprès de votre opérateur de téléphonie mobile.

Remarque : dans la démonstration du didacticiel, on vous demande de confirmer que vous avez échangé la carte SIM ; dans un scénario réel, l'utilisateur serait probablement invité à contacter directement le fournisseur de services pour des vérifications d'identité supplémentaires. De la même manière, cette approche pourrait être appliquée à l'authentification multifactorielle lors de la connexion, où une vérification serait effectuée avant l'envoi du jeton à usage unique. Si un échange récent de cartes SIM est détecté, l'utilisateur peut contacter directement le fournisseur de services pour des contrôles d'identité supplémentaires.

En revanche, si vous échangez votre carte SIM et que vous sélectionnez Oui, c'est moil'application utilise l'API Verify pour envoyer un code de vérification à votre téléphone. Saisissez ce code sur l'écran suivant et définissez un nouveau mot de passe. Une fois que c'est fait, vous pouvez utiliser vos nouveaux identifiants pour vous connecter à votre compte bancaire simulé.

Conclusion

Vous avez atteint la fin de ce tutoriel. Aujourd'hui, vous avez vu comment améliorer votre application multi-facteurs en ajoutant les Firebase Services à votre application web.

Ressources complémentaires

• Envoyer des SMS avec les fonctions cloud pour Firebase Gen 2

• Construire un planificateur de rendez-vous en utilisant Node, Firebase et Vonage

• Envoyer et recevoir des SMS avec Firebase Functions | One Dev Minute