Verbessern Sie Ihre Multifaktor-Authentifizierung mit Vonage APIs und Firebase

Dieser Artikel wurde zuletzt aktualisiert am 4. März 2026

Einführung

In diesem Blogbeitrag zeige ich Ihnen, wie Sie Ihre Multifaktor-Authentifizierung mit Hilfe unserer Vonage Identity Insights API, SIM Swap insightund Verify APIs. Wir verwenden auch Firebase Services zum Speichern unserer Funktionen mit Cloud-Funktionen, Daten in der Cloud Firestore Datenbank, und unsere Web-App mit Firebase-Hosting.

Den Quellcode der Anwendung finden Sie auf unserem GitHub-Repositorium.

Hinweis: Dieser Blogbeitrag fügt Firebase Services zu den bestehenden Verbessern Sie Ihre Multifaktor-Authentifizierung mit der Verify API und SIM Swap Insight. Das Tutorial behandelt sowohl die Erstellung des Servers mit Express als auch dessen Bereitstellung in der Cloud. Sie können diesen früheren Blogbeitrag und das GitHub-Repositorium für ausführliche Erklärungen.

Voraussetzungen

• Ein Vonage Entwickler-Konto

• Node.js und npm sind auf Ihrem Rechner installiert

• Ein Firebase-Projekt wird in der Firebase-Konsole (ich habe mein Projekt account-recovery-demo genannt)

• Firebase CLI installiert

• Ein Code-/Text-Editor

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.

Übersichtsdiagramm und Anwendungsarchitektur

Diese Anleitung zur Wiederherstellung von Accounts zeigt, wie Benutzer sich anmelden, Passwörter zurücksetzen oder ihre Identität verifizieren können, indem sie auf die Web-Front-End-Seite zugreifen. Diese Seite interagiert mit dem Firebase Functions-Backend, um Benutzeranmeldedaten in Firebase Cloud Firestore zu speichern und abzurufen.

Sobald der Benutzer versucht, sein Passwort zurückzusetzen, erhält er einen von der Vonage Verify API generierten einmaligen Verifizierungscode. Dies geschieht jedoch erst, nachdem die SIM-Swap-Details mit den Kommunikationsdienstleistern mithilfe der Vonage Identity Insights API SIM Swap insight überprüft wurden.

Overview DiagramDie Anwendung basiert auf einer Client-Server-Architektur. Der Client verarbeitet die Benutzerinteraktionen über HTML und JavaScript, einschließlich der Eingabe von Telefonnummern und der Übermittlung von Verifizierungscodes. Firebase Hosting stellt die Webanwendung bereit, Firebase Functions übernimmt die serverseitige Logik und Firestore speichert Benutzerdaten und den Verifizierungsstatus.

Einrichten eines Cloud-Funktionen-Projekts

Zuvor, verwaltete die Express-Anwendung Routen und API-Aufrufe direkt in einer Serverumgebung. Mit Firebase Cloud Functions wird jeder Endpunkt, der zuvor in der Express-App definiert wurde, einer bestimmten Cloud-Funktion zugeordnet, indem die Regeln in der Datei firebase.json Datei. Durch dieses Setup wird der Routing-Mechanismus von der Anwendungslogik entkoppelt, sodass jede Funktion unabhängig skaliert und verwaltet werden kann. Firebase verarbeitet eingehende Anfragen automatisch und leitet sie auf der Grundlage der Rewrite-Regeln an die entsprechende Cloud-Funktion weiter, z. B. Sendecode an sendCode oder /anmelden zu Anmeldung. Da sich der Web-Client nun in einer anderen Domäne als der Server befindet, verwenden wir auch CORS (Cross-Origin Resource Sharing).

Wie man das Projekt einrichtet

Sie können dieses Projekt mit Ihrem bevorzugten Programmiereditor bearbeiten. In meinem Fall habe ich Visual Studio Code verwendet, und Firebase Studio unterstützt Firebase-Projekte, so dass es einfach ist, dort zu entwickeln. Nehmen Sie den Editor, der Ihnen am besten gefällt!

1. Sie können mit dem Klonen des GitHub-Repositorium.

2. Installieren Sie die erforderlichen Abhängigkeiten: npm install.

Wie man Firebase einrichtet

Nachfolgend finden Sie die Schritte zur Einrichtung des Projekts; Sie können ein Firebase-Projekt entweder über die Firebase-Konsole oder über die Kommandozeile erstellen. Die Firebase-Dienste, die wir verwenden werden, sind Funktionen, Hosting und Firestore.

• Klicken Sie in der Konsole auf , um ein neues Projekt zu erstellen, geben Sie ihm einen Namen und klicken Sie auf Weiter.

• Wählen Sie aus, ob Sie Analysen verwenden möchten.

• Warten Sie darauf, dass das Projekt erstellt wird.

• Stellen Sie die Abrechnungsart unter dem Zahnrad ⚙ -> Nutzung und Abrechnung -> Details & Einstellungen auf Blaze ein (der Abo-Tarif muss eine Drittanbieter-API verwenden).

• Legen Sie den Speicherort der Google Cloud-Ressource unter ⚙ -> Projekteinstellungen.

Wie man Firebase Deploy-Ziele einrichtet

Legen wir Ihre Einsatzziele. Erstellen Sie eine .firebaserc Datei in Ihrem Projektordner und aktualisieren Sie 'PROJECT_ID' mit Ihrer Projekt-ID. Es gibt eine .firebaserc.example Datei, die zeigt, wo Sie die Datei im Ordner finden können.

// .firebaserc

{

  "projects": {

    "default": "PROJECT_ID"

  }

}

Konfigurieren Sie Ihre Umgebungsvariablen

Es ist nun an der Zeit, die Umgebungsvariablen zu Ihrem Projekt hinzuzufügen.

Aus der Datei /Funktionen/.env.example können Sie die Datei /functions/.env Datei erstellen und die folgenden Umgebungsvariablen einfügen:

# .env

VONAGE_API_KEY=your_api_key VONAGE_API_SECRET=your_api_secret VONAGE_APPLICATION_ID=your_application_id VONAGE_APPLICATION_PRIVATE_KEY=/path/to/your/private.key
PERIOD=72

Anmerkung: Der Secret Manager ist ein sicherer Weg, um Umgebungsvariablen zu importieren. Dieses Tutorial verwendet dotenv, da Cloud Functions für Firebase unterstützt dotenv.

Lokale Tests mit dem Firebase-Emulator

Wenn Sie lokal testen, können Sie die Firebase Lokale Emulator Suite.

1. Initialisieren der Emulatoren firebase init emulators.

2. Starten Sie die Emulatoren firebase emulators:start.

3. Sie finden die URL zum Öffnen der lokalen Webanwendung und der Firestore-Instanz in der Befehlszeile. Öffnen Sie beide Seiten und füllen Sie die Firestore-Instanz auf. Denken Sie daran, dass dies Ihre lokale Firestore-Instanz ist. Sie unterscheidet sich daher von dem, was Sie im aktuellen Projekt in der Cloud-Konsole finden.

Hinweis: Für dieses Projekt habe ich sie in die Datei firebase.json Datei aufgenommen, damit Sie Ihren Emulator an Port 5001 und Firestore an Port 8080 finden können.

Bereitstellen und Ausprobieren Ihrer Webanwendung

Bereitstellen mit Firebase Hosting

Stellen Sie Ihre statischen Dateien (HTML, CSS, JavaScript) auf Firebase Hosting bereit. Stellen Sie sicher, dass die Firebase CLI installiert und in Ihrem Projekt initialisiert ist. Führen Sie zum Bereitstellen den folgenden Befehl aus:

firebase deploy --only hosting

Sie können sehen, dass eine HTML-Seite für Sie in der Befehlszeile generiert wird. In meinem Beispiel lautet die Projekt-ID "account-recovery-demo", und die generierte URL lautethttps://account-recovery-demo.web.app'. Öffnen Sie Ihre Seite!

Cloud-Funktionen für Firebase

Stellen Sie Ihre serverseitige Logik mit Firebase-Funktionen bereit. Stellen Sie sicher, dass die Firebase CLI in Ihrem Projekt installiert und initialisiert ist. Führen Sie den folgenden Befehl zur Bereitstellung aus:

firebase deploy --only functions

Wenn Sie in Ihrer Firebase-Konsole die Registerkarte "Funktionen" aufrufen Firebase-Konsole Projekt gehen, können Sie die vier Funktionen sehen: sendCode, login, verify und simSwap. Wenn Sie die Versionierung und die Protokolle überprüfen müssen, können Sie dies für jede der erstellten Funktionen tun.

Firebase Cloud Firestore Datenbank

Verwenden Sie Firestore, um Benutzerdaten und den Überprüfungsstatus zu speichern. Erstellen Sie eine Sammlung "Credentials" und füllen Sie die Firestore-Felder mit den Credentials-Knoten.

Erstellen Sie jeden Ereignisknoten, der die folgenden stringartigen Felder enthält: password, phone number, request_id und username. Für diese Beispielanwendung haben wir diese sensiblen Felder im Firestore gespeichert. Idealerweise sollten diese in einer realen Anwendung besser gesichert werden, z. B. mit, Geheimnis-Manager.

Cloud Firestore Database Instance

Probieren Sie es aus

Jetzt ist es an der Zeit, die Webanwendung aufzurufen, die Sie mit Firebase-Hosting bereitgestellt haben.

Der Testablauf sollte folgendermaßen aussehen: Stellen Sie sich vor, Sie haben Ihr Passwort vergessen. Klicken Sie auf "Passwort vergessen", um die Wiederherstellung zu starten. Sie werden aufgefordert, Ihre Telefonnummer einzugeben und eine Verifizierung anzufordern.

Wenn die Anwendung feststellt, dass die SIM-Karte kürzlich ausgetauscht wurde, wird eine Warnung angezeigt: Warnung! Eine kürzliche Änderung der SIM-Kopplung im Zusammenhang mit dem mobilen Account des Benutzers ist erfolgt. Fortfahren?" Wenn Sie den Tausch nicht selbst vorgenommen haben und "Nein, ich war es nicht" wählen, ist dies ein Zeichen dafür, dass mit Ihrer Nummer möglicherweise ein Betrug vorliegt. Dies ist ein Hinweis darauf, dass Sie sich bei Ihrem Mobilfunkanbieter melden sollten.

Hinweis: In der Tutorial-Demonstration werden Sie aufgefordert zu bestätigen, dass Sie die SIM-Karte ausgetauscht haben; in einem realen Szenario würde der Benutzer wahrscheinlich aufgefordert werden, den Dienstanbieter für zusätzliche Identitätsprüfungen direkt zu kontaktieren. In ähnlicher Weise könnte dieser Ansatz auf die Multifaktor-Authentifizierung bei der Anmeldung angewandt werden, bei der vor dem Senden des einmaligen Tokens eine Überprüfung stattfindet. Wird ein kürzlich erfolgter SIM-Tausch festgestellt, kann sich der Nutzer direkt an den Dienstanbieter wenden, um weitere Identitätsprüfungen durchzuführen.

Andererseits, wenn Sie Ihre SIM-Karte austauschen und die Option Ja, ich war esgewählt haben, verwendet die App die Verify API, um einen Verifizierungscode an Ihr Telefon zu senden. Geben Sie diesen Code auf dem nächsten Bildschirm ein und legen Sie ein neues Passwort fest. Danach können Sie sich mit Ihren neuen Anmeldedaten bei Ihrem simulierten Bankkonto anmelden.

Schlussfolgerung

Sie haben das Ende dieses Lehrgangs erreicht. Heute haben Sie gesehen, wie Sie Ihre Multi-Faktor-Anwendung verbessern können, indem Sie Firebase Services zu Ihrer Webanwendung hinzufügen.

Zusätzliche Ressourcen

• SMS-Nachrichten mit Cloud-Funktionen für Firebase Gen 2 versenden

• Erstellen eines Terminplaners mit Node, Firebase und Vonage

• Senden und Empfangen von SMS-Nachrichten mit Firebase-Funktionen | One Dev Minute