Hinzufügen der Zwei-Faktor-Authentifizierung mit Node.js und Express

Einführung

Zwei-Faktor-Authentifizierung (2FA) bezieht sich auf ein Muster, bei dem Benutzer zwei Dinge angeben müssen, um ihre Identität zu beweisen: etwas, das sie kennen, wie ein Passwort, und etwas, das sie haben, wie ein Verifizierungs-Token von einem mobilen Gerät.

Dieses Tutorial beschreibt, wie man ein Verifizierungs-Token-System mit der Vonage Verify API und Express.js. Den kompletten Beispielcode finden Sie auf dem Vonage Community GitHub Repository.

Der Antrag umfasst drei Seiten:

1. eine Einstiegsseite, auf der eine zu verifizierende Handynummer abgefragt wird

2. eine Seite, auf der die Benutzer den ihnen zugesandten Code eingeben

3. eine Seite, die anzeigt, ob ihr Code korrekt war und die Überprüfung erfolgreich war

Workflow Overview

Voraussetzungen

• Node.js auf Ihrem Rechner installiert

• Vonage API-Konto

  Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

  

  Sind Sie bereit, mit dem Bau zu beginnen?

  Erleben Sie nahtlose Konnektivität, Echtzeit-Messaging und kristallklare Sprach- und Videoanrufe - alles auf Knopfdruck.

Projekt einrichten

Umgebungsvariablen hinzufügen

Erstellen Sie eine .env-Datei in Ihrem Projektverzeichnis, und fügen Sie die folgenden Umgebungsvariablen hinzu.

• VERIFY_BRAND_NAME: Name in der Nachricht, um zu erklären, wer die Telefonnummer bestätigt

• VONAGE_APPLICATION_ID: Ihre Vonage Application ID

• VONAGE_APPLICATION_PRIVATE_KEY_PATH: Fügen Sie die soeben heruntergeladene private Schlüsseldatei in Ihr Projektverzeichnis ein, und geben Sie dann den Pfad zu dieser Datei in diesem Feld an (z. B, ./private_your-app-id-here.key)

Richten Sie Ihr Node-Projekt ein

Erstellen Sie ein neues Verzeichnis, öffnen Sie es in einem Terminal und installieren Sie dann die Abhängigkeiten wie folgt:

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

Werfen wir einen kurzen Blick darauf, was jede dieser Abhängigkeiten für Ihr Projekt bedeutet.

1. dotenv lädt die Umgebungsvariablen aus der gerade erstellten .env-Datei.

2. express ist ein Web-Framework für Node.js, das HTTP-Anfragen und Antworten verarbeitet. Es wird verwendet, um Ihren Webserver zu erstellen, Routen zu definieren (/, /verify, /check) und die Bearbeitung von Formularübermittlungen.

3. nunjucks ist eine Template-Engine, die HTML-Seiten dynamisch wiedergibt. Sie ermöglicht es Ihnen, HTML-Vorlagen mit Variablen und Logik zu erstellen und diese dann mit Daten von Ihrem Server zu befüllen.

4. @vonage/server-sdk ist das wichtigste Vonage SDK, das den Client für die Interaktion mit den Vonage APIs bereitstellt. Es übernimmt die Authentifizierung mit Ihrer Anwendungs-ID und Ihrem privaten Schlüssel.

5. @vonage/verify2 stellt Konstanten und Typen bereit, die speziell für die Verify v2 API von Vonage gelten.

Als nächstes erstellen Sie eine index.js Datei in Ihrem Projektverzeichnis und richten Sie diese Abhängigkeiten ein:

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 erlaubt die Übergabe von Daten an Vorlagen mit der {{ variable }} Syntax. Es ist so eingerichtet, dass es automatisch die Dateien im Verzeichnis views und ist mit der Express-Anwendung verknüpft, die in app.

Erstellen Sie die Landing Page

Erstellen Sie ein Verzeichnis namens views und eine index.html Datei darin. Dies wird unsere Landing Page sein.

{{ message }}

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

Als nächstes müssen wir eine Route in index.js zum Rendern der index.html Ansicht zu rendern:

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

Führen Sie node index.js in Ihrem Terminal aus und öffnen Sie localhost:3000 in Ihrem Browser. Beachten Sie, dass die Meldung oben auf der Seite anstelle der {{ message }} im Code.

A webpage showing the form and the Hello World message

Verifizierungsanfrage erstellen

Das Formular auf index.html sendet eine POST-Anfrage an /verify wenn es abgeschickt wird. Erstellen Sie eine neue Route, um dies zu behandeln in 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 });
 }
});

In diesem Beispiel ist der Workflow so definiert, dass ein Verifizierungscode über den SMS-Kanal gesendet wird. Andere unterstützte Kanäle sind Stille Authentifizierung, RCS, WhatsApp, Voice und E-Mail. Sie können auch Workflows mit mehreren hintereinander geschalteten Kanälen als Fallback-Mechanismus definieren.

Sie könnten beispielsweise Voice als zweiten Schritt des obigen Workflows als Eskalationsmethode hinzufügen oder die stille Authentifizierung ausprobieren, um das Verfahren zu vereinfachen. Lesen Sie mehr über Workflows in den Verify API-Dokumenten.

Prüfen Sie den Code

Sobald der Antrag gestellt wurde, wird die check.html gerendert, so dass wir diese als nächstes erstellen müssen. Hinzufügen einer check.html Datei im Ordner Ansichten Verzeichnis eine Datei check.html mit dem folgenden Inhalt hinzu:

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

Neben dem Code wird auch die Anfrage-ID benötigt, um zu überprüfen, ob der Code korrekt ist. Mit der gleichen Methode wie bei {{message}}wird der Wert des verborgenen Feldes requestId dynamisch bereitgestellt.

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

Das Absenden dieses Formulars sendet eine POST-Anfrage an den /check Endpunkt gesendet, wie er im action Attribut definiert ist.

Als nächstes müssen wir den neuen /check Endpunkt in 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 });
 }
});

Wenn die Rückmeldung status "completed" ist, war die Prüfung erfolgreich und die Verifizierung ist abgeschlossen. Erstellen Sie eine success.html Datei im Ordner views Ordner zu feiern:

<h1>🎉 Success! 🎉</h1>

Führen Sie node index.js in Ihrem Terminal aus und öffnen Sie localhost:3000 in Ihrem Browser, um Ihren fertigen 2FA-Workflow zu testen! Denken Sie daran, Ihre Telefonnummer im E.164-Formateinzugeben, z. B. 447401234567.

Nächste Schritte

Bei der Produktion gibt es einige zusätzliche Überlegungen, die Sie in Betracht ziehen sollten:

• robustere Behandlung von Fehlern und fehlgeschlagenen Statuscodes

• die Möglichkeit, laufende Überprüfungen abzubrechen

• die Möglichkeit für die Nutzer, ihren bevorzugten Kommunikationskanal für die Übermittlung des Codes anzugeben

• die Benutzereingabe validieren, um sicherzustellen, dass nur gültige Telefonnummern an die Verify API übergeben werden

Schlussfolgerung

Das war's! In diesem Blogbeitrag haben Sie gelernt, wie Sie einen einfachen 2FA-Workflow per SMS mit der Vonage Verify API implementieren.