Linux Formation - Structure et creation de themes Keycloak

Architecture des themes Keycloak

Keycloak utilise un systeme de themes modulaire pour personnaliser l'apparence de toutes les pages exposees aux utilisateurs. Chaque theme peut couvrir plusieurs types de pages.

Types de themes

login — Pages de connexion, inscription, mot de passe oublie
account — Console de gestion du compte utilisateur
admin — Console d'administration Keycloak
email — Templates des emails envoyes par Keycloak
welcome — Page d'accueil du serveur

Structure d'un theme

themes/
  mon-theme/
    login/
      theme.properties
      resources/
        css/
          login.css
        img/
          logo.png
      messages/
        messages_fr.properties
      template/
        login.ftl
    email/
      theme.properties
      text/
        email-verification.ftl
      html/
        email-verification.ftl
      messages/
        messages_fr.properties

theme.properties

# Heriter du theme keycloak par defaut
parent=keycloak
import=common/keycloak

# Styles personnalises
styles=css/login.css

# Variables locales
locales=fr

Personnaliser la page de login (login.ftl)

<#import "template.ftl" as layout>
<@layout.registrationLayout displayMessage=true; section>
  <#if section = "header">
    <div class="custom-header">
      <img src="${url.resourcesPath}/img/logo.png" alt="Logo">
      <h1>${msg("loginTitle")}</h1>
    </div>
  <#elseif section = "form">
    <form action="${url.loginAction}" method="post">
      <input name="username" value="${(login.username!'')}"/>
      <input name="password" type="password"/>
      <button type="submit">${msg("doLogIn")}</button>
    </form>
  </#if>
</@layout.registrationLayout>

Templates email

# email/html/email-verification.ftl
<html>
<body>
  <p>Bonjour ${user.firstName},</p>
  <p>Cliquez sur le lien pour verifier votre email :</p>
  <a href="${link}">Verifier mon email</a>
  <p>Ce lien expire dans ${linkExpirationFormatter(linkExpiration)}.</p>
</body>
</html>

Astuce : Utilisez toujours un theme parent pour heriter des fonctionnalites de base et ne surcharger que ce dont vous avez besoin.