Anpassen der Anmeldeseite für Keycloak

1. Übersicht

Keycloak ist ein Autorisierungsserver eines Drittanbieters, mit dem die Authentifizierungs- und Autorisierungsanforderungen unserer Web- oder Mobilanwendungen verwaltet werden. Es verwendet eine Standard-Anmeldeseite, um Benutzer im Namen unserer App anzumelden.

In diesem Tutorial konzentrieren wir uns darauf, wie wir die Anmeldeseite für unseren Keycloak-Server so anpassen können , dass wir ein anderes Erscheinungsbild dafür haben. Wir werden dies sowohl für Standalone- als auch für Embedded-Server sehen.

Wir werden darauf aufbauen, Themen für das Keycloak-Tutorial anzupassen, um dies zu tun.

2. Anpassen eines eigenständigen Keycloak-Servers

Fahren Sie mit unserem Beispiel für das benutzerdefinierte Thema fort und sehen Sie sich zuerst den eigenständigen Server an.

2.1. Admin-Konsoleneinstellungen

Um den Server zu starten, navigieren wir zu dem Verzeichnis, in dem unsere Keycloak-Distribution gespeichert ist, und führen diesen Befehl in seinem bin- Ordner aus:

./standalone.sh -Djboss.socket.binding.port-offset=100

Sobald der Server gestartet ist, müssen wir nur die Seite aktualisieren, um zu sehen, wie sich unsere Änderungen widerspiegeln, dank der Änderungen, die wir zuvor an der Datei standalone.xml vorgenommen haben .

Jetzt erstellen wir einen neuen Ordner mit dem Namen login im Verzeichnis theme / custom . Um die Dinge einfach zu halten, kopieren wir zunächst den gesamten Inhalt des Verzeichnisses Themes / Keycloak / Login hier. Dies ist das Standardthema für die Anmeldeseite.

Dann gehen wir zur Administratorkonsole, geben die Anmeldeinformationen für initial1 / zaq1! QAZ ein und gehen zur Registerkarte Themen für unseren Bereich:

Wir wählen benutzerdefiniert für das Anmeldethema und speichern unsere Änderungen.

Mit diesem Set können wir nun einige Anpassungen ausprobieren. Aber vorher schauen wir uns die Standard-Anmeldeseite an:

2.2. Anpassungen hinzufügen

Nehmen wir jetzt an, wir müssen den Hintergrund ändern. Dazu öffnen wir login / resources / css / login.css und ändern die Klassendefinition:

.login-pf body { background: #39a5dc; background-size: cover; height: 100%; }

Um den Effekt zu sehen, aktualisieren wir die Seite:

Als nächstes versuchen wir, die Beschriftungen für den Benutzernamen und das Passwort zu ändern.

Um dies zu erreichen, müssen wir eine neue Datei erstellen, messages_en.properties im Ordner theme / login / messages . Diese Datei überschreibt das Standardnachrichtenpaket, das für die angegebenen Eigenschaften verwendet wird:

usernameOrEmail=Enter Username: password=Enter Password:

Aktualisieren Sie zum Testen die Seite erneut:

Angenommen, wir möchten den gesamten HTML-Code oder einen Teil davon ändern, müssen wir die Freemarker-Vorlagen überschreiben, die Keycloak standardmäßig verwendet. Die Standardvorlagen für die Anmeldeseite werden im Basis- / Anmeldeverzeichnis gespeichert.

Angenommen , wir möchten, dass WILLKOMMEN IN BAELDUNG anstelle von SPRINGBOOTKEYCLOAK angezeigt wird .

Dazu müssen wir base / login / template.ftl in unseren Ordner custom / login kopieren .

Ändern Sie in der kopierten Datei die Zeile:

 ${kcSanitize(msg("loginTitleHtml",(realm.displayNameHtml!'')))?no_esc} 

Zu:

 WELCOME TO BAELDUNG 

Auf der Anmeldeseite wird jetzt anstelle des Bereichsnamens unsere benutzerdefinierte Nachricht angezeigt.

3. Anpassen eines eingebetteten Keycloak-Servers

Der erste Schritt besteht darin, alle Artefakte, die wir für den Standalone-Server geändert haben, zum Quellcode unseres eingebetteten Autorisierungsservers hinzuzufügen.

So lassen Sie sich eine neue Ordner erstellen Login innerhalb src / main / resources / Themen / custom mit diesen Inhalten:

Nun sind alle müssen wir tun Anweisung in unserem Reich Definitionsdatei hinzufügen baeldung-realm.json so dass benutzerdefinierte für unsere Login Thema Typ verwendet wird:

"loginTheme": "custom",

Wir haben bereits in das benutzerdefinierte Themenverzeichnis umgeleitet, damit unser Server weiß, wo er die Themendateien für die Anmeldeseite abrufen kann.

Klicken Sie zum Testen auf die Anmeldeseite:

Wie wir sehen können, werden hier alle zuvor für den Standalone-Server vorgenommenen Anpassungen wie Hintergrund, Labelnamen und Seitentitel angezeigt.

4. Keycloak-Anmeldeseite umgehen

Technisch gesehen können wir die Keycloak-Anmeldeseite mithilfe des Kennworts oder des Direktzugriffs-Grant-Flows vollständig umgehen. Es wird jedoch dringend empfohlen, diesen Grant-Typ überhaupt nicht zu verwenden.

In diesem Fall gibt es keinen Zwischenschritt, um einen Autorisierungscode abzurufen und dann das Zugriffstoken im Austausch zu erhalten. Stattdessen können wir die Benutzeranmeldeinformationen direkt über einen REST-API-Aufruf senden und als Antwort das Zugriffstoken erhalten.

Dies bedeutet effektiv, dass wir unsere Anmeldeseite verwenden können, um die ID und das Kennwort des Benutzers zu erfassen und diese zusammen mit der Client-ID und dem Geheimnis in einem POST an den Token- Endpunkt an Keycloak zu senden .

Da Keycloak jedoch zahlreiche Anmeldeoptionen bietet, z. B. "Angemeldet bleiben", "Kennwort zurücksetzen" und "MFA", um nur einige zu nennen, gibt es kaum einen Grund, diese zu umgehen.

5. Schlussfolgerung

In diesem Tutorial haben wir gelernt, wie Sie die Standard-Anmeldeseite für Keycloak ändern und unsere Anpassungen hinzufügen .

Wir haben dies sowohl für eine eigenständige als auch für eine eingebettete Instanz gesehen.

Zuletzt haben wir kurz besprochen, wie die Anmeldeseite von Keycloak vollständig umgangen werden kann und warum dies nicht der Fall ist.

Wie immer ist der Quellcode über GitHub verfügbar. Für den eigenständigen Server befindet es sich in den Tutorials GitHub und für die eingebettete Instanz auf dem OAuth GitHub.