WebAuthn und Passkeys bieten eine sichere, passwortfreie Alternative zu herkömmlichen Authentifizierungsmethoden und erhöhen sowohl die Benutzerfreundlichkeit als auch die Sicherheit. Wie sich diese modernen Technologien nahtlos in Webanwendungen integrieren lassen, wollen wir anhand praxisnaher Beispiele mit PHP und JavaScript nachvollziehen – für ein reibungsloses und sicheres Log-in-Erlebnis.

Auf wie vielen Websites hast du schon einmal ein Konto angelegt? Wahrscheinlich sind es mehr, als du mit eindeutigen Passwörtern verwalten kannst. Dieses Problem ist weit verbreitet. Viele greifen daher auf Passwortmanager zurück, die entweder im Webbrowser integriert sind oder als eigenständige Dienste angeboten werden. Doch selbst wenn du dir sicher bist, ein starkes Passwort vergeben zu haben, weißt du nie genau, wie die Website dein Passwort speichert. In der Vergangenheit wurden sowohl große als auch kleine Websites gehackt und die gefundenen Passwörter geleakt. Und da Passwörter oft wiederverwendet werden, kann ein solcher Leak zu weiterem Schaden auf anderen Seiten führen, auf denen dasselbe Passwort verwendet wird.

Um dieses Risiko zu verringern, wurde die Zwei-Faktor-Authentifizierung entwickelt. Aber auch diese Methode hat ihre Schwächen, etwa wenn eine Telefonnummer umgeleitet wird. Zudem ist die die Zwei-Faktor-Authentifizierung für Benutzer oft unbequem, z. B. wenn man erst das Handy aus einem anderen Raum holen muss.

Das sind die Herausforderungen für die Endnutzer. Nun sind wir aber Webentwickler, und als solche dafür verantwortlich, dass unsere Webanwendungen sowohl sicher als auch benutzerfreundlich sind. Es kann sehr aufwendig sein, ein Authentifizierungssystem für eine Website zu implementieren, das alle notwendigen Funktionen wie das Zurücksetzen vergessener Passwörter, Zwei-Faktor-Authentifizierung und vieles mehr bietet. Da muss es doch einen besseren Weg geben! Hier kommen das WebAuthn-Protokoll und Passkeys ins Spiel. WebAuthn [1] hat derzeit eine Reichweite von 98 % aller Webbrowser, sodass jetzt ein idealer Zeitpunkt ist, das Protokoll zu implementieren, da wir sicher sein können, dass unsere Arbeit von den meisten Browsern unterstützt wird.

Dieser Artikel soll ein grundlegendes Verständnis dafür vermitteln, wie ein System mit WebAuthn und Passkeys funktioniert und wie es in einer Webanwendung implementiert werden kann. Am Ende sollte jeder in der Lage sein, ein einfaches Benutzerkonto und ein Log-in zu entwickeln und die Funktionsweise zu verstehen, um dann in spezifischere Anwendungsfälle einzutauchen.

Die Vogelperspektive

Beginnen wir mit einem groben Überblick. Für die von mir entwickelten Anwendungen nutze ich ein PHP-Framework (CodeIgniter) mit JavaScript-Code auf der Clientseite. Wenn jemand ein Konto erstellen möchte, gibt er einen Benutzernamen ein (idealerweise eine E-Mail-Adresse), der an das PHP-Backend gesendet wird, um eine Anforderung zur Erstellung von Zugangsdaten zu generieren. Das Backend antwortet, und diese Antwort wird genutzt, um die Zugangsdaten zu generieren, wobei der Browser und das Gerät des Benutzers die Verarbeitung übernehmen. Anschließend werden die Zugangsdaten zurück an das PHP-Backend gesendet, um sie zu verifizieren und in der Datenbank zu speichern.

Später, wenn sich der Benutzer anmelden möchte, kann er einfach auf eine Schaltfläche Login (mit Passkey) klicken. Dadurch wird eine Anfrage an das PHP-Backend gesendet, um die Anmeldung vorzubereiten. Die Antwort des Backend wird genutzt, um die mit der Website verknüpften Zugangsdaten vom Browser und dem Gerät des Benutzers abzufragen. Sobald der Benutzer diesen Prozess abgeschlossen hat, wird die Antwort zur Verifizierung an das PHP-Backend zurückgesendet. Ist die Verifizierung erfolgreich, wird der Benutzer eingeloggt.

Je nach Ökosystem des Benutzers (Apple, Google, Microsoft usw.) werden die erstellten Zugangsdaten sicher auf dem Gerät gespeichert und mit dem Benutzerkonto des Systems synchronisiert. Wenn der Benutzer beispielsweise Safari auf einem iMac verwendet, um das Konto zu erstellen, werden die Zugangsdaten in Apples Passwort-App gespeichert und mit dem iCloud-Konto des Benutzers synchronisiert. Dies stellt sicher, dass die Zugangsdaten dem Benutzer unabhängig vom verwendeten Gerät zur Verfügung stehen. Wenn der Benutzer später nach Hause geht und sein iPad verwendet, um auf die Webanwendung zuzugreifen, kann er sich einfach mit den zuvor auf dem iMac erstellten Zugangsdaten anmelden.

Erzeugen des Passkey

Tauchen wir ein wenig in die Details ein. Im Backend verwende ich gerne die lbuchs/WebAuthn-Bibliothek [2], die auf GitHub zu finden ist. Sie vereinfacht und bündelt viele der Prozesse.

Unsere Implementierung beginnt damit, dass ein Benutzer ein Konto auf unserer Website erstellen möchte. Für jede neue anonyme Sitzung legen wir auf unserer Seite ein Gastkonto an und verknüpfen seine ID-Nummer mit dieser Sitzung. Jedes Mal, wenn ein Benutzer einen Artikel zu seinen Favoriten hinzufügen, etwas in den Warenkorb legen, ein Konto erstellen oder eine andere Aktion durchführen möchte, haben wir bereits einen User registriert. Wenn der Benutzer ein Konto mit einem Passkey erstellen möchte, können wir diese ID-Nummer verwenden, um sie in den Anmeldedaten zu speichern, was das spätere Abrufen erleichtert.

Wenn die Anwendung noch keine Benutzerkonten eingerichtet hat, kann man einfach einen GUID (Globally Unique Identifier) generieren und mit dem Benutzernamen oder der E-Mail-Adresse verknüpfen. Wenn wir später den Benutzerdatensatz anlegen, können wir diesen GUID verwenden. Wer mit einer relationalen Datenbank arbeitet, sollte beachten, dass Benutzer mehrere Passwörter haben können. Die ideale Konfiguration in diesem Fall ist eine Benutzertabelle und eine Passkey-Tabelle, wobei die Passkey-Tabelle eine Fremdschlüssel-user_id enthält, die...