一、背景
最近做的项目,需要集成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"]