Implementieren von WebAuthn in Next.js: Ein praktischer Leitfaden

Willkommen zurück zu unserer WebAuthn-Serie. In unseren vorherigen Artikeln haben wir die Grundlagen von WebAuthn und einen 101-Leitfaden behandelt. Wenn du gerade erst zu uns stößt, schau dir diese grundlegenden Artikel an, um auf dem neuesten Stand zu sein.

Heute krempeln wir die Ärmel hoch, um Theorie in die Praxis umzusetzen. Wir nutzen die Kraft von Next.js mit der neuen Funktion „Serveraktionen“. Unser Ziel? WebAuthn in einer Next.js-Anwendung implementieren und bereit für WebAuthn sein.

Bevor wir in die Code-Tiefe eintauchen, hier ein Vorgeschmack darauf, was dich am Ende der Reise erwartet - eine vollständig funktionale Demo-Website. Erkunde sie, um WebAuthn in Aktion zu sehen und einen Vorgeschmack darauf zu bekommen, was du bauen wirst. Auf dieser Demo-Website kannst du neue Benutzer registrieren und dich mit den gerade registrierten Passkeys einloggen.

Und für diejenigen, die lieber eine Karte zur Hand haben, haben wir dich abgesichert! Der gesamte Code, den wir besprechen werden, ist in einem öffentlichen GitHub-Repository verfügbar. Dieses Repository ist dein Begleiter, der den vollständigen Quellcode unserer Implementierung bietet.

Bereit für dieses spannende Abenteuer? Lass uns beginnen!

Voraussetzungen#

Bevor wir beginnen, stellen wir sicher, dass wir alles haben, was wir brauchen:

1. Ein Next.js-Projekt: Wenn du noch kein Next.js-Projekt eingerichtet hast, hier ist ein schneller Leitfaden, um loszulegen.
2. Simple WebAuthn Library: Mehrere Pakete, um den Aufwand zur Integration von WebAuthn in eine Website zu reduzieren. Verwende deinen bevorzugten Paketmanager, um @simplewebauthn/browser, @simplewebauthn/server und @simplewebauthn/typescript-types zu installieren.
3. Session Storage: Wir verwenden Session Storage, um WebAuthn-Challenges zu verwalten. Wir nutzen vercels KV, um dies zu erreichen.
4. Eine Benutzerdatenbank: Ein Ort, um die registrierten Passkeys unserer Benutzer zu speichern. Um es einfach zu halten, verwenden wir vercels KV zu Demonstrationszwecken.

Mit unseren Werkzeugen und Materialien in der Hand sind wir bereit, mit dem Bau zu beginnen.

Implementierung der Session-Speicherung mit Vercels KV#

Einrichtung der KV-Speicherung#

Es ist einfach, eine KV-Speicherung sowohl in der Produktion als auch in der lokalen Entwicklung zu initialisieren. Folge diesem Leitfaden, um einen KV-Speicher mit deinem Projekt zu verbinden und die Umgebungswerte abzurufen: https://vercel.com/docs/storage/vercel-kv/quickstart

Implementiere Sitzungsverwaltungsfunktionen#

Wir haben zwei Funktionen exportiert:

• getCurrentSession: Verwende den Cookie-Helfer von Next.js, um eine Sitzung für die aktuelle Anfrage zu erstellen und den Wert zurückzugeben.
• updateCurrentSession: Speichert Daten in der aktuellen Sitzung.

Implementierung der Benutzerdatenbank mit Vercels KV#

Ähnlich wie bei unserer Sitzung-Implementierung, lass uns eine einfache Benutzerdatenbank implementieren.

Wir haben Funktionen erstellt, um Benutzer nach E-Mail zu finden und Benutzerdaten nach E-Mail zu aktualisieren. Denke daran, dass dies nur zur Demonstration dient. Im echten Produkt werden die Benutzerdaten normalerweise in einer Datenbank gespeichert.

Vorbereitung der WebAuthn-Funktionen#

Bevor wir fortfahren, sehen wir uns das Diagramm des Registrierungs- und Authentifizierungsflusses an:

Wie du siehst, müssen wir 2 Funktionen vorbereiten:

1. generateWebAuthnRegistrationOptions
2. verifyWebAuthnRegistration

Ähnlich wie bei der Registrierung benötigt auch der Login 2 Funktionen:

1. generateWebAuthnLoginOptions
2. verifyWebAuthnLogin

Hier ist der Code:

Baue die Webseite#

Wir haben die Vorbereitung abgeschlossen, lass uns die Seite bauen:

Fazit#

Herzlichen Glückwunsch, dass du die Komplexität der Implementierung von WebAuthn in einer Next.js-Anwendung gemeistert hast. Wenn wir zum Schluss kommen, ist es wichtig, einige entscheidende Überlegungen für den Einsatz in einer Produktionsumgebung anzusprechen.

Wichtige Überlegungen für den Produktionseinsatz#

1. Anpassung der Benutzerkennung: In diesem Tutorial haben wir eine E-Mail-Adresse als Benutzerkennung verwendet. In einer Produktionssituation könntest du jedoch eine andere Kennung verwenden, wie z .userId oder username.
2. Datenbankintegration: Während wir Vercels KV als einfache Demonstration des Session- und Benutzerdatenmanagements genutzt haben, sollte eine realistische Anwendung ein robusteres Datenbanksystem integrieren (wie PostgreSQL, MongoDB usw.).
3. Anpassung der WebAuthn-Optionen: Die WebAuthn-Optionen, die wir untersucht haben, sind ein Ausgangspunkt. Abhängig von den Anforderungen und Sicherheitsrichtlinien deiner Anwendung musst du möglicherweise diese Einstellungen anpassen. Konsultiere die WebAuthn-Dokumentation und die Dokumentation der Simple WebAuthn Bibliothek für Hinweise zur Anpassung dieser Optionen an deine spezifischen Bedürfnisse.

Vielen Dank, dass du uns auf diesem Bildungsabenteuer begleitet hast. Auch in diesem minimalen Beispiel ist die Integration von WebAuthn keine einfache Aufgabe, es gibt eine andere Möglichkeit, versuche WebAuthn in Logto's MFA: