Hinzufügen der Zwei-Faktor-Authentifizierung (2FA) zu Ihren Node.JS-Webanwendungen

Dieses Tutorial ist Teil der Serie "Erste Schritte mit Vonage APIs und Node.js". Links zu früheren Tutorials finden Sie am Ende des Beitrags.

Bei Entwicklern von Apps und Diensten wird die Verwendung der Zwei-Faktor-Authentifizierung (2FA) zur Überprüfung der Benutzeridentität immer beliebter, da Sicherheitsverletzungen im Internet und Betrugsfälle zunehmen. Durch die zusätzliche Sicherheitsebene der 2FA werden Ihre Apps nicht nur zuverlässiger, sondern auch vertrauenswürdiger für Ihre Nutzer.

In diesem Tutorial erfahren Sie, wie Sie 2FA für Ihre Webanwendungen und -dienste implementieren können. Sehen Sie sich den Quellcode für Front-End- und Node-Code auf GitHub.

Two Factor Authentication

Einrichten einer Webanwendung

Im Gegensatz zu den vorherigen Tutorials zeigt dieses Tutorial, wie man eine komplette Web-App erstellt, sowohl das Frontend als auch das Backend, und wie man ein App-Projektverzeichnis erstellt! Richten Sie also zunächst die App-Struktur wie folgt ein:

Da wir Node.js für das Backend verwenden, führen wir den Befehl, npm init um Ihre Anwendung zu konfigurieren.

Dann installieren Sie die benötigten Module - nexmo, express, body-parserzusammen mit einer View-Templating-Engine Ihrer Wahl. In diesem Lernprogramm verwende ich ejs:

Einrichten eines Servers

Verwenden Sie nun das Express.js-Framework, um ein Skelett der Anwendung zu erstellen, und starten Sie dann einen Server. Unter app.jsfügen Sie die Module für den Betrieb eines Servers sowie den Web-Einstiegspunkt (index.html) ein.

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');
});

Führen Sie das Node-Skript aus und Ihre Webanwendung sollte lokal auf http://localhost:5000 .

Erstellen eines einfachen Webformulars

Lassen Sie uns nun mit dem HTML-Code arbeiten, um ein einfaches Formular zu erstellen, das die Telefonnummer eines Benutzers annimmt und absendet:

Index.html

<form action="/register" method="post"><input name="number" required="" type="tel" placeholder="18005551234" />
  <input type="submit" value="Register" />
</form>

Dadurch erhalten Sie ein Zahleneingabefeld und eine Schaltfläche.

A simple form input

Wie Sie am action Attribut des formzu sehen ist, wird der in das Feld eingegebene Wert an das Feld yourapp/register.

Als Nächstes kümmern wir uns um den Back-End-Code, um den Wert aus dem Formular per POST zu erhalten.

app.js

app.post('/register', (req, res) => {
  let phoneNumber = req.body.number;
  //… will send a SMS with a PIN code to the number!
});

Senden eines 2FA-Verifizierungscodes

Jetzt werden wir die Vonage Verify API mit der Node.js-Bibliothek verwenden, um einen PIN-Code an die Telefonnummer zu senden.

Binden Sie zunächst das Nexmo-Modul ein und instanziieren Sie es mit Ihren Vonage-Anmeldedaten:

const Nexmo = require('nexmo');
const nexmo = new Nexmo({
  apiKey: YOUR_API_KEY,
  apiSecret: YOUR_API_SECRET
});

Ändern Sie dann die /register Route durch Hinzufügen der nexmo.verify.request Methode:

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);
      }
    }
  });
});

In diesem Szenario sendet die API dem Benutzer eine 4-stellige PIN, aber wenn Sie eine 6-stellige PIN senden möchten, übergeben Sie den code_length Parameter auf 6 zusammen mit dem nexmo.verify.request Aufruf. Sie können auch zusätzliche Parameterübergeben, wie zum Beispiel pin_expiry.

Sobald ein PIN-Code erfolgreich an die Telefonnummer gesendet wurde, laden wir eine weitere Seite (verify.html) mit einem neuen Formularfeld:

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

Beachten Sie, dass es ein verstecktes Feld mit dem Symbol requestIddas beim Erfolgs-Callback mit der Verify API gesendet wurde, und Sie benötigen die ID, um den PIN-Code zu verifizieren.

Als nächstes gehen Sie zurück zur app.js und fügen Sie die /verify Route hinzu. Prüfen Sie den PIN-Code mit der nexmo.verify.check Methode:

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
      }
    }
  });
});

Wenn die API den Statuscode 0 zurückgibt, hat sie die PIN erfolgreich überprüft.

Um die Benutzerfreundlichkeit zu verbessern, sollten Sie den Status auch in der Benutzeroberfläche anzeigen. Laden Sie zum Beispiel bei einem erfolgreichen Rückruf eine weitere HTML-Seite mit der Meldung "Account Verify". Außerdem ist es eine gute Idee, alle Fehlerzustände in der Benutzeroberfläche Ihrer App zu behandeln. Wenn der Benutzer z. B. einen falschen PIN-Code eingibt, geben Sie nicht nur den Fehlertext zurück (wie im obigen vereinfachten Codebeispiel), sondern zeigen Sie diesen Text in der Benutzeroberfläche an.

Sie finden den gesamten Code in der GitHub-Repositorium und den Beispielcode 2fa.js (der die vollständige Version des app.js-Codes ist, den Sie in diesem Tutorial erstellt haben) im Repo!

Sie finden alle Verify API-Fehlerstatuscodes auch unter https://docs.nexmo.com/verify/api-reference/api-reference#check.

Mehr erfahren

API-Referenzen und Tools

• Verify API

• Vonage-Client für Node.js

Vonage Einführungshandbuch für Node.js

• Wie man SMS-Nachrichten mit Node.js und Express versendet

• Empfangen von SMS-Nachrichten mit Node.js und Express

• Wie man eine SMS-Zustellungsbestätigung von einem Mobilfunkanbieter mit Node.js empfängt

• Wie man mit Node.js einen Text-to-Speech-Anruf tätigt

• Wie man einen Anruf mit Node.js empfängt

• Anrufe mit Node.js aufzeichnen

• Wie man einen Proxy-Anruf für ein privates Gespräch mit Node.js tätigt