Comment ajouter l'authentification à deux facteurs avec Node.js et Express

Introduction

L'authentification à deux facteurs (2FA) fait référence à un modèle dans lequel les utilisateurs doivent fournir deux éléments pour prouver leur identité : quelque chose qu'ils connaissent, comme un mot de passe, et quelque chose qu'ils ont, comme un jeton de vérification provenant d'un appareil mobile.

Ce tutoriel explique comment mettre en œuvre un système de jetons de vérification à l'aide de l'API Verify de Vonage et de Express.js. Vous pouvez trouver le code d'exemple complet sur le dépôt GitHub de la dépôt GitHub de la communauté Vonage.

Le dossier de candidature comprendra trois pages :

1. une page initiale qui demande la vérification du numéro de téléphone mobile

2. une page où les utilisateurs fournissent le code qui leur a été envoyé

3. une page qui indique si leur code était correct et si la vérification a réussi

Workflow Overview

Conditions préalables

• Node.js installé sur votre machine

Configuration du projet

Ajouter des variables d'environnement

Créez un fichier .env dans le répertoire de votre projet et ajoutez les variables d'environnement suivantes variables d'environnement suivantes.

• VERIFY_BRAND_NAMEnom inclus dans le message pour expliquer qui confirme le numéro de téléphone

• VONAGE_APPLICATION_IDvotre numéro d'identification de l'application Vonage

• VONAGE_APPLICATION_PRIVATE_KEY_PATHDans le cas d'une clé privée, collez le fichier de clé privée que vous venez de télécharger dans le répertoire de votre projet, puis indiquez le chemin d'accès dans ce champ (par exemple, le nom de la clé privée), ./private_your-app-id-here.key)

Configurez votre projet Node

Créez un nouveau répertoire et ouvrez-le dans un terminal, puis installez les dépendances comme suit :

npm init -y
npm install dotenv express nunjucks @vonage/server-sdk @vonage/verify2

Voyons rapidement ce que chacune de ces dépendances apporte à votre projet.

1. dotenv charge les variables d'environnement à partir du fichier .env qui vient d'être créé.

2. express est un framework web pour Node.js qui gère les requêtes et les réponses HTTP. Il est utilisé pour créer votre serveur web, définir des routes (/, /verify, /check) et gérer les soumissions de formulaires.

3. nunjucks est un moteur de création de modèles qui rend les pages HTML dynamiques. Il vous permet de créer des modèles HTML avec des variables et de la logique, puis de les remplir avec des données provenant de votre serveur.

4. @vonage/server-sdk est le SDK principal de Vonage qui fournit le client pour interagir avec les API de Vonage. Il gère l'authentification à l'aide de votre ID d'application et de votre clé privée.

5. @vonage/verify2 fournit des constantes et des types spécifiques à l'API Verify v2 de Vonage.

Ensuite, créez un fichier index.js dans le répertoire de votre projet et mettez en place ces dépendances :

const express = require('express');
const app = express();
const nunjucks = require('nunjucks');


// Add Environment Variables
const VONAGE_APPLICATION_ID = process.env.VONAGE_APPLICATION_ID;
const VONAGE_APPLICATION_PRIVATE_KEY_PATH = process.env.VONAGE_APPLICATION_PRIVATE_KEY_PATH;
const VERIFY_BRAND_NAME = process.env.VERIFY_BRAND_NAME;


const { Vonage } = require('@vonage/server-sdk');
const { Channels } = require('@vonage/verify2');


const vonage = new Vonage({
 applicationId: VONAGE_APPLICATION_ID,
 privateKey: VONAGE_APPLICATION_PRIVATE_KEY_PATH,
});


app.use(express.json());
app.use(express.urlencoded({ extended: false }));
nunjucks.configure('views', { express: app });


// other code will go here


app.listen(3000, () => {
 console.log('Example app listening on port 3000')
});

Nunjucks permet de transmettre des données aux modèles en utilisant la syntaxe {{ variable }} syntaxe. Il est configuré pour analyser automatiquement les fichiers du répertoire views et est lié à l'application Express stockée dans le répertoire app.

Créer la page d'atterrissage

Créez un répertoire appelé views et un fichier index.html à l'intérieur. Ce sera notre page d'atterrissage.

{{ message }}

<form method="post" action="verify">
 <input name="number" type="tel">
 <button>Get code</button>
</form>

Ensuite, nous devons créer une route dans index.js pour rendre le fichier index.html :

app.get('/', (req, res) => {
 res.render('index.html', { message: 'Hello, world!' })
});

Exécutez node index.js dans votre terminal et ouvrez localhost:3000 dans votre navigateur. Remarquez que le message est inséré en haut de la page à la place de l'élément {{ message }} dans le code.

A webpage showing the form and the Hello World message

Créer une demande de vérification

Le formulaire sur index.html enverra une requête POST à /verify lorsqu'il sera soumis. Créez une nouvelle route pour gérer cela dans index.js:

app.post('/verify', async (req, res) => {
 try {
   const { requestId } = await vonage.verify2.newRequest({
     brand: VERIFY_BRAND_NAME,
     workflow: [
       {
         channel: Channels.SMS,
         to: req.body.number,
       },
     ],
   });
  
   res.render('check.html', { requestId: requestId });
 } catch (err) {
   console.error(err);
   res.render('index.html', { message: err });
 }
});

Dans cet exemple, le flux de travail est défini pour envoyer un code de vérification via le canal SMS. Les autres canaux pris en charge sont l'authentification silencieuse, RCS, WhatsApp, Voice et Email. Vous pouvez également définir des flux de travail avec plusieurs canaux enchaînés les uns après les autres comme mécanisme de repli.

Par exemple, vous pouvez ajouter Voice à la deuxième étape du flux de travail ci-dessus comme méthode d'escalade ou essayer l'authentification silencieuse pour une expérience plus rationalisée. Pour en savoir plus sur les flux de travail, consultez les Verify API Docs.

Vérifier le code

Une fois la demande effectuée, le fichier check.html est rendue, nous devons donc la créer. Ajouter un fichier check.html dans le fichier vues avec le contenu suivant :

<form method="post" action="check">
 <input name="code" placeholder="Enter code">
 <input name="requestId" type="hidden" value="{{ requestId }}">
 <button>Verify</button>
</form>

Outre le code, l'ID de la demande est nécessaire pour vérifier si le code est correct. En utilisant la même méthode que pour {{message}}la valeur du champ caché requestId est fournie dynamiquement.

Source code showing the request ID inserted as the value for the hidden input

La soumission de ce formulaire enverra une requête POST au point de terminaison /check tel que défini dans l'attribut action attribut.

Ensuite, nous devons mettre en œuvre le nouveau point d'accès /check dans index.js:

app.post('/check', async (req, res) => {
 try {
   const status = await vonage.verify2.checkCode(req.body.requestId, req.body.code);
   console.log(`The status is ${status}`);
   res.render('success.html');
 } catch (err) {
   console.error(err);
   res.render('index.html', { message: err });
 }
});

Si le message retourné est "complété", le contrôle a été effectué avec succès et la vérification est terminée. status est "completed", le contrôle a été effectué avec succès et la vérification est terminée. Créer un success.html fichier dans le dossier views pour célébrer l'événement :

<h1>🎉 Success! 🎉</h1>

Exécutez node index.js dans votre terminal et ouvrez localhost:3000 dans votre navigateur pour tester votre flux de travail 2FA ! N'oubliez pas d'entrer votre numéro de téléphone au format format E.164tel que 447401234567.

Prochaines étapes

Dans la production, il y a quelques considérations supplémentaires à prendre en compte :

• traitement plus robuste des erreurs et des codes d'état non réussis

• la possibilité d'annuler les vérifications en cours

• permettre aux utilisateurs d'indiquer leur préférence en matière de canaux de communication pour l'envoi des codes

• valider la saisie de l'utilisateur pour s'assurer que seuls des numéros de téléphone valides sont transmis à l'API Verify

Conclusion

C'est terminé ! Dans cet article de blog, vous avez appris à mettre en œuvre un flux de travail 2FA via SMS simple en utilisant l'API Verify de Vonage.