Keycloak: Keycloak Theme-Struktur verstehen

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.

Ein Theme ist ein Verzeichnis mit Unterverzeichnissen für jeden Seitentyp:

themes/
  acme/
    login/                             # Benutzer-Loginseiten
      theme.properties                 # Theme-Vererbung und CSS-Includes
      resources/css/stackhero.css      # Ihr CSS
      resources/img/logo.svg           # Ihre Bilder
      messages/messages_en.properties  # Ihre Texte
    account/                           # Benutzerprofil-Verwaltung
    admin/                             # Erscheinungsbild der Admin-Konsole
    email/                             # E-Mail-Vorlagen

Themes erben von den Standard-Keycloak-Themes und überschreiben nur, was Sie benötigen. Eine typische login/theme.properties sieht so aus:

parent=keycloak.v2
styles=css/styles.css css/stackhero.css

• parent legt das Basistheme fest.
• styles listet die zu ladenden CSS-Dateien auf. Platzieren Sie Ihr CSS zuletzt, damit Ihre Änderungen greifen.

Die Liste styles ersetzt die des Parent-Themes, sie wird nicht erweitert. Fügen Sie daher immer das Stylesheet des Parent-Themes (css/styles.css) hinzu, sonst verliert Ihre Seite das Standard-Layout.

FreeMarker-Templates (.ftl-Dateien) benötigen Sie nur, wenn Sie die HTML-Struktur ändern möchten. Für Farben, Logos, Hintergründe, Texte und Sprachen ist keine Template-Anpassung nötig. Weitere Details finden Sie in der Keycloak-Themes-Dokumentation.