Das JavaScript-Framework Vue.js, Teil 16 Sichere Vue-Anwendungen mit Keycloak

Web-Anwendungen lassen sich mit Standards wie OAuth 2.0, OpenID Connect, JWT oder SAML 2.0 absichern. Produktionsreife Anwendungen wie Keycloak von Red Hat sind allerdings einfacher zu implementieren. Dieser Beitrag zeigt, wie sich Vue-Anwendungen damit absichern lassen.

Keycloak ist wahlweise als Docker-Image oder als Stand-Alone-Java-Anwendung erhältlich. Wer Docker nutzt, ist mit dem folgenden Aufruf im Nu im Besitz eines laufenden Containers (hier in der Version 16.1.0):

Der Port 8080 des Containers wird hier auf den Port 8081 der lokalen Maschine gemappt, um Port 8080 für die Vue-App freizuhalten. Die Installation der Java-Variante, die derzeit OpenJDK 11 voraussetzt, ist in der Dokumentation beschrieben.

Nach Installation und Start von Keycloak ist die Administrationskonsole unter der URL http://localhost:8081/admin erreichbar. Im Docker-Befehl oben wurde der erforderlich Admin-Benutzer „admin“ (mit gleichnamigen Passwort) gleich angelegt, so dass man sich direkt einloggen kann.

Keycloak teilt Anwendungen und Benutzer in sogenannte Realms (deutsch: Bereiche, Gebiete) auf. Dabei handelt es sich um so etwas wie Mandanten mit getrennten Benutzer- und Anwendungskreisen. Das können gänzlich verschiedene Unternehmen, aber auch verschiedene Umgebungen für Test und Produktion sein. Wir legen hier einen Realm mit Namen „test“ an (Select realm > Add realm).

Um den Realm nutzen zu können, wird ein Client benötigt, der die Konfiguration für die zugreifende Anwendung darstellt (Configure > Clients > Create). Die zu vergebende Client ID lautet hier „vue-app“. Nach dem Anlegen des Clients lassen sich zahlreiche Eigenschaften konfigurieren.

Wichtig sind hier Valid Redirect URIs (http://localhost:8080/*), womit verhindert wird, dass Hacker auf unseriöse Seiten weiterleiten, und Web Origins (http://localhost:8080), um Cross-Origin Resource-Sharing zwischen Vue-App (Port 8080) und Keycloak (Port 8081) zu gestatten.

Schließlich wird ein User benötigt (Users > Add User). Sein Passwort wird (nach dem Speichern) im Reiter Credentials festgelegt und dabei der Schalter Temporary auf „Off“ gestellt. Mit Realm, Client und User ist die für dieses Beispiel erforderliche Minimal-Konfiguration von Keycloak abgeschlossen.

Vue-Client mit Keycloak-Adapter

Als Client wird eine einfache Vue-2-Anwendung mit dem CLI generiert:

Die Anwendung lässt sich mit …

… auf dem Entwicklungsserver starten und dann im Browser unter der URL http://localhost:8080 aufrufen. Zu sehen ist wie erwartet die Webseite der frisch erzeugten Vue-Anwendung. Zur Anbindung an Keycloak wird der JavaScript-Adapter von Keykloak verwendet. Er wird mit dem folgenden Kommando, ausgeführt im Projektordner, installiert:

Außerdem wird gleich noch der http-Client Axios installiert, mit dem auf Ressourcen wie etwa eine REST-Schnittstelle zugegriffen werden kann:

Anschließend wird der Inhalt von main.js mit dem folgenden Code überschrieben. Im Objekt initOptions finden sich die Keycloak-relevanten Daten:

Startet man nun die Anwendung mit …

… und öffnet im Browser die Anwendungs-URL (http://localhost:8080), dann landet man nicht mehr wie zuvor auf der Startseite, sondern wird auf die Keycloak-Login-Seite weitergeleitet.

Dort kann man sich nun mit dem angelegten Benutzer und Passwort authentifizieren und wird danach von Keycloak auf die eigentlich angeforderte Seite weitergeleitet. Die Authentifizierung ist damit abgeschlossen. Erwähnenswert dabei ist, dass die Vue-App als Client die Nutzerdaten nicht kennt. Nach dem Einloggen erhält die App einen Autorisierungs-Code von Keycloak, das Verfahren wird deshalb auch als Authorization Code-Flow bezeichnet.

Sicherer Backend-Zugriff mit Access-Token

Den Autorisierungscode tauscht die Anwendung in einem Keycloak-Request gegen ein ID-Token und ein Access-Token. Mit Letzterem lässt sich auf geschützte Ressourcen wie etwa eine REST-Schnittstelle zugreifen. Das Backend entscheidet anhand der Informationen im Token, ob der Zugriff gestattet ist. Um das besser zu verstehen, kann man den Access-Token in der Konsole ausgeben:

Im Folgenden ist ein kleiner Teil des Tokens wiedergegeben:

Bei der Zeichenkette handelt es sich um signiertes JWT-Token, dessen Signatur die Backend-Anwendung mithilfe eines von Keycloak angeforderten Public-Keys validiert. Es ist deshalb nicht möglich, die Daten zu ändern. Man kann sie aber zum Beispiel mit der Webseite jwt.io in eine lesbare Form bringen. Im Token finden sich in sogenannten Claims Daten wie Ablaufzeitpunkt (exp), Ausstellungszeitpunkt (iat), Aussteller des Tokens (iss) sowie Informationen über den angemeldeten Benutzer und seine Zugriffsrechte in Form von Realm-Rollen, Client-Rollen und Scopes:

Für den Zugriff auf ein geschütztes Backend wird das Access-Token im Authorization-Header des Requests, beginnend mit der Kennung ‘Bearer’ mitgegeben. Das folgende Codestück zeigt das exemplarisch auf:

Das Backend „kennt“ den Keycloak-Server, holt sich von dort den Public-Key zur Entschlüsselung und wird den Zugriff nur gestatten, wenn das Token von der passenden Keycloak-Instanz ausgestellt wurde, die Signatur gültig ist und die aufgeführten Rechte den im Backend formulierten Anforderungen (zum Beispiel hasRole(“ADMIN”)) genügen.

(ID:48540769)