Comment ajouter l'authentification à deux facteurs (2FA) à vos applications Web Node.JS

Ce tutoriel fait partie de la série "Getting Started with Vonage APIs and Node.js". Les liens vers les tutoriels précédents se trouvent au bas de l'article.

Parmi les développeurs d'apps et de services, l'utilisation de l'authentification à deux facteurs (2FA) pour vérifier l'identité des utilisateurs est devenue de plus en plus populaire, à mesure que les failles de sécurité sur internet et les réclamations pour fraude augmentent. L'ajout d'une couche supplémentaire de sécurité 2FA rend vos applications non seulement plus fiables, mais aussi plus dignes de confiance pour vos utilisateurs.

Dans ce tutoriel, vous apprendrez comment mettre en œuvre le 2FA pour vos applications et services web. Voir le code source pour le code frontal et le code de nœud sur GitHub.

Two Factor Authentication

Mise en place d'une application Web

Contrairement aux tutoriels précédents, ce tutoriel montre comment construire une application web complète, à la fois le front-end et le back-end, et créer un répertoire de projet pour l'application ! Tout d'abord, mettez en place la structure de l'application comme suit :

Puisque nous utilisons Node.js pour le backend, lançons la commande, npm init pour configurer notre application.

Puis installer les modules dont nous avons besoin... nexmo, express, body-parserainsi qu'un moteur de templating de vue de votre choix. Dans ce tutoriel, j'utilise ejs:

Mise en place d'un serveur

Maintenant, utilisez le framework Express.js pour construire un squelette de l'application, puis exécutez un serveur. Dans le fichier app.jsincluez les modules nécessaires à l'exécution d'un serveur, ainsi que le point d'entrée web (index.html).

const express = require('express');
const bodyParser = require('body-parser');
const ejs = require('ejs');
const app = express();

app.use(bodyParser.json());

app.set('views', __dirname + '/views'); // Render on browser
app.set('view engine', 'html');
app.engine('html', ejs.renderFile);
app.use(express.static(__dirname + '/views'));

const server = app.listen(5000);

app.get('/', function (req, res) {
  res.render('index');
});

Exécutez le script node et votre application web devrait fonctionner localement sur http://localhost:5000 .

Création d'un formulaire Web simple

Travaillons maintenant avec le code HTML pour créer un formulaire très simple qui prend le numéro de téléphone d'un utilisateur et le soumet :

Index.html

<form action="/register" method="post"><input name="number" required="" type="tel" placeholder="18005551234" />
  <input type="submit" value="Register" />
</form>

Vous obtiendrez ainsi un champ de saisie de nombres et un bouton.

A simple form input

Comme vous le voyez dans l'attribut action de l'attribut formla valeur saisie dans le champ sera envoyée à l'attribut yourapp/register.

Ensuite, nous allons gérer le code du back-end pour recevoir la valeur du formulaire via POST.

app.js

app.post('/register', (req, res) => {
  let phoneNumber = req.body.number;
  //… will send a SMS with a PIN code to the number!
});

Envoi d'un code de vérification 2FA

Nous allons maintenant utiliser l'API Verify de Vonage avec la bibliothèque Node.js pour envoyer un code PIN au numéro de téléphone.

Tout d'abord, incluez le module Nexmo et instanciez-le avec vos informations d'identification Vonage :

const Nexmo = require('nexmo');
const nexmo = new Nexmo({
  apiKey: YOUR_API_KEY,
  apiSecret: YOUR_API_SECRET
});

Modifiez ensuite l'itinéraire /register en ajoutant la méthode nexmo.verify.request méthode :

app.post('/register', (req, res) => {
  // A user registers with a mobile phone number
  let phoneNumber = req.body.number;
  console.log(phoneNumber);
  nexmo.verify.request({number: phoneNumber, brand: 'Awesome Company'}, (err, 
  result) => {
    if(err) {
      res.sendStatus(500);
    } else {
      let requestId = result.request_id;
      if(result.status == '0') {
        res.render('verify', {requestId: requestId}); // Success! Now, have your user enter the PIN
      } else {
        res.status(401).send(result.error_text);
      }
    }
  });
});

Dans ce scénario, l'API envoie à l'utilisateur un code PIN à 4 chiffres, mais si vous souhaitez envoyer un code PIN à 6 chiffres, passez le paramètre code_length à 6 avec l'appel nexmo.verify.request avec l'appel à l'API. Vous pouvez également transmettre paramètres supplémentairestels que pin_expiry.

Une fois le code PIN envoyé avec succès au numéro de téléphone, chargeons une page suivante (Verify.html) avec un nouveau champ de formulaire :

Verify.html

<form action="/verify" method="post"><input name="pin" required="" type="number" placeholder="1234" />
  <input name="requestId" type="hidden" value=""<%=" />" >
  <input type="submit" value="Verify PIN" />
</form>

A simple form input for PIN

Remarquez qu'il y a un champ caché avec l'icône requestIdqui a été envoyé lors du rappel de succès avec l'API Verify, et vous aurez besoin de l'ID pour vérifier le code PIN.

Ensuite, retournez dans le fichier app.js et ajoutez la /verify route. Vérifiez le code PIN avec la méthode nexmo.verify.check méthode :

app.post('/verify', (req, res) => {
  let pin = req.body.pin;
  let requestId = req.body.requestId;

  nexmo.verify.check({request_id: requestId, code: pin}, (err, result) => {
    if(err) {
      // handle the error
    } else {
      if(result && result.status == '0') { // Success!
        res.status(200).send('Account verified!');
        res.render('status', {message: 'Account verified! ?'});
      } else {
        // handle the error - e.g. wrong PIN
      }
    }
  });
});

Lorsque l'API renvoie le code d'état 0, elle a vérifié le code PIN avec succès.

Pour une meilleure expérience utilisateur, vous devez également indiquer le statut à l'interface utilisateur. Par exemple, en cas de rappel réussi, chargez une autre page HTML avec un message "Account Verified". C'est également une bonne idée de gérer tous les statuts d'erreur dans l'interface utilisateur de votre application. Par exemple, lorsque l'utilisateur saisit un code PIN erroné, au lieu de renvoyer simplement le texte de l'erreur (comme indiqué dans l'exemple de code simplifié ci-dessus), affichez ce texte dans l'interface utilisateur.

Vous pouvez trouver l'intégralité du code dans le GitHub repo et l'exemple de code, 2fa.js (qui est la version complète du code app.js que vous avez créé dans ce tutoriel), dans le repo !

Vous pouvez également trouver tous les codes d'erreur de Verify API à l'adresse suivante https://docs.nexmo.com/verify/api-reference/api-reference#check.

En savoir plus

Références et outils API

• Verify API

• Client Vonage pour Node.js

Guide de démarrage de Vonage pour Node.js

• Comment envoyer des SMS avec Node.js et Express

• Comment recevoir des SMS avec Node.js et Express

• Comment recevoir un accusé de réception de SMS d'un opérateur mobile avec Node.js

• Comment passer un appel de synthèse vocale avec Node.js

• Comment recevoir un appel avec Node.js

• Comment enregistrer des appels avec Node.js

• Comment faire un appel proxy pour une conversation privée avec Node.js