Como adicionar a autenticação de dois fatores com Node.js e Express

Introdução

A autenticação de dois fatores (2FA) refere-se a um método em que os usuários devem fornecer dois elementos para comprovar sua identidade: algo que eles sabem, como uma senha, e algo que eles possuem, como um token de verificação de um dispositivo móvel.

Este tutorial explica como implementar um sistema de token de verificação usando a Verify API do Vonage e Express.js. Você pode encontrar o código de exemplo completo no repositório GitHub da Comunidade Vonage.

O formulário terá três páginas:

1. uma página inicial que solicita a verificação de um número de celular

2. uma página na qual os usuários inserem o código que lhes foi enviado

3. uma página que mostra se o código deles estava correto e se a verificação foi bem-sucedida

Workflow Overview

Pré-requisitos

• Node.js instalado no seu computador

Configuração do projeto

Adicionar variáveis de ambiente

Crie um arquivo .env no diretório do seu projeto e adicione as seguintes variáveis de ambiente a ele. 

• VERIFY_BRAND_NAME: nome incluído na mensagem para explicar quem está confirmando o número de telefone

• VONAGE_APPLICATION_ID: seu ID de aplicativo da Vonage

• VONAGE_APPLICATION_PRIVATE_KEY_PATH: cole o arquivo da chave privada que você acabou de baixar no diretório do seu projeto e, em seguida, forneça o caminho para ele neste campo (por exemplo, ./private_your-app-id-here.key)

Configure seu projeto Node

Crie um novo diretório e abra-o no terminal; em seguida, instale as dependências da seguinte maneira:

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

Vamos dar uma olhada rápida no que cada uma dessas dependências faz pelo seu projeto.

1. dotenv carrega as variáveis de ambiente do arquivo .env recém-criado.

2. express é uma estrutura web para Node.js que lida com solicitações e respostas HTTP. É usada para criar seu servidor web e definir rotas (/, /verify, /check) e processar envios de formulários.

3. nunjucks é um mecanismo de modelos que renderiza páginas HTML dinamicamente. Ele permite que você crie modelos HTML com variáveis e lógica e, em seguida, os preencha com dados do seu servidor. 

4. @vonage/server-sdk é o Client SDK principal da Vonage que fornece o cliente para interagir com as APIs da Vonage. Ele lida com a autenticação usando o ID do seu aplicativo e a chave privada.

5. @vonage/verify2 fornece constantes e tipos específicos da Verify API v2 da Vonage.

Em seguida, crie um index.js arquivo no diretório do seu projeto e configure estas dependências:

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 que dados sejam passados para modelos usando a {{ variable }} sintaxe. Ele está configurado para analisar automaticamente os arquivos no views diretório e está vinculado ao aplicativo Express armazenado em app.

Criar a página de destino

Crie um diretório chamado views e um arquivo arquivo index.html dentro dele. Essa será nossa página inicial.

{{ message }}

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

Em seguida, precisamos criar uma rota em index.js para renderizar o arquivo visualização index.html :

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

Execute node index.js no seu terminal e abra localhost:3000 no seu navegador. Observe que a mensagem é exibida na parte superior da página, no lugar do {{ message }} no código.

A webpage showing the form and the Hello World message

Criar uma solicitação de verificação

O formulário em index.html enviará uma solicitação POST para /verify quando for enviado. Crie uma nova rota para lidar com isso em 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 });
 }
});

Neste exemplo, o fluxo de trabalho está definido para enviar um código de verificação pelo canal SMS. Outros canais compatíveis são: Autenticação Silenciosa, RCS, WhatsApp, Voice e E-mail. Você também pode definir fluxos de trabalho com vários canais encadeados, um após o outro, como mecanismo de contingência.

Por exemplo, você pode adicionar o Voice como a segunda etapa do fluxo de trabalho acima, como método de escalonamento, ou experimentar a autenticação silenciosa para uma experiência mais simplificada. Saiba mais sobre fluxos de trabalho na Documentação da Verify API.

Verifique o código

Assim que a solicitação for feita, o  página check.html é renderizada; portanto, precisaremos criá-la a seguir. Adicione um arquivo check.html na pasta directório com o seguinte conteúdo:

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

Além do código, é necessário o ID da solicitação para verificar se o código está correto. Usando o mesmo método utilizado com {{message}}, o valor do campo oculto requestId é fornecido dinamicamente.

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

Ao enviar este formulário, será enviada uma solicitação POST para o /check ponto de extremidade, conforme definido no action atributo.

Em seguida, precisamos implementar o novo /check ponto de extremidade em 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 });
 }
});

Se o valor retornado status for “concluído”, a verificação foi bem-sucedida e o processo está concluído. Crie um success.html arquivo na views pasta para comemorar:

<h1>🎉 Success! 🎉</h1>

Execute node index.js no seu terminal e abra localhost:3000 no seu navegador para testar seu fluxo de trabalho de 2FA concluído! Lembre-se de inserir seu número de telefone no formato E.164, como 447401234567.

Próximos passos

Na produção, há algumas considerações adicionais que você deve levar em conta:

• um tratamento mais robusto de erros e códigos de status de falha

• oferecendo a possibilidade de cancelar verificações em andamento

• permitindo que os usuários indiquem sua preferência de canal de comunicação para o envio do código

• validar os dados inseridos pelo usuário para garantir que apenas números de telefone válidos sejam enviados à Verify API

Conclusão

É isso aí! Nesta postagem do blog, você aprendeu a implementar um fluxo de trabalho simples de autenticação de duas etapas (2FA) via SMS usando a Verify API do Vonage.