Como adicionar a autenticação de dois fatores (2FA) às suas aplicações web em Node.JS
Tempo de leitura: 5 minutos
Este tutorial faz parte da série “Introdução às APIs da Vonage e ao Node.js”. Confira os links para os tutoriais anteriores no final da postagem.
Entre os desenvolvedores de aplicativos e serviços, o uso da autenticação de dois fatores (2FA) para verificar a identidade do usuário tem se tornado cada vez mais comum, à medida que aumentam as violações de segurança na internet e as denúncias de fraudes. Adicionar essa camada extra de segurança por meio da 2FA torna seus aplicativos não apenas mais confiáveis, mas também mais seguros para seus usuários.
Neste tutorial, você aprenderá como implementar a autenticação de dois fatores (2FA) em seus aplicativos e serviços web. Veja o código-fonte tanto do front-end quanto do Node.js no GitHub.
Two Factor Authentication
Diferentemente dos tutoriais anteriores, este tutorial mostra como construir um aplicativo web completo, tanto o front-end quanto o back-end, e criar um diretório para o projeto do aplicativo! Então, primeiro, configure a estrutura do aplicativo da seguinte maneira:
Como estamos usando o Node.js para o backend, vamos executar o comando npm init para configurar seu aplicativo.
Em seguida, instale os módulos de que precisamos: nexmo, express, body-parser, juntamente com um mecanismo de modelagem de visualizações de sua escolha. Neste tutorial, estou usando ejs:
Agora, use o framework Express.js para criar um esboço do aplicativo e, em seguida, execute um servidor. Em app.js, inclua os módulos necessários para executar um servidor, bem como o ponto de entrada da 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');
});Execute o script do node e seu aplicativo web deverá funcionar localmente em http://localhost:5000 .
Agora, vamos trabalhar com o HTML para criar um formulário bem simples que receba o número de telefone do usuário e o envie:
Index.html
<form action="/register" method="post"><input name="number" required="" type="tel" placeholder="18005551234" />
<input type="submit" value="Register" />
</form>
Isso criará um campo de entrada para números e um botão.
A simple form input
Como você pode ver no action atributo do form, o valor inserido no campo será enviado para o yourapp/register.
A seguir, vamos lidar com o código do back-end para receber o valor do formulário por meio de uma solicitação POST.
app.js
app.post('/register', (req, res) => {
let phoneNumber = req.body.number;
//… will send a SMS with a PIN code to the number!
});
Agora, vamos usar a Verify API do Vonage com a biblioteca do Node.js para enviar um código PIN para o número de telefone.
Primeiro, inclua o módulo Nexmo e crie uma instância dele com suas credenciais da Vonage:
const Nexmo = require('nexmo');
const nexmo = new Nexmo({
apiKey: YOUR_API_KEY,
apiSecret: YOUR_API_SECRET
});Em seguida, modifique a /register rota adicionando o nexmo.verify.request método:
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);
}
}
});
});
Nesse cenário, a API está enviando ao usuário um PIN de 4 dígitos, mas se você quiser enviar um PIN de 6 dígitos, defina o code_length valor 6 ao parâmetro junto com a nexmo.verify.request chamada. Você também pode passar parâmetros extras, como pin_expiry.
Assim que o código PIN for enviado com sucesso para o número de telefone, vamos carregar a próxima página (verify.html) com um novo campo de formulário:
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
Observe que há um campo oculto com o requestId, que foi enviado na chamada de retorno de sucesso pela Verify API, e você precisará desse ID para verificar o código PIN.
Em seguida, volte para o app.js e adicione a /verify rota. Verifique o código PIN com o nexmo.verify.check método:
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
}
}
});
});
Quando a API retorna o código de status 0, isso significa que a verificação do PIN foi bem-sucedida.
Para proporcionar uma melhor experiência ao usuário, você também deve indicar o status na interface do usuário. Por exemplo, após um callback bem-sucedido, carregue outra página HTML com a mensagem “Account Verified”. Além disso, é recomendável tratar todos os status de erro na interface do usuário do seu aplicativo. Por exemplo, quando o usuário digitar um código PIN incorreto, em vez de apenas retornar o texto de erro (como mostrado no exemplo de código simplificado acima), exiba esse texto na interface do usuário.
Você pode encontrar o código completo no repositório do GitHub e o código de exemplo, 2fa.js (que é a versão completa do código app.js que você criou neste tutorial), no repositório!
Você também pode encontrar todos os códigos de status de erro da Verify API em https://docs.nexmo.com/verify/api-reference/api-reference#check.