CodamAIDocs
Themafertig

Anmelden im Browser

Der Weg von „Seite öffnen“ bis „angemeldet“ über Keycloak mit Authorization Code, mit allen Varianten der Login-Seite.

Ausprägungen
nicht angemeldet → Weiterleitungautomatischer Loginnach Abmeldung (kein Auto-Login)Rücksprung nur auf interne PfadeKeycloak-Seiten: Passwort, OTP, Passwort vergessen

Worum es geht

Die Oberflächen von CodamAI (der Hub, das CIAS-Portal, das CDMS-Portal) haben keine eigene Login-Maske. Wer sich anmeldet, landet auf einer Seite von Keycloak, gibt dort Passwort und gegebenenfalls einen Einmalcode ein und kommt danach zurück.

Dazwischen steht der BFF, kurz für Backend for Frontend: der Server-Teil der Oberfläche. Er führt die Anmeldung durch und hebt die Tokens auf. Der Browser bekommt nur ein verschlüsseltes Sitzungs-Cookie.

Das Verfahren heißt Authorization Code Flow. „Code“ ist dabei der Einmalcode, den Keycloak nach dem Login an die Anwendung zurückgibt.

Der Ablauf

sequenceDiagram
    participant B as Browser
    participant F as BFF (Server der Oberfläche)
    participant K as Keycloak
    B->>F: öffnet /kunden
    F-->>B: nicht angemeldet → /login?redirect=/kunden
    B->>F: /login startet die Anmeldung
    F-->>B: Weiterleitung zu Keycloak (mit state und PKCE)
    B->>K: Login-Seite
    K-->>B: Passwort, ggf. Einmalcode
    B->>K: Eingaben
    K-->>B: Weiterleitung zurück mit Code
    B->>F: /api/auth/callback/keycloak?code=…
    F->>K: tauscht Code gegen Tokens
    K-->>F: Access-, Refresh- und ID-Token
    F-->>B: setzt Sitzungs-Cookie, zurück zu /kunden

Drei Begriffe aus dem Bild:

  • state ist ein Zufallswert, den der BFF mitschickt und beim Rücksprung wieder erwartet. So erkennt er, dass der Rücksprung zu seiner eigenen Anfrage gehört.
  • PKCE („Pixie“) ist ein zweites Geheimnis: Der BFF schickt Keycloak nur einen Hash davon und legt beim Code-Tausch das Original vor. Wer den Code unterwegs abfängt, kann ihn ohne das Original nicht einlösen.
  • Die drei Tokens: Das Access-Token ist der Ausweis für jede Anfrage an die APIs. Mit dem Refresh-Token holt der BFF ein neues Access-Token, bevor das alte abläuft. Das ID-Token braucht der BFF später zum Abmelden.

Die Varianten

Wie eine Seite zur Anmeldung führt

Wann: Jemand öffnet eine Seite ohne gültige Sitzung.

  1. 1
    Browser→BFF
    öffnet eine geschützte Seite
  2. 2
    BFF
    Gibt es eine gültige Sitzung ohne Fehler?
  3. 3
    BFF→Browser
    leitet auf /login um. CIAS- und CDMS-Portal hängen den Pfad als ?redirect= an, der Hub springt danach immer auf /

Ergebnis: Die Login-Seite übernimmt.

Wann: Die Seite /login wird geöffnet, ohne dass gerade abgemeldet wurde.

  1. 1
    BFF
    Ist die Sitzung gültig? Dann sofort weiter zum Ziel
  2. 2
    BFF→Keycloak
    startet die Anmeldung von selbst, ohne dass jemand klickt
  3. 3
    Keycloak
    Besteht bei Keycloak noch eine Sitzung? Dann ist kein Passwort nötig
  4. 4
    Keycloak→BFF
    schickt den Code zurück

Ergebnis: Wer bei Keycloak noch angemeldet ist, merkt vom Login nichts. Landet der Browser innerhalb von 15 Sekunden ein zweites Mal automatisch auf der Login-Seite, bricht der Hub ab und zeigt einen Knopf „Erneut anmelden“. So entsteht keine Endlosschleife.

Wann: Die Abmeldung leitet auf /login?loggedOut=1.

  1. 1
    BFF
    Steht loggedOut in der Adresse? Dann kein automatischer Login
  2. 2
    Benutzer→BFF
    klickt selbst auf „Anmelden“

Ergebnis: Die Login-Seite bleibt stehen. Ohne diese Bremse würde die Abmeldung sofort wieder anmelden.

Wann: Nach dem Login geht es zur Seite aus ?redirect=.

  1. 1
    BFF
    Beginnt das Ziel mit / und nicht mit //?
  2. 2
    BFF
    sonst: Ziel ist /
  3. 3
    BFF→Browser
    leitet zum Ziel

Ergebnis: Nur Pfade der eigenen Anwendung sind erlaubt. //andere-seite.de oder https://… werden zu /.

Die Seiten von Keycloak

Was die Person bei Keycloak sieht, liefert das Login-Theme aus hub-login. Ein Theme ist die Gestaltung der Keycloak-Seiten, in Deutsch und Englisch.

SeiteWann sie erscheint
Benutzername und Passwortbei jeder Anmeldung ohne bestehende Keycloak-Sitzung
Einmalcode (OTP)wenn für das Konto ein zweiter Faktor eingerichtet ist
Passwort vergessenLink auf der Login-Seite. Keycloak schickt eine Mail zum Zurücksetzen
Passwort setzen oder ändernnach dem Link aus der Willkommensmail oder wenn Keycloak ein neues Passwort verlangt
Seite abgelaufenwenn die Login-Seite zu lange offen stand
Abmelden bestätigenbeim Abmelden ohne ID-Token, siehe Abmelden

OTP heißt One-Time Password: ein Code aus einer Authenticator-App, der nur einmal und kurz gilt.

Was nach dem Login im Browser liegt

Ein verschlüsseltes Sitzungs-Cookie, das kein Skript der Seite lesen kann. Darin liegen die Tokens. Refresh- und ID-Token verlassen den BFF nie. Wie das genau aussieht, steht unter Sitzung im BFF und Cookies.

Weiter

Quellen im Code und in der Wissensdatenbank
  • hub-frontend, CIAS/cias-frontend, CDMS/frontend – app/middleware/auth.global.ts, app/pages/login.vue, server/api/auth/[...].ts
  • next-auth 4 – providers/keycloak (checks pkce, state), core/lib/default-callbacks (redirect)
  • hub-login – theme/codamai/login/*.ftl, theme.properties
  • CIAS/cias-runtime/deploy/keycloak/import/codamai-realm.json
Suchen