Keycloak: Comprendre la structure d'un thème Keycloak

Cette documentation fait partie du guide Personnaliser l'apparence. Consultez le guide complet ici : Personnalisez facilement les pages de connexion, la console de compte et les e-mails de Keycloak sur Stackhero : définissez vos couleurs, votre logo, vos textes, et créez même des thèmes entièrement personnalisés grâce à l'éditeur en ligne intégré..

👋 Bienvenue sur la documentation de Stackhero !

Stackhero propose un service Keycloak cloud qui simplifie le déploiement d'un fournisseur d'identité prêt pour la production en seulement 2 minutes :

• Utilisateurs, realms et clients en nombre illimité
• Prise en charge de OpenID Connect, OAuth 2.0, SAML 2.0, connexion via réseaux sociaux, fédération LDAP et Active Directory
• Nom de domaine personnalisé avec HTTPS intégré pour un accès sécurisé (par exemple, https://login.votre-entreprise.com)
• Thèmes personnalisés : personnalisez facilement vos pages de connexion, la console de compte et les e-mails grâce à un éditeur en ligne inclus
• Serveur e-mail dédié avec SPF, DKIM et DMARC, pour que les confirmations de compte et réinitialisations de mot de passe soient gérées automatiquement
• Base de données PostgreSQL intégrée, avec la console d'administration accessible sur un port dédié et désactivable
• Mises à jour en un clic pour garder votre système à jour sans intervention manuelle

Consacrez votre temps au développement, pas à la configuration : vous pouvez tester la solution Keycloak cloud de Stackhero en moins de 5 minutes.

Un thème est un dossier contenant des sous-dossiers pour chaque type de page :

themes/
  acme/
    login/                             # Pages de connexion utilisateur
      theme.properties                 # Héritage du thème et inclusion CSS
      resources/css/stackhero.css      # Votre CSS
      resources/img/logo.svg           # Vos images
      messages/messages_en.properties  # Vos textes
    account/                           # Gestion du profil utilisateur
    admin/                             # Apparence de la console d'administration
    email/                             # Modèles d'e-mails

Les thèmes héritent des thèmes standards de Keycloak, en ne surchargeant que ce qui est nécessaire. Un fichier login/theme.properties typique ressemble à ceci :

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

• parent définit le thème de base.
• styles liste les fichiers CSS à charger. Placez votre CSS en dernier pour garantir que vos modifications s'appliquent.

La liste styles remplace celle du thème parent, elle ne l'étend pas. Pensez à inclure la feuille de style du parent (css/styles.css) sinon votre page perdra son style par défaut.

Vous n'avez besoin de templates FreeMarker (.ftl) que si vous souhaitez modifier la structure HTML. Pour les couleurs, logos, fonds, textes et langues, aucune modification de template n'est nécessaire. Pour plus de détails, consultez la documentation Keycloak sur les thèmes.