keycloak登录-修改页面

近期的项目用 keycloak 做统一登录的入口，前端登录页直接跳转 keycloak 登录，所以需要对登录页面的样式稍做修改，本篇基于 keycloak 26.3.2 版本。
后续：后端表示坑多，放弃这个选型。

文件结构

1
2
3
4
5
6
7
8
9
10
├── js/                                  # 和前端相关的文件，实测无法直接修改
├── themes/                              # 配置主题相关
│   ├── src/main/resources               # 主题资源文件
│   │   ├── META-INF                     # 选项配置
│   │   │   ├── keycloak-themes.json     
│   │   ├── theme                        # 主题å配置      
│   │   │   ├── base                     # 基础，无样式版本      
│   │   │   ├── keycloak                 # 自带版本      
│   │   │   ├── keycloak.v2              # 自带版本      
│   │   │   ├── swai                     # 自定义版本

修改步骤

  1. 在 keycloak-themes.json 中添加新的选项

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    {
        "themes": [
            ...
            {
                "name": "swai",
                "types": [
                    "login"
                ]
            }
        ]
    }

  2. 这次仅修改一个登录页面，所以复制了 keycloak.v2/login 文件夹，重命名为 swai，修改其中的 css，如果有图片资源，放入文件夹下面的 resources 文件夹中。

    1
    2
    3
    :root {
        --keycloak-bg-logo-url: url("../img/login-big.png");
    }

    样式修改

  3. 部署的服务需要先清除缓存，后重启。

    1
    2
    ./mvnw clean install -DskipTests -DsocksProxyHost=127.0.0.1 -DsocksProxyPort=7891
    java -jar quarkus/server/target/lib/quarkus-run.jar start-dev --http-port=10000

  4. 在网页中选择 Realm setting/Themes，切换成配置好的选项。
    网页配置

  5. 刷新浏览器，背景图片替换成功。
    登录页面

附录
参考

环境配置

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！