Webauthn und (Apple) Passkeys in einer Laravel-App
Letztens warf Markus einen Link zu passkeys.io in den Chat. Ich hatte schon wieder ganz vergessen, dass iOS 16 ja Passkey-Support mitbringt und freute mich über diese kleine Gedankenstütze!
Doch was sind Passkeys? Am Besten kann es natürlich die oben verlinkte Webseite rüberbringen. Passkeys sind eine Initiative von Apple, Google und Microsoft um Passwörter abzulösen. Das baut alles auf den FIDO und Webauthn-Standards auf, was erstmal gut ist, denn die werden bereits von Geräten und Software unterstützt! Statt eines Passworts benutzt man zum Login auf einer Seite halt Touch ID, Face ID oder die entsprechenden Funktionen der anderen Hersteller, um den Login per Passkey freizugeben.
Ich hatte direkt Lust, das in eins meiner Projekte zu integrieren. Der Login mit Passwort ist zwar auch nicht so schlimm, da entsprechende Passwortmanager auch auf dem Handy alles automatisch ausfüllen, aber Zukunft! Außerdem dachte ich, vielleicht gibt es ein paar spannende Erkenntnisse zur Einbindung, die ich dann hier teilen könnte.
Zunächst suchte ich also ein Package, das Laravel mit Webauthn verbindet und fand laragear/webauthn. Das installiert man schnell in die Laravel-App, ändert ein paar Konfigurationen und schwupps, kann man es benutzen. Da Webauthn zum Teil auch ein Browserfeature ist, muss man natürlich auch ein bisschen JavaScript schreiben, um die richtigen APIs anzusprechen um die entsprechenden Dialoge im Browser zu triggern. Die Schnipsel sind in der README vom Package auch dabei.
Ich hatte nun also schonmal einen “Login with Webauthn”-Button, aber der Login klappte einfach nicht. Ich ärgerte mich zehn Minuten damit rum, bis mir einfiel, dass ich meinen bestehenden Account noch gar nicht mit dem Passkey verknüpft hatte, 🤦. Also erstmal die Username/Passwort-Authentifizierung wieder aktiviert und den “Register Passkey”-Button eingebaut, um den seitenspezifischen Passkey zu erstellen und in der Datenbank zu hinterlegen.
Danach klappte es dann auch einfach! Verrückt. Ich bin davon ausgegangen, noch irgendetwas and er Konfiguration des Pakets ändern zu müssen, oder verrückte JavaScripte zu schreiben, um dieses Webauthn-Paket für Passkeys fit zu machen, aber ich kann berichten: It just works.
Das Gute ist: Will man gar keine Passkeys verwenden, sondern einen YubiKey, oder so etwas, dann funktioniert es auch einfach, denn es ist ja einfach dieser Webauthn-Standard, den es schon seit ein paar Jahren gibt.
Die einzigen Bedenken, die ich bei der Sache jetzt noch habe ist, dass das Package, was ich verwende, nur 61 Stars bei Github hat. Ich habe mir den Code auch noch nicht genauer angesehen, da es jetzt eh nur Quaschprojekte sind, für die ich es benutze. Sollte man es produktiv verwenden, sollte man natürlich nochmal einen genaueren Checkup machen, ist ja doch eine relativ elementare Komponente einer App.