Come aggiungere l’autenticazione a due fattori con Node.js e Koa.js

Published October 16, 2020 by Hui Jing Chen
Categories:

L’autenticazione a due fattori (2FA) prende il nome dal fatto che per verificare la tua identità sono richiesti due elementi: qualcosa che conosci – come una password – e qualcosa che hai, come un codice di verifica sul tuo dispositivo mobile, o un token fisico.

Aggiungere la 2FA alla tua app non è un compito difficile. Questo tutorial ti mostrerà come implementare la 2FA nelle tue applicazioni web con l’aiuto dell’API Vonage Verify, ottenendo così un ulteriore livello di sicurezza. Costruiremo una semplice applicazione in Koa.js, per capire come funziona il meccanismo di base. In questo modo saprai come adattarlo ai tuoi progetti esistenti, anche se non stai usando Koa.js.

Questo tutorial ti mostrerà come implementare un sistema di token di verifica con l’API Vonage Verify e Koa.js. Esiste un tutorial simile che utilizza Node.js ed Express.js – puoi trovarlo qui – in inglese.

Inizialmente, una pagina di login chiederà al tuo utente un numero di cellulare. Dopodiché, gli verrà chiesto di inserire il codice di verifica che gli sarà inviato tramite SMS. Una volta inserito, l’utente potrà accedere all’applicazione.

Prerequisiti

  • Una conoscenza di base di Javascript
  • Node.js installato sul tuo computer

Vonage API Account

Per completare questo tutorial avrai bisogno di un account Vonage API. Se non ne hai già uno, puoi registrarti ora e iniziare subito a sviluppare, grazie al credito gratuito. Una volta creato l’account, troverai la tua API Key e il tuo API Secret nella parte superiore della Vonage API dashboard.

Start building with Vonage

Questo tutorial ti guiderà attraverso l’intero processo partendo da zero. Se desideri vedere il codice finito, puoi clonare il repository git. Abbiamo anche una versione Glitch, che ha un design più ricercato, e che potrai anche remixare. Considera che nell’implementazione Glitch ci sono lievi differenze, dovute al modo in cui i progetti sono salvati su questa piattaforma.

Glitch version of demo

Inizio di un progetto Koa.js da zero

Crea una nuova cartella sul tuo computer, quindi esegui il seguente comando per configurare un nuovo progetto Node.js:

Questo attiverà una serie di prompt che genereranno il file package.json. Puoi scegliere di lasciare le risposte vuote e utilizzare i valori predefiniti, se lo desideri.

Configuring package.json

Poi, installa Koa.js. Tieni presente che Koa richiede Node v7.6.0 (o superiore) per ES2015 e il supporto della funzione async.

Crea un file server.js nella cartella del progetto.

Incolla il codice seguente nel file che hai appena creato.

Esegui il file server.js.

Se accedi a http://localhost:3000 dal tuo browser, dovresti vedere una pagina vuota con il testo “Hello Unicorn 🦄”.

Check that server is running

È inoltre necessario installare dotenv, che consente di caricare le variabili di ambiente memorizzate in un file .env nel process.env.

E ora puoi creare il file .env, che dovrebbe contenere almeno le seguenti variabili:

Per accedere alle variabili d’ambiente, dovrai inviare una richiesta, idealmente all’inizio del tuo file server.js.

Struttura del progetto

In questo momento, il tuo progetto probabilmente è costituito solo da un package.json, un file server.js e un file .env. Impostiamo ora la struttura del progetto in modo da poter avere un frontend di base con cui gli utenti possono interagire.

Fatto ciò, dovrai apportare alcune modifiche al file server.js per servire il file index.html e le risorse correlate, invece che semplicemente una riga di testo. Koa.js è un framework abbastanza basilare, quindi qualsiasi funzionalità aggiuntiva per il routing o il servizio di risorse statiche deve essere installata separatamente. Ecco l’elenco dei moduli aggiuntivi e dei loro usi:
koa-static for serving static assets
koa-bodyparser for handling data sent over via POST requests
koa-router for routing
koa-views to render templates

Questo esempio utilizza anche Nunjucks per il rendering dei file modello. L’API Vonage Verify verrà utilizzata per attivare il codice di verifica tramite SMS, quindi sarà necessario installare anche la library Vonage Node.js SDK.

Servire asset statici e file HTML

Per consentire all’applicazione di servire asset statici come i fogli di stile e il Javascript lato client, fuori dalla cartella /public , puoi aggiungere quanto segue al file server.js:

Per servire i file HTML fuori dalla cartella /views, puoi usare koa-views, che fornisce una funzione render(). Il template engine utilizzato in questo esempio è Nunjucks, ma puoi scegliere quello che funziona meglio per te.

Il prossimo step è impostare alcune routes di base per servire le pagine dell’applicazione.

Per questo esempio, avrai bisogno di 3 pagine: index.html come pagina di destinazione principale, verify.html per consentire agli utenti di inserire il loro codice di verifica e result.html per mostrare se la verifica è andata a buon fine oppure no.

La struttura del modulo è abbastanza semplice. Ovviamente sei libero di abbellirla con l’uso dei CSS.

Questo modulo pubblicherà gli input dell’utente nella route /verify; potrai utilizzare il numero di telefono nell’input per attivare la richiesta del codice di verifica. Un modulo simile può essere utilizzato anche per le altre 2 routes /check e /cancel.

Gestione degli input dell’utente

Quindi, per gestire gli input degli utenti tramite i moduli web, avrai bisogno di alcune routes per gestire anche le richieste POST. Assicurati di dichiarare bodyparser() prima di ogni route.

Ora che sei in grado di ricevere il numero di telefono del tuo utente, dovrai utilizzare la Verify API per inviargli un codice PIN. Avvia una nuova istanza Nexmo con le tue credenziali API Vonage.

Ci sono 3 funzioni di cui dobbiamo occuparci. La prima è attivare il codice di verifica con la funzione nexmo.verify.request(). Questa richiede il numero di telefono dell’utente e una stringa per il brand name che verrà visualizzato dall’utente come mittente.

Una volta che l’utente ha ricevuto il codice PIN tramite SMS, dovrà inviarlo alla funzione nexmo.verify.check(), in modo che possa essere verificato. Noterai un parametro request_id. Questo valore si ottiene quando il codice PIN è stato attivato con successo. Esistono diversi modi per passare l’ID della richiesta alla funzione nexmo.verify.check(); questo esempio utilizza un campo nascosto nel modulo di controllo (check).

L’ultima funzione offre all’utente la possibilità di annullare la verifica qualora avesse cambiato idea. Questa utilizza la funzione nexmo.verify.control() e, ancora una volta, richiede l’ID richiesta generato dall’attivazione del codice PIN e un valore stringa cancel.

Landing page for demo

Ora è necessario utilizzare queste 3 funzioni nelle routes che abbiamo specificato in precedenza, iniziando da quella che serve per attivare il codice di verifica.

Il ctx.request.body sarà più o meno così:

Puoi prendere il numero di telefono e passarlo alla funzione verify(). Finché si tratta di un numero di telefono valido, il codice di verifica verrà attivato e riceverai una risposta contenente un request_id e status.

Da lì, puoi inviare l’ID della richiesta al frontend per utilizzarlo quando l’utente inserisce il codice di verifica.

The request_id is passed to the frontend

Quando l’utente invia il PIN corretto, sarà necessario inserire sia il PIN che l’ID della richiesta nella funzione check().

Ancora una volta, entrambi questi valori possono essere ottenuti dal ctx.request.body e se il PIN è validato come corretto, riceverai una risposta simile a questa:

È quindi possibile utilizzare il codice di status per determinare quale messaggio si desidera far visualizzare all’utente. Questo esempio utilizza Nunjucks, quindi il markup nella pagina dei risultati potrebbe essere simile a questo:

Verification messages

In questo articolo abbiamo visto in maniera approfondita ogni parte del codice, ma se vuoi vedere come appare l’applicazione nella sua interezza, controlla il codice sorgente su GitHub.

Alcune cose da tenere in considerazione

Questo tutorial è una versione ridotta, che evidenzia solo i passi necessari per l’implementazione dell’autenticazione a due fattori. Ma ci sono molte cose di cui tener conto in un’applicazione reale. Uno dei più importanti è la gestione degli errori. La Verify API restituisce un valore di stato 0 per query riuscite, ma qualsiasi altro valore indica un errore.

Questi errori dovrebbero essere gestiti e l’interfaccia utente sul frontend dovrebbe riflettere tutti i potenziali errori che impediscono la corretta verifica. Potrebbe anche essere una buona idea implementare una sorta di convalida del frontend o persino utilizzare l’API Number Insight di Vonage per garantire che alla Verify API vengano passati solo numeri di telefono validi.

Saperne di più

Se desideri fare di più con queste API, ecco alcuni link che potrebbero esserti utili::

Puoi leggere l’articolo originale in inglese qui How to Add Two-Factor Authentication with Node.js and Koa.js

Leave a Reply

Your email address will not be published.

Get the latest posts from Nexmo’s next-generation communications blog delivered to your inbox.

By signing up to our communications blog, you accept our privacy policy , which sets out how we use your data and the rights you have in respect of your data. You can opt out of receiving our updates by clicking the unsubscribe link in the email or by emailing us at [email protected].