Passkey-Pionier
So ergänzen Sie Passkey-Logins in eigenen Webdiensten
Passkeys sind sicherer als Passwörter und alltagstauglicher als bisherige Authentifizierungsverfahren auf FIDO2-Basis. Ob sie sich durchsetzen, hängt davon ab, ob genug Webdienste die bequemen Schlüssel akzeptieren. Wenn Sie eigene Webanwendungen betreiben oder entwickeln, können Sie schon heute dazu beitragen.
Bei Google, Apple, Microsoft, GitHub und weiteren großen Anbietern können Sie sich schon jetzt bequem und sicher mit Passkeys anmelden. Kein Wunder, immerhin sind einige dieser Unternehmen Teil der FIDO-Allianz, die bereits seit Jahren an der passwortlosen Authentifizierung tüftelt. Viele andere Webdienste dürften in nächster Zeit nachziehen. Vielleicht betreiben Sie ebenfalls Webdienste, beispielsweise einen Blog auf einem Raspi, auf dem Nutzer Beiträge kommentieren. Oder eine Nextcloud-Instanz auf einem Homeserver, auf der Freunde und Familie Dateien austauschen. Oder Sie betreuen Dienste für Ihr Unternehmen. In diesem Artikel geben wir einen Überblick, welche Möglichkeiten Sie haben, um Passkeys in bestehende Webanwendungen zu integrieren.
Die gute Nachricht vorweg: Das Rad müssen Sie dazu nicht unbedingt neu erfinden. Weil Passkeys auf das Authentifizierungsverfahren FIDO2 aufbauen, das Webdienste und Anwendungen beispielsweise über das WebAuthn-API des Browsers verwenden, können Sie Passkeys mit vielen bestehenden WebAuthn-Implementierungen nutzen. Wenn das System die WebAuthn-Funktion „Resident Keys“ – auch „Discoverable Credentials“ genannt – unterstützt, können Sie neben dem Passwort auch auf einen Nutzernamen beim Login verzichten.
Passkeys in WordPress
Zu den populärsten Webdiensten, die Nutzer in Eigenregie betreiben, gehört das Content-Management-System (CMS) WordPress. Es ist oft die erste Wahl für Blogs und Homepages und verfügt Dank der großen Nutzer- und Entwicklergemeinde über eine umfangreiche Sammlung an Plug-ins, mit denen sich der Funktionsumfang erweitern lässt. Dazu gehört auch das kostenlose „WP-WebAuthn“, mit dem Sie Ihrer WordPress-Instanz im Handumdrehen WebAuthn beibringen und damit auch Passkeys.
Klicken Sie im WordPress-Menü „Plugins“ auf „Add New“, um nach WP-WebAuthn zu suchen. Nachdem Sie das Plug-in installiert haben, müssen Sie es noch aktivieren. In seinen Einstellungen können Sie festlegen, ob der Login via WebAuthn bevorzugt werden soll (Prefer WebAuthn). Das Passwort-Login bleibt als Rückfallebene erhalten. Mit der Option „WebAuthn Only“ verbieten Sie das Login mit Nutzername und Passwort. Achtung: Nutzer, die noch keinen FIDO2-kompatiblen Authenticator oder einen Passkey registriert haben, können sich dann nicht mehr anmelden. Um die Bequemlichkeit, die Passkeys bieten, voll auszuschöpfen, sollten Sie die Option „Allow to login without username“ aktivieren.
Um sich künftig mittels Passkey auszuweisen, müssen Sie und bestehende Nutzer in den Profileinstellungen einen Authenticator registrieren. Geben Sie dem Authenticator einen Namen und klicken dann auf „Start Registration“, um einen Passkey zu erstellen. Welche Möglichkeiten und Plattformen es gibt, erklärt der Artikel ab Seite 14. Wenn Sie in den Einstellungen des Plug-ins „WebAuthn Only“ aktiviert haben, sollten Sie mit der Funktion „Verify Authenticator“ prüfen, ob das Login mittels Passkey problemlos funktioniert, bevor Sie sich abmelden.
Wir haben das mit der aktuellen WordPress-Version 6.2 getestet. Damit Sie das WebAuthn-Plug-in nutzen können, braucht Ihre WordPress-Seite ein TLS-Zertifikat, dem Ihr Browser vertraut. Außerdem müssen die PHP-Erweiterungen mbstring und gmp installiert sein. Falls die fehlen, können Sie die Erweiterungen über den Paket-Manager Ihrer Linux-Distribution nachinstallieren. Auf einem Host mit Ubuntu 22.04 LTS erledigt das der folgende Befehl:
sudo apt install php-mbstring php-gmp
Nextcloud öffne dich!
In Nextcloud Hub 3 (25) gehört WebAuthn bereits zu den Bordmitteln und bedarf keiner zusätzlichen Installation. Sie konfigurieren WebAuthn, indem Sie die „Persönlichen Einstellungen“ aufrufen und anschließend in das Menü „Sicherheit“ wechseln. Unter dem Punkt „Authentifizierung ohne Passwort“ können Sie WebAuthn-Geräte hinzufügen. Um die Aktion auszuführen, müssen Sie einmalig Ihr aktuelles Passwort eingeben. Leider unterstützt die WebAuthn-Implementierung in Nextcloud nicht das Feature „Resident Keys“, sodass Sie beim Anmelden weiterhin Ihren Benutzernamen eingeben und damit auf ein Stück Passkey-Komfort verzichten müssen.
Ein Fallstrick ist uns begegnet, als wir in unserer Nextcloud-Instanz zusätzlich zur hauseigenen passwortlosen Anmeldung die App „Two-Factor WebAuthn“ installiert hatten. Für den ersten Schritt fragte Nextcloud unseren Nutzernamen ab und akzeptierte einen Passkey, den wir mittels „Authentifizierung ohne Passwort“ registriert hatten. Danach verlangte die App im zweiten Schritt einen FIDO2-kompatiblen zweiten Faktor, aber die Anmeldung war auf diesem Weg nicht möglich. Wir raten aus diesem Grund aktuell davon ab, den zweiten Faktor zusätzlich zum Passkey zu nutzen.
Multipass
Populäre Webanwendungen wie Nextcloud und WordPress bringen fertigen Code mit, um Passkeys mit dem WebAuthn-API zu nutzen. Aber was ist, wenn WebAuthn in Ihrer selbst gehosteten Anwendung nicht verfügbar ist und sich nicht nachrüsten lässt? Dann hilft ein Autorisierungs- und Authentifizierungsserver wie Keycloak. Das Open-Source-Projekt kümmert sich als zentraler Single-Sign-On-Dienst und Identity-Provider um den Anmeldevorgang bei Ihrer Webanwendung, auf Wunsch auch mit einer passwortlosen Methode wie Passkeys. Die Brücke zur Nutzerverwaltung der Anwendung schlägt Keycloak beispielsweise mit dem OpenID-Connect-Protokoll.
Keycloak ist ein sehr komplexes Werkzeug, wir können deshalb nur die ersten Schritte schildern. Unter ct.de/yhk8 haben wir ein GitHub-Repository mit einer kurzen Installationsanleitung verlinkt, wenn Sie Keycloak und die Anmeldung an externen Anwendungen mittels Passkeys ausprobieren wollen. Melden Sie sich zunächst als Administrator bei Keycloak an und erstellen einen neuen Realm, den Sie beispielsweise „Passwordless-WebAuthn“ nennen.
Wählen Sie dann im Panel auf der linken Seite das Menü „Authentication“. Ganz oben in der Liste steht der Standard-Authentifizierungsflow „browser“, der als Vorlage dient. Duplizieren Sie „browser“ über die Schaltfläche mit den drei Punkten und geben dem neuen Flow einen Namen, beispielsweise „Mein Authflow“. Löschen Sie im neuen Flow die Einträge „Mein Authflow forms“ und „Kerberos“, sodass nur noch die Einträge „Cookie“ und „Identity Provider Redirector“ übrig bleiben.
Legen Sie dann über die Schaltfläche „Add sub-flow“ einen neuen Eintrag an, den Sie beispielsweise „WebAuthn + Passwordless“ nennen. Fügen Sie dem neuen Sub-Flow dann über das Plus-Symbol zwei weitere Schritte (Add step) hinzu. Den ersten Schritt nennt Keycloak „Username form“, den zweiten „WebAuthn Passwordless Authenticator“. Setzen Sie bei den Einträgen „WebAuthn + Passwordless“, „Username Form“ und „WebAuthn Passwordless Authenticator“ jeweils die Bedingung „Required“.
Ihr Authentifizierungsflow sollte jetzt so aussehen wie im Keycloak-Screenshot auf dieser Seite. Zum Schluss klicken Sie in der oberen rechten Ecke auf „Action“ und machen den Flow über „Bind flow“ zum Standard. Aktivieren Sie dann im Menü „Authentication“ im Reiter „Required actions“ beim Punkt „WebAuthn Register Passwordless“ die Option „Set as default action“. Schlussendlich aktivieren Sie im Menü „Realm settings“ im Reiter „Login“ die Option „User registration“.
Let’s Passkey!
Damit haben Sie die Grundlagen geschaffen, um über Keycloak bei einer externen Webanwendung einen neuen Account anzulegen, einen Passkey zu registrieren und sich anschließend damit zu authentifizieren. Um das Prinzip zu demonstrieren, greifen wir zu einer Keycloak-Demo-App, die als Client dient. Wechseln Sie in das Menü „Clients“ und legen dort mit dem Assistenten einen neuen Client an. Im ersten Schritt ist mit OpenID Connect bereits der korrekte Typ vorausgewählt. Tragen Sie bei Client ID einen Namen ein, beispielsweise „cttest“. Im zweiten Schritt müssen Sie nichts ändern. Tragen Sie im dritten Schritt bei „Root URL“ die Adresse https://keycloak.org/app der App ein und speichern den Client.
Rufen Sie in Ihrem Browser jetzt die Beispiel-App keycloak.org/app auf. Tragen Sie unter „Keycloak URL“ die Adresse Ihrer Keycloak-Instanz ein. Der Realm in Keycloak heißt „Passwordless-WebAuthn“, der Client „cttest“. Wenn Sie auf die Schaltfläche „Sign in“ klicken, springt Ihr Keycloak-Flow dazwischen und bietet Ihnen an, sich einzuloggen oder einen neuen Account anzulegen. Geben Sie die Daten für den neuen Account ein, registrieren einen Passkey und loggen sich damit ein. Ein Blick in das Menü „Users“ bestätigt, dass Keycloak seine Aufgabe als zentrale Nutzerverwaltung gewissenhaft erledigt. Damit Sie Keycloak weiteren Webanwendungen vorschalten können, müssen diese entweder OpenID Connect oder SAML beherrschen und Sie müssen die nötigen Endpunkte konfigurieren. Das klappt beispielsweise mit der Slack-Alternative Rocket.Chat oder dem Wiki Bookstack.
Eigene Apps zukunftssicher machen
Bei den Webanwendungen, denen Sie bis jetzt Passkeys beigebracht haben, handelt es sich durchweg um etablierte Open-Source-Projekte. Vielleicht arbeiten Sie aber stattdessen selbst an einer Web-App und wollen die fit für die Passkey-Zukunft machen? Damit wären Sie einigen großen Anbietern sicher einen Schritt voraus. In diesem Fall sollten Sie einen Blick in das GitHub-Repository herrjemand/awesome-webauthn werfen, das wir unter ct.de/yhk8 verlinkt haben. Es sammelt nützliche Ressourcen für Entwickler, die sich für die Implementierung von Passkeys und WebAuthn interessieren, beispielsweise Programmbibliotheken für Server und Clients, Hard- und Software-Authentikatoren, Entwicklungswerkzeuge, Tutorials, Demos und mehr.
Fortgeschrittene Entwickler können mit den passenden Bibliotheken für ihre Anwendung WebAuthn und Passkeys in Handarbeit implementieren, aber es gibt auch Projekte wie Hanko, die angetreten sind, um Entwicklern Arbeit abzunehmen. Hanko.io, das Unternehmen hinter dem Projekt Hanko, ist Mitglied der FIDO-Alliance und entwickelt eine Open-Source-Lösung für Nutzermanagement und WebAuthn-Authentifizierung, die den Fokus auf Passkeys legt.
Hanko besteht aus mehreren Teilen: Das Backend (siehe ct.de/yhk8) lässt sich selbst hosten und stellt ein API für die Authentifizierung im Hintergrund bereit. Die sogenannten Hanko Elements (@hanko-elements), machen die Funktionen des API als UI-Elemente in diversen Frontend-Frameworks wie Angular, JavaScript, React und Vue verfügbar. Um herauszufinden, ob Hanko zu Ihrer Anwendung passt, können Sie die öffentliche Demo-Anwendung auf passkeys.io ausprobieren oder sie lokal ausführen. Das geht am einfachsten mit Docker-Compose. Klonen Sie zunächst das Repository und wechseln dann ins Verzeichnis hanko:
git clone \ https://github.com/teamhanko/hanko.git cd hanko
Starten Sie dann mit folgendem Befehl eine Flottille von Docker-Containern, bestehend aus der Quickstart-App, dem Backend (Hanko-API), einer Datenbank und Mailslurper für die Verifizierungscodes.
docker compose \ -f deploy/docker-\ compose/quickstart.yaml -p \ "hanko-quickstart" up --build
Weil es noch keine fertigen Images in einer Container-Registry gibt, müssen sie lokal gebaut werden, was je nach Rechenleistung ein paar Minuten dauern kann. Steuern Sie danach im Browser localhost:8888 für die Beispielanwendung an. Die Verifizierungscodes, die Hanko via Mail verschickt, können Sie mit Mailslurper auf localhost:8080 lesen. Wenn Sie Hanko bei der Registrierung eines Passkeys über die Schulter schauen wollen, können Sie das mit einer Browsererweiterung wie WebDevAuthn (siehe ct.de/yhk8) tun, die es für Chrome und Firefox gibt. Als alternatives Backend bietet Hanko auch ein Cloud-API an, das sich kostenlos nutzen lässt, wenn das eigene Projekt weniger als 1000 monatliche Nutzer hat. Das Open-Source-Backend und Hanko Cloud tragen noch das Prädikat „Beta“, es kann also sein, dass vereinzelt noch Probleme auftreten. In unseren Testläufen hat die Nutzerverwaltung, Registrierung und Authentifizierung von Passkeys mit Hanko aber zuverlässig funktioniert.
Fazit
Schon heute gibt es eine Reihe von Möglichkeiten, Passkeys in selbstgehosteten Anwendungen zu unterstützen. Bringen Sie Ihren Webanwendungen mit wenigen Klicks neue Tricks bei oder schalten Sie Apps einen SSO- und Identity-Provider wie Keycloak vor, der die passwortlose WebAuthn-Authentifizierung ergänzt. Für Entwickler gibt es eine Menge spannender Projekte, um WebAuthn und Passkeys in eigene Anwendungen einzubacken. Ob sich Passkeys als nächste Evolutionsstufe des FIDO2-Standards durchsetzen, hängt maßgeblich davon ab, wo man es überall einsetzen kann. Wenn Sie mögen, dann können Sie einen Beitrag dazu leisten. (ndi@ct.de)
GitHub-Repository zu Keycloak, Dokumentationen: ct.de/yhk8