Keycloak: De structuur van een Keycloak-thema begrijpen

Deze documentatie maakt deel uit van de Pas het uiterlijk aan-gids. Bekijk de volledige gids hier: Brand eenvoudig uw Keycloak inlogpagina's, accountconsole en e-mails op Stackhero: stel uw kleuren, logo, teksten in en maak zelfs volledig aangepaste thema's met de ingebouwde online editor..

👋 Welkom bij de Stackhero-documentatie!

Stackhero biedt een Keycloak cloud dienst waarmee u in slechts 2 minuten een productieklare identity provider kunt uitrollen:

  • Onbeperkt aantal gebruikers, realms en clients
  • Ondersteunt OpenID Connect, OAuth 2.0, SAML 2.0, social login, LDAP en Active Directory-federatie
  • Eigen domeinnaam met ingebouwde HTTPS voor veilige toegang (bijvoorbeeld https://login.uw-bedrijf.com)
  • Aangepaste thema's: pas eenvoudig uw loginpagina's, accountconsole en e-mails aan met de meegeleverde online editor
  • Toegewijde mailserver met SPF, DKIM en DMARC, zodat accountbevestigingen en wachtwoordresets automatisch voor u worden afgehandeld
  • Ingebouwde PostgreSQL-database, met de beheerdersconsole beschikbaar op een eigen afsluitbare poort
  • One-click updates houden uw systeem up-to-date zonder handmatige tussenkomst

Besteed uw tijd aan ontwikkelen, niet aan configureren: u kunt Stackhero's Keycloak cloudoplossing in minder dan 5 minuten uitproberen.

Een thema is een map met submappen voor elk type pagina:

themes/
  acme/
    login/                             # Gebruikers-inlogpagina's
      theme.properties                 # Thema-overerving en CSS-includes
      resources/css/stackhero.css      # Uw CSS
      resources/img/logo.svg           # Uw afbeeldingen
      messages/messages_en.properties  # Uw teksten
    account/                           # Gebruikersprofielbeheer
    admin/                             # Uiterlijk van de beheerconsole
    email/                             # E-mailtemplates

Thema's erven van standaard Keycloak-thema's en overschrijven alleen wat u nodig heeft. Een typisch login/theme.properties-bestand ziet er zo uit:

parent=keycloak.v2
styles=css/styles.css css/stackhero.css
  • parent bepaalt het basisthema.
  • styles somt de CSS-bestanden op die geladen moeten worden. Zet uw CSS als laatste zodat uw wijzigingen effect hebben.

De lijst styles vervangt die van het parent-thema, breidt deze niet uit. Neem altijd het stylesheet van het parent-thema (css/styles.css) op, anders verliest uw pagina de standaardopmaak.

U heeft alleen FreeMarker-templates (.ftl-bestanden) nodig als u de HTML-structuur wilt aanpassen. Voor kleuren, logo's, achtergronden, teksten en talen is geen templatebewerking nodig. Zie voor meer details de Keycloak themes documentatie.