Navigation Guard

Übungsaufgaben zur Anmeldung mit Keycloak in Vue: Mitfahrgesuche mit Token

Die Mitfahrgesuche in der Web-App des Mitfahrlabors sollen nur für angemeldete Personen erreichbar sein. In diesen Übungen bringst Du die Schritte des Authorization Code Flows mit PKCE in die richtige Reihenfolge und ordnest Tokens ihren Empfängern zu. Danach schützt Du die Seite „Meine Gesuche“ mit dem Navigation Guard und schickst ein neues Gesuch mit Access Token an die API, jeweils mit Tests. Zum Schluss findest Du anhand von Fehlermeldungen heraus, was bei der Anmeldung eines anderen Paars schiefläuft, und nimmst Stellung zu zwei Vorschlägen für mehr Bequemlichkeit.

Anmeldung mit Keycloak in Vue: Authorization Code mit PKCE

Die Web-App des Mitfahrlabors bekommt eine Anmeldung mit dem Schulkonto. Zuerst probiert das Paar in einem Spike aus, wie sich eine Single-Page-App bei Keycloak anmeldet. Der Artikel erklärt, warum eine App im Browser ein öffentlicher Client ohne Secret ist und wie der Authorization Code Flow mit PKCE verhindert, dass ein abgefangener Code nutzbar ist. Mit oidc-client-ts, einem Navigation Guard und dem Pinia-Store meldet sich die App an, schickt das Access Token an das Backend und reagiert auf abgelaufene Tokens. Getestet wird ohne Keycloak mit einer Attrappe.