Access Token

Ü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.

Zugriff erlauben mit OAuth2 (UML-Sequenzdiagramm Übungsaufgabe)

Mit OAuth2 erlaubt eine Nutzerin einer App den Zugriff auf ihre Daten bei einem Webdienst, ohne der App ihr Passwort zu geben. In dieser Aufgabe recherchierst Du die Akteure und die Nachrichtenfolge von OAuth2 (Authorization Code mit PKCE) und stellst sie als UML-Sequenzdiagramm dar. Neben der Sequenzdiagramm-Übung lernst Du so einen zentralen Mechanismus zur Autorisierung kennen.