Cómo añadir autenticación de dos factores con Node.js y Express

Introducción

La autenticación de dos factores (2FA) se refiere a un patrón en el que los usuarios deben proporcionar dos cosas para demostrar su identidad: algo que saben, como una contraseña, y algo que tienen, como un token de verificación de un dispositivo móvil.

Este tutorial explica cómo implementar un sistema de token de verificación utilizando la Verify API de Vonage y Express.js. Puedes encontrar el código de ejemplo completo en el repositorio GitHub de la comunidad de Vonage.

La solicitud constará de tres páginas:

1. una página inicial que pide que se verifique un número de móvil

2. una página en la que los usuarios introducen el código que se les envía

3. una página que muestra si el código era correcto y si la verificación se ha realizado correctamente

Workflow Overview

Requisitos previos

• Node.js instalado en su máquina

Configuración del proyecto

Añadir variables de entorno

Cree un archivo .env en el directorio de su proyecto y añada las siguientes variables de entorno a la misma.

• VERIFY_BRAND_NAMEnombre incluido en el mensaje para explicar quién confirma el número de teléfono

• VONAGE_APPLICATION_ID: tu ID de aplicación de Vonage

• VONAGE_APPLICATION_PRIVATE_KEY_PATHpegue el archivo de clave privada que acaba de descargar en el directorio de su proyecto y especifique la ruta en este campo (p. ej, ./private_your-app-id-here.key)

Configure su proyecto Node

Crea un nuevo directorio y ábrelo en un terminal, luego instala las dependencias como sigue:

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

Echemos un vistazo rápido a lo que cada una de estas dependencias hace por tu proyecto.

1. dotenv carga las variables de entorno del archivo .env que se acaba de crear.

2. express es un framework web para Node.js que maneja peticiones y respuestas HTTP. Se utiliza para crear tu servidor web, definir rutas (/, /verify, /check), y manejar el envío de formularios.

3. nunjucks es un motor de plantillas que genera páginas HTML de forma dinámica. Te permite crear plantillas HTML con variables y lógica, y luego rellenarlas con datos de tu servidor.

4. @vonage/server-sdk es el SDK principal de Vonage que proporciona el cliente para interactuar con las API de Vonage. Maneja la autenticación usando tu ID de aplicación y clave privada.

5. @vonage/verify2 proporciona constantes y tipos específicos para Verify v2 API de Vonage.

A continuación, cree un archivo index.js en el directorio de tu proyecto y configura estas dependencias:

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 permite pasar datos a las plantillas utilizando la sintaxis {{ variable }} sintaxis. Está configurado para analizar automáticamente los archivos del directorio views y se vincula con la aplicación Express almacenada en app.

Crear la página de destino

Cree un directorio llamado views y un directorio index.html dentro de él. Esta será nuestra página de destino.

{{ message }}

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

A continuación, tenemos que crear una ruta en index.js para mostrar el archivo index.html vista:

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

Ejecute node index.js en su terminal y abra localhost:3000 en su navegador. Observe que el mensaje aparece en la parte superior de la página en lugar del icono {{ message }} en el código.

A webpage showing the form and the Hello World message

Crear una solicitud de verificación

El formulario index.html enviará una solicitud POST a /verify cuando se envíe. Crear una nueva ruta para manejar esto en 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 });
 }
});

En este ejemplo, el flujo de trabajo se define para enviar un código de verificación a través del canal SMS. Otros canales compatibles son Autenticación silenciosa, RCS, WhatsApp, Voice y correo electrónico. También puede definir flujos de trabajo con varios canales encadenados como mecanismo de emergencia.

Por ejemplo, podría añadir Voice como segundo paso del flujo de trabajo anterior como método de escalado o probar la autenticación silenciosa para una experiencia más ágil. Más información sobre flujos de trabajo en Documentación de Verify API.

Compruebe el código

Una vez realizada la solicitud, el check.html por lo que tendremos que crearla a continuación. Añade una vista check.html en el directorio vistas con el siguiente contenido:

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

Además del código, se necesita el ID de la solicitud para comprobar si el código es correcto. Utilizando el mismo método que con {{message}}el valor del campo oculto requestId se proporciona dinámicamente.

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

Al enviar este formulario se enviará una solicitud POST al punto final /check como se define en el atributo action atributo.

A continuación, tenemos que implementar el nuevo /check punto final en 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 el resultado status es "completado", la comprobación ha tenido éxito y la verificación ha finalizado. Cree un success.html archivo en la views carpeta para celebrarlo:

<h1>🎉 Success! 🎉</h1>

Ejecute node index.js en su terminal y abra localhost:3000 en tu navegador para probar tu flujo de trabajo 2FA. Recuerde introducir su número de teléfono en formato E.164como 447401234567.

Próximos pasos

En la producción, hay algunas consideraciones adicionales que querrá tener en cuenta:

• gestión más sólida de los errores y los códigos de estado fallidos

• ofrecer la posibilidad de cancelar las verificaciones en curso

• permitir a los usuarios indicar su preferencia de canal de comunicación para la entrega de códigos

• validar la entrada del usuario para garantizar que sólo se pasan números de teléfono válidos a la Verify API

Conclusión

¡Eso es todo! En esta publicación del blog, aprendiste a implementar un flujo de trabajo simple de 2FA por SMS usando Verify API de Vonage.