Keycloak: Compreender a estrutura de temas do Keycloak

Esta documentação faz parte do guia Personalizar a aparência. Consulte o guia completo aqui: Personalize facilmente as páginas de login, o console de conta e os emails do Keycloak no Stackhero: defina as suas cores, logótipo, textos e até crie temas totalmente personalizados com o editor online integrado..

👋 Bem-vindo à documentação da Stackhero!

A Stackhero disponibiliza um serviço de Keycloak cloud que facilita o lançamento de um fornecedor de identidade pronto para produção em apenas 2 minutos:

• Utilizadores, realms e clientes em quantidade ilimitada
• Suporte para OpenID Connect, OAuth 2.0, SAML 2.0, login social, federação LDAP e Active Directory
• Nome de domínio personalizado com HTTPS integrado para acesso seguro (por exemplo, https://login.sua-empresa.com)
• Temas personalizados: personalize facilmente as suas páginas de login, consola de conta e emails com o editor online incluído
• Servidor de email dedicado com SPF, DKIM e DMARC, para que confirmações de conta e redefinições de palavra-passe sejam tratadas automaticamente
• Base de dados PostgreSQL integrada, com a consola de administração disponível num porto dedicado e amovível
• Atualizações com um clique para manter o sistema sempre atualizado sem intervenção manual

Dedique o seu tempo ao desenvolvimento, não à configuração: pode experimentar a solução Keycloak cloud da Stackhero em menos de 5 minutos.

Um tema é um diretório que contém subdiretórios para cada tipo de página:

themes/
  acme/
    login/                             # Páginas de autenticação do utilizador
      theme.properties                 # Herança do tema e inclusão de CSS
      resources/css/stackhero.css      # O seu CSS
      resources/img/logo.svg           # As suas imagens
      messages/messages_en.properties  # Os seus textos
    account/                           # Gestão de perfil do utilizador
    admin/                             # Aparência da consola de administração
    email/                             # Templates de email

Os temas são herdados dos temas padrão do Keycloak, sobrescrevendo apenas o necessário. Um ficheiro típico login/theme.properties é assim:

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

• parent define o tema base.
• styles lista os ficheiros CSS a carregar. Coloque o seu CSS no fim para garantir que as suas alterações têm efeito.

A lista styles substitui a lista do tema pai, não a estende. Inclua sempre a folha de estilos do pai (css/styles.css) ou a sua página perderá o estilo padrão.

Só precisa de templates FreeMarker (.ftl) se quiser alterar a estrutura HTML. Para cores, logótipos, fundos, textos e idiomas, não é necessário editar templates. Para mais detalhes, consulte a documentação de temas do Keycloak.