Keycloak自定义主题

一、背景

最近做的项目，需要集成keycloak。对于要上线的项目，那就需要定制一套属于自己风格的主题。

目前用的是最新的稳定版本22.0。

https://github.com/keycloak/keycloak/tree/release/22.0

二、如何自定义主题

• 这是官网的教程，自定义主题。（这里可以简单了解一下基本知识，官网介绍的不是很详细，只是简单介绍了登录页面的定制，其他的比较少）
• 我们先看看github上主题的目录结构 ，一共有五个主题admin、eamil、account、login、welcome。（这里我们需要先git 下来）

• 我们先将需要定制的主题复制到自己的目录下面。比如我这里是mytheme/login，login这个主题，直接从keycloak目录下面复制过来，其他的也是一样，复制到自己目录下面，基于原本的主题进行修改。

然后修改对应的css还有ftl模板，就可以生成自己想要的风格，因为login主题是继承与base的，所有修改对应的样式就会进行覆盖。

（这里如何知道要修改的样式所对应的文件，我是通过浏览器点击，查看对应的文字，或者css、图片，然后去文件里面搜索进行修改。）

• 然后定制admin的时候，会发现base/admin，只有一个messages_en.properties文件，选了这个主题的时候，页面加载不出来。我们需要添加一个文件。

这里我通过浏览器的请求发现，他默认是keycloak.v2下的主题，所以继承base也加载不出来。

三、自定义主题遇到的一些坑

• 然后我这里遇到一些坑，因为需要中文化，所以原本的messages_en.properties，需要修改成messages_zh_CN.properties，但是还有一个问题，页面显示的时候出现了乱码。后面发现将中文转出unicode编码，页面就可以识别了。(这里没有仔细看官网，其实在文件的头部加一个#encoding=utf-8 ，就可以识别中文了。)
• 在定制account这个主题的时候，直接复制过来发现，页面并没有生效，加载不出来，发现父类继承需要修改（parent=keycloak.v2），admin主题也是一样。
• 这里我们会发现有些主题里面就一个文件，根本不知道怎么修改内容，这里我找了很多资料也没找到对应的修改文档，就通过浏览器看到的路径，然后在对应的路径里面进行覆盖。（这里尝试了图片、css这些直接可以覆盖，但是文本内容不知道如何修改。）
• 然后我mytheme/welcome主题，目前遇到一个问题，不管怎么修改，页面的样式都是来自于keycloak/welcome，并没有加载到我的主题，目前还未解决 。

四、docker

自己的测试的时候，禁止缓存，这样的话修改对应挂载的目录，样式能及时刷新出来，不需要每次都重启容器。

这里我通过容器来跑比较方便点，通过将主题copy到容器里面，然后在keycloak主题那里就会多出对应的选择。（这里也可以去官网下载代码，在linux或者windows下跑，不过要配一下环境，需要jdk17）

三个文件在同一个目录下
1、 .env 

#keycloak
KEYCLOAK_ADMIN=admin
KEYCLOAK_ADMIN_PASSWORD=admin


2、 Docker-Compose.yaml

version: '3'

services:
  chat-copilot-webapi:
    image: ai4c-keycloak
    build: 
      context: ./
      dockerfile: Dockerfile
    ports:
      - 8080:8080
    env_file:
      - ./.env
    volumes:
      - D:/githubSource/keycloak-clustered/22.0.3/themes/mytheme:/opt/keycloak/themes/mytheme

3、  Dockerfile

FROM quay.io/keycloak/keycloak:22.0 as builder

WORKDIR /opt/keycloak

RUN /opt/keycloak/bin/kc.sh build

FROM quay.io/keycloak/keycloak:22.0

COPY --from=builder /opt/keycloak/ /opt/keycloak/

# 主题模板

# COPY source dest

# 开发环境
# ENTRYPOINT ["/opt/keycloak/bin/kc.sh", "start-dev"] 

# 禁用缓存  修改样式可以立马生效
ENTRYPOINT ["/opt/keycloak/bin/kc.sh", "start-dev", "--spi-theme-static-max-age=-1", "--spi-theme-cache-themes=false", "--spi-theme-cache-templates=false"]