Keycloak: Ihr Theme ist bereit zur Bearbeitung

Diese Dokumentation ist Teil des Erscheinungsbild anpassen-Leitfadens. Den vollständigen Leitfaden finden Sie hier: Branding Ihrer Keycloak-Loginseiten, Account-Konsole und E-Mails auf Stackhero leicht gemacht: Legen Sie Ihre Farben, Ihr Logo, Ihre Texte fest und erstellen Sie sogar vollständig eigene Themes mit dem integrierten Online-Editor..

👋 Willkommen in der Stackhero-Dokumentation!

Stackhero bietet einen Keycloak Cloud Service, mit dem Sie in nur 2 Minuten einen produktionsbereiten Identity Provider bereitstellen können:

• Unbegrenzte Anzahl an Benutzern, Realms und Clients
• Unterstützung für OpenID Connect, OAuth 2.0, SAML 2.0, Social Login, LDAP- und Active Directory-Föderation
• Eigene Domain mit integriertem HTTPS für sicheren Zugriff (zum Beispiel https://login.ihre-firma.com)
• Individuelle Themes: Gestalten Sie Ihre Login-Seiten, das Account-Portal und E-Mails ganz einfach mit dem integrierten Online-Editor
• Dedizierter E-Mail-Server mit SPF, DKIM und DMARC, sodass Kontobestätigungen und Passwort-Resets automatisch für Sie abgewickelt werden
• Integrierte PostgreSQL-Datenbank, mit Administrationskonsole auf einem eigenen, abschaltbaren Port
• One-Click-Updates halten Ihr System ohne manuellen Aufwand aktuell

Verbringen Sie Ihre Zeit mit Entwicklung, nicht mit Konfiguration: Testen Sie die Keycloak Cloud-Lösung von Stackhero in weniger als 5 Minuten.

Öffnen Sie themes/ und Sie finden ein Verzeichnis default/. Dies ist Ihr aktives Theme, das bereits von Ihrer Keycloak-Instanz verwendet wird. Es muss nichts ausgewählt werden: Bearbeiten Sie einfach die Dateien und sehen Sie die Änderungen sofort.

Vorkenntnisse zu Keycloak-Themes sind nicht erforderlich. Jede Datei enthält bereits gängige Einstellungen, die Sie anpassen können, mit dem aktuellen Keycloak-Wert als auskommentiertes Beispiel. Um einen Wert zu ändern, entfernen Sie das Kommentarzeichen, passen Sie den Wert an und speichern Sie die Datei.

Bleibt eine Zeile auskommentiert, verwendet Keycloak den Standardwert. So bleibt Ihr Service immer kompatibel mit dem Standardverhalten von Keycloak, auch nach Updates.

Ihr Logo aktualisieren

Öffnen Sie default/login/resources/img/. Dort finden Sie die beiden aktuell auf Ihrer Login-Seite verwendeten Bilder. Laden Sie Ihr eigenes Logo unter demselben Dateinamen keycloak-logo-text.svg hoch und aktualisieren Sie die Login-Seite mit Ctrl+F5 (Cmd+Shift+R auf macOS).

Das ist alles, was Sie tun müssen. Es ist kein Bearbeiten weiterer Dateien oder Neustart des Dienstes nötig: Die Änderungen werden sofort nach dem Speichern übernommen. Um das Hintergrundbild zu ändern, ersetzen Sie keycloak-bg-darken.svg im selben Ordner.

Wenn Sie andere Dateinamen verwenden möchten, passen Sie die Referenzen im Abschnitt "Your logo" in default/login/resources/css/stackhero.css an.

Farben festlegen

In stackhero.css finden Sie Variablen, die bereits mit den aktuellen Werten versehen sind:

:root {
  /* ---------- Colors ---------- */
  /* The buttons */
  /* --pf-v5-global--primary-color--100: #06c; */
  /* The buttons, while hovered */
  /* --pf-v5-global--primary-color--200: #004080; */
  /* The links */
  /* --pf-v5-global--link--Color: #06c; */
  /* The colored line on top of the login box */
  /* --keycloak-card-top-color: #06c; */

Um eine Änderung zu übernehmen, entfernen Sie die Kommentarzeichen, setzen Sie Ihre Farbe, speichern Sie und laden Sie die Seite neu. Das war's.

Während der Bearbeitung: Ihr Browser cached Theme-CSS, Bilder und Skripte für eine Stunde. Wenn Sie iterativ arbeiten, laden Sie die Seite immer mit Ctrl+F5 neu, um Ihre letzten Änderungen zu sehen. Ihre Besucher sehen die Aktualisierungen innerhalb einer Stunde.

Sie haben volle Kontrolle: Die Datei ist reines CSS und wird zuletzt geladen, sodass Sie jeden Stil überschreiben können. Nutzen Sie die DevTools Ihres Browsers (F12), um Elemente zu inspizieren. Keycloak 26 verwendet das PatternFly Design System, daher sind die meisten Farbvariablen als --pf-v5-global--* benannt und können in :root überschrieben werden.

Ihren Firmennamen festlegen

Dafür ist keine Theme-Bearbeitung nötig. Öffnen Sie in der Administrationskonsole Realm settings > General und tragen Sie den Display name ein. Dieser Name erscheint auf den Login-Seiten und in E-Mails.

Texte ändern, in mehreren Sprachen

Sie können Texte anpassen, ohne CSS oder HTML zu bearbeiten. In default/login/messages/messages_en.properties finden Sie alle Texte des Login-Formulars mit den Standardformulierungen. Um eine Zeile zu ändern, entfernen Sie das #, schreiben Sie Ihren eigenen Text und speichern Sie:

loginAccountTitle=Sign in to Acme
doLogIn=Sign in
doForgotPassword=I forgot my password

Fügen Sie Dateien wie messages_fr.properties für Französisch oder messages_de.properties für Deutsch hinzu und aktivieren Sie diese Sprachen in der Administrationskonsole unter Realm settings > Localization.

Tipp: Im Tab Localization gibt es auch einen Bereich Realm overrides, mit dem Sie Texte direkt in der Konsole ändern können – ganz ohne Dateibearbeitung oder Neustart. Nutzen Sie die Methode, die am besten zu Ihrem Workflow passt.

E-Mails branden

Keycloak versendet E-Mails zur Adressbestätigung, Passwortzurücksetzung und für Benutzereinladungen. In default/email/messages/messages_en.properties finden Sie die Standard-Betreffzeilen und Nachrichten, die Sie anpassen können:

emailVerificationSubject=Confirm your Acme account
passwordResetSubject=Reset your Acme password

Beim Bearbeiten der E-Mail-Inhalte beachten Sie bitte:

• Belassen Sie die Platzhalter {0}, {1}, {2} (Keycloak ersetzt diese durch Link, Anzeigename und Zeitangabe).
• Apostrophe werden durch doppeltes Schreiben (don''t) escaped.

Um das HTML einer E-Mail zu überschreiben, kopieren Sie die gewünschte Vorlage aus dem Keycloak base email theme nach default/email/html/ und bearbeiten Sie Ihre Kopie.

Stackhero richtet den E-Mail-Versand für Sie ein, inklusive SPF, DKIM und DMARC. Konfigurieren Sie dies unter Realm settings > Email mit Host und Port, die auf Ihrer Service-Seite angegeben sind.

Wenn Sie Ihr Theme zurücksetzen müssen

Falls etwas schiefgeht, können Sie das gesamte default-Verzeichnis löschen und Ihren Service neu starten. Stackhero erstellt dann ein frisches Standard-Theme und stellt das gewohnte Keycloak-Erscheinungsbild wieder her.

Ihre Realms, Benutzer und Clients sind in Ihrer Datenbank gespeichert und bleiben davon unberührt.