前言我是谁我为什么要写这篇指南我是一个前端开发者最近接到了一个任务配合团队进行 Keycloak 的主题定制开发。从对 Keycloak 一无所知到成功搭建服务、理解原理、开始定制登录页我经历了一个完整的学习过程。这篇指南就是按照我当时的思考路径来写的希望能帮助同样作为前端开发者的你少走一些弯路。 第一章最初的问题 - Keycloak 到底是什么1.1 一句话理解Keycloak 是一个开源的认证中心。它专门负责处理用户登录、注册、权限这些事让你的应用可以专注于业务逻辑。1.2 用生活中的例子理解想象你开了一家商场你的应用商场有多个入口多个应用官网、管理后台、移动端你需要一个统一的前台来处理所有顾客的登记、发卡、身份验证这个前台就是 Keycloak1.3 核心价值不用 Keycloak用了 Keycloak每个应用都要自己写登录/注册代码一次集成所有应用共用用户在不同应用要注册多个账号一个账号访问所有应用单点登录自己实现密码加密、会话管理企业级安全机制开箱即用自己开发忘记密码、邮件验证内置完整功能升级换代困难耦合严重认证与业务完全解耦 第二章我最困惑的问题 - 它和我自己的应用是什么关系2.1 误解澄清我一开始以为用了 Keycloak是不是我的应用就不用写后端了用户数据都存在哪里正确答案Keycloak 和你自己的应用是分工合作的关系谁负责什么Keycloak你的应用用户登录/注册✅ 负责❌ 不用管发放令牌Token✅ 负责❌ 不用管存储用户密码✅ 负责❌ 不用管用户下单/购物❌ 不管✅ 负责存储订单数据❌ 不管✅ 负责商品管理❌ 不管✅ 负责2.2 架构关系图text用户访问你的 Vue 应用 → 检测未登录 → 重定向到 Keycloak 登录页 ↓ 用户输入密码 ↓ Keycloak 验证身份 ↓ 发放令牌Token给前端 ↓ 前端携带令牌访问你的后端 API → 后端验证令牌 → 返回业务数据2.3 数据库的关系数据库存储内容谁管理Keycloak 数据库用户表、角色表、客户端配置Keycloak 自己管理你的业务数据库订单表、商品表、用户资料扩展你的应用管理关键两个数据库通过用户ID关联。Keycloak 返回的令牌中包含用户IDsub字段你的业务表用这个ID标识用户。️ 第三章作为前端我怎么开始3.1 我需要后端配合吗这是我最关心的问题。答案是完全不需要作为前端你可以独立完成整个开发环境的搭建和主题定制。3.2 完整的前端独立开发流程第一步安装 DockerDocker 是什么简单理解一个可以让你一键启动各种服务的工具。访问 docker.com 下载 Docker Desktop双击安装重启电脑启动 Docker Desktop出现鲸鱼图标表示成功第二步使用 Docker Compose 启动 Keycloak 服务告别冗长的命令用配置文件一劳永逸创建项目目录textD:/my-keycloak-project/ ├── docker-compose.yml ├── themes/ │ └── my-company-theme/ │ ├── login/ │ │ ├── theme.properties │ │ └── resources/ │ │ ├── css/ │ │ │ └── styles.css │ │ └── img/ │ │ └── logo.png └── data/ # 数据持久化目录创建docker-compose.yml文件version: 3.8 services: keycloak: image: quay.io/keycloak/keycloak:latest #下载keycloak镜像 container_name: keycloak-dev command: - start-dev - --spi-theme-static-max-age-1 - --spi-theme-cache-themesfalse - --spi-theme-cache-templatesfalse environment: - KEYCLOAK_ADMINadmin - KEYCLOAK_ADMIN_PASSWORD513190jhf ports: - 8080:8080 volumes: - ./login:/opt/keycloak/themes/my-company-theme/login restart: unless-stopped启动服务bash# 进入项目目录 cd D:/my-keycloak-project # 创建容器并启动 docker-compose up -d # 查看启动日志 docker-compose logs -f # 启动容器存在 docker-compose start # 停止容器存在 docker-compose stopDocker Compose 的好处✅ 命令简短docker-compose up -d一键启动✅ 配置可复用团队共享版本控制✅ 环境一致所有人都用同样的配置✅ 数据持久化重启容器配置不丢失第三步验证是否成功浏览器访问 http://localhost:8080看到欢迎页说明成功第四步基础配置登录管理控制台admin/admin访问 http://localhost:8080/admin创建领域Realm相当于租户空间左上角下拉菜单 → Create Realm输入my-company点击 Create创建客户端Client代表你的Vue应用Clients → Create clientClient ID:vue-app下一步Client authentication 选 OFF公开客户端Valid Redirect URIs:http://localhost:5173/*Web Origins:http://localhost:5173点击 Save创建测试用户Users → Add userUsername:testuser点击 CreateCredentials 标签页 → Set password输入密码Temporary 选 OFF3.3 我的 Vue 项目怎么集成安装依赖npm install keycloak-js创建 Keycloak 工具类src/utils/keycloak.tsimport Keycloak from keycloak-js; const keycloak new Keycloak({ url: http://localhost:8080, realm: my-company, clientId: vue-app, }); export default keycloak;在 App.vue 中初始化script setup langts import { onMounted } from vue; import keycloak from ./utils/keycloak; onMounted(async () { try { const authenticated await keycloak.init({ onLoad: login-required, // 自动跳转登录页 checkLoginIframe: false, // 开发时关闭 iframe 检查 }); if (authenticated) { console.log(用户已登录, keycloak.tokenParsed); // 存储token供API请求使用 localStorage.setItem(token, keycloak.token || ); // 设置token自动刷新过期前60秒 setInterval(() { keycloak.updateToken(60) .then((refreshed) { if (refreshed) { localStorage.setItem(token, keycloak.token || ); } }) .catch(() { console.log(刷新token失败请重新登录); keycloak.login(); }); }, 5000); } } catch (error) { console.error(Keycloak 初始化失败, error); } }); /script template div idapp router-view / /div /template 第四章核心任务 - 定制登录/注册页4.1 理解 Keycloak 的主题机制Keycloak 允许你继承官方主题只覆盖需要修改的部分而不是从头重写。这样升级时只需微调大大降低维护成本。4.2 创建主题文件有四种主题分别是登录页面主题账户管理主题、管理界面主题三种页面的主题定制都有对应的主题包比如我项目中my-keycloak-theme中有三个文件夹login、admin、account就对应上面三种主题修改里面的resources、theme.properties以及比如登录页中的login.ftl文件template.ftl比如在D:/my-keycloak-project/themes/my-company-theme/login/目录中创建theme.properties# 继承官方主题 parentkeycloak # 自定义样式放在最后以覆盖默认 stylescss/login.css css/styles.css # 支持中文 localesen,zh-CN # 自定义属性可在模板中使用 companyName我的公司resources/css/styles.css/* 覆盖背景 */ .login-pf body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } /* 自定义登录框 */ .card-pf { border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); border: none; } /* 修改按钮样式 */ .btn-primary { background: #667eea; border: none; border-radius: 6px; padding: 10px; } .btn-primary:hover { background: #5a67d8; } /* 添加Logo */ #kc-header { background-image: url(../img/logo.png); background-repeat: no-repeat; background-position: center; height: 60px; margin: 20px 0; background-size: contain; } /* 美化输入框 */ .form-control { border-radius: 6px; border: 1px solid #e2e8f0; padding: 10px; } .form-control:focus { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } /* 链接样式 */ a { color: #667eea; } a:hover { color: #5a67d8; }注意在theme.properties中parent 设置地方每个主题的父主题可能不一样比如//login可以选择keycloakadmin选择keycloak.v2account选择v3 parentkeycloak.v3关键点要学会f12查看原代码然后找到对应的class再再自己的css文件中修改比较坑的一点是当定制浏览器顶部的title和logo是遇到问题三种主题的定制方式不一样login是需要修改template.ftl后两种不一样根据f12查看logo放在resources根目录下title在theme.properties中设置4.3 选择应用主题登录管理控制台进入你的 Realmmy-companyRealm Settings → Themes 标签页Login Theme 选择my-company-theme点击 Save重点因为我们在 docker-compose.yml 中配置了开发模式禁用了缓存修改 CSS 后刷新浏览器就能看到效果无需重启 第五章关键理解 - 后端怎么配合5.1 令牌验证当你的前端携带令牌访问后端 API 时后端需要验证令牌的合法性。有两种方式方式原理优缺点公钥验签用 Keycloak 的公钥本地验证✅ 性能好无网络开销❌ 无法实时吊销令牌自省调用 Keycloak API 验证✅ 可检查实时状态❌ 有网络开销性能较低5.2 后端需要配置什么你作为前端需要告诉后端同学这些信息Keycloak 服务器地址http://your-keycloak-server:8080 Realm 名称my-company Client IDvue-app JWKS 端点/realms/my-company/protocol/openid-connect/certs Issuer/realms/my-company5.3 API 请求示例// 你的前端 API 请求 const token localStorage.getItem(token); fetch(http://your-backend-api/users/profile, { headers: { Authorization: Bearer ${token}, Content-Type: application/json } }) .then(response response.json()) .then(data console.log(data)) .catch(error console.error(请求失败, error));后端收到后验证 token 签名检查 token 是否过期从 token 中解析出用户IDsub用这个ID查询业务数据❓ 第六章我遇到的坑和解决方法坑1Docker 命令报错连接不上现象failed to connect to the docker API...原因Docker Desktop 没有启动解决双击启动 Docker Desktop等右下角出现鲸鱼图标坑2修改 CSS 没反应原因Keycloak 默认启用缓存解决docker-compose.yml 中必须加上禁用缓存的参数command: - start-dev - --spi-theme-static-max-age-1 - --spi-theme-cache-themesfalse - --spi-theme-cache-templatesfalse坑3WSL 版本太旧现象WSL needs updating...解决# 以管理员身份运行 PowerShell wsl --update wsl --shutdown坑4登录后无法跳回前端原因Redirect URIs 配置错误解决在 Client 配置中设置 Valid Redirect URIs 为http://localhost:5173/*坑5Docker Compose 端口占用现象Error: listen tcp4 :8080: bind: address already in use解决# 查找占用端口的进程 netstat -ano | findstr :8080 # 在 docker-compose.yml 中修改端口 ports: - 8081:8080 # 改成其他端口 第七章总结 - Keycloak 使用要点7.1 关键理解点✅ Keycloak 是独立的认证服务不是替代你的后端✅ 用户数据归 Keycloak业务数据归你的数据库✅ 通过令牌Token关联两个系统✅ 主题开发要继承官方主题不要从头重写✅ 开发模式要禁用缓存否则修改看不到效果7.2 我的开发流程1. 安装 Docker → 2. 创建 docker-compose.yml → 3. docker-compose up -d 启动 4. 配置 Realm/Client → 5. 创建本地主题文件夹 → 6. 编写 CSS 7. 应用主题 → 8. 刷新看效果 → 9. 重复 6-8 直到满意7.3 常用 Docker Compose 命令速查命令说明docker-compose up -d后台启动所有服务docker-compose down停止并删除容器docker-compose restart重启服务docker-compose logs -f查看实时日志docker-compose ps查看服务状态docker-compose exec keycloak bash进入容器内部7.4 什么时候需要后端配合任务是否需要后端说明搭建 Keycloak 服务❌ 不需要前端自己用 Docker Compose 搞定定制登录页主题❌ 不需要纯 CSS/HTML 工作Vue 项目集成 Keycloak❌ 不需要纯前端代码后端 API 验证 token✅ 需要后端配置公钥验证用户数据同步✅ 需要决定数据同步策略 最后的话作为前端开发者刚开始接触 Keycloak 可能会觉得陌生。但一旦理解了它的核心价值——让认证与业务解耦你就会发现它其实是你的好帮手而不是额外负担。Docker Compose 的使用让整个开发过程变得异常简单再也不用手动输入冗长的命令不用担心忘记参数团队协作时只需要分享一个配置文件所有人都能获得完全一致的开发环境。现在你已经有了和我一样的起点接下来就是动手实践了。记住遇到问题先检查 docker-compose.yml 配置再看 Keycloak 控制台设置最后才是代码问题。希望这篇按我的思考路径写的指南能帮你少走一些弯路。附完整的项目结构D:/my-keycloak-project/ ├── docker-compose.yml # 服务配置核心文件 ├── themes/ │ └── my-company-theme/ │ └── login/ │ ├── theme.properties │ └── resources/ │ ├── css/ │ │ └── styles.css │ └── img/ │ └── logo.png ├── data/ # 数据持久化 └── README.md # 项目说明
Keycloak 完全使用指南：从零开始理解与应用
前言我是谁我为什么要写这篇指南我是一个前端开发者最近接到了一个任务配合团队进行 Keycloak 的主题定制开发。从对 Keycloak 一无所知到成功搭建服务、理解原理、开始定制登录页我经历了一个完整的学习过程。这篇指南就是按照我当时的思考路径来写的希望能帮助同样作为前端开发者的你少走一些弯路。 第一章最初的问题 - Keycloak 到底是什么1.1 一句话理解Keycloak 是一个开源的认证中心。它专门负责处理用户登录、注册、权限这些事让你的应用可以专注于业务逻辑。1.2 用生活中的例子理解想象你开了一家商场你的应用商场有多个入口多个应用官网、管理后台、移动端你需要一个统一的前台来处理所有顾客的登记、发卡、身份验证这个前台就是 Keycloak1.3 核心价值不用 Keycloak用了 Keycloak每个应用都要自己写登录/注册代码一次集成所有应用共用用户在不同应用要注册多个账号一个账号访问所有应用单点登录自己实现密码加密、会话管理企业级安全机制开箱即用自己开发忘记密码、邮件验证内置完整功能升级换代困难耦合严重认证与业务完全解耦 第二章我最困惑的问题 - 它和我自己的应用是什么关系2.1 误解澄清我一开始以为用了 Keycloak是不是我的应用就不用写后端了用户数据都存在哪里正确答案Keycloak 和你自己的应用是分工合作的关系谁负责什么Keycloak你的应用用户登录/注册✅ 负责❌ 不用管发放令牌Token✅ 负责❌ 不用管存储用户密码✅ 负责❌ 不用管用户下单/购物❌ 不管✅ 负责存储订单数据❌ 不管✅ 负责商品管理❌ 不管✅ 负责2.2 架构关系图text用户访问你的 Vue 应用 → 检测未登录 → 重定向到 Keycloak 登录页 ↓ 用户输入密码 ↓ Keycloak 验证身份 ↓ 发放令牌Token给前端 ↓ 前端携带令牌访问你的后端 API → 后端验证令牌 → 返回业务数据2.3 数据库的关系数据库存储内容谁管理Keycloak 数据库用户表、角色表、客户端配置Keycloak 自己管理你的业务数据库订单表、商品表、用户资料扩展你的应用管理关键两个数据库通过用户ID关联。Keycloak 返回的令牌中包含用户IDsub字段你的业务表用这个ID标识用户。️ 第三章作为前端我怎么开始3.1 我需要后端配合吗这是我最关心的问题。答案是完全不需要作为前端你可以独立完成整个开发环境的搭建和主题定制。3.2 完整的前端独立开发流程第一步安装 DockerDocker 是什么简单理解一个可以让你一键启动各种服务的工具。访问 docker.com 下载 Docker Desktop双击安装重启电脑启动 Docker Desktop出现鲸鱼图标表示成功第二步使用 Docker Compose 启动 Keycloak 服务告别冗长的命令用配置文件一劳永逸创建项目目录textD:/my-keycloak-project/ ├── docker-compose.yml ├── themes/ │ └── my-company-theme/ │ ├── login/ │ │ ├── theme.properties │ │ └── resources/ │ │ ├── css/ │ │ │ └── styles.css │ │ └── img/ │ │ └── logo.png └── data/ # 数据持久化目录创建docker-compose.yml文件version: 3.8 services: keycloak: image: quay.io/keycloak/keycloak:latest #下载keycloak镜像 container_name: keycloak-dev command: - start-dev - --spi-theme-static-max-age-1 - --spi-theme-cache-themesfalse - --spi-theme-cache-templatesfalse environment: - KEYCLOAK_ADMINadmin - KEYCLOAK_ADMIN_PASSWORD513190jhf ports: - 8080:8080 volumes: - ./login:/opt/keycloak/themes/my-company-theme/login restart: unless-stopped启动服务bash# 进入项目目录 cd D:/my-keycloak-project # 创建容器并启动 docker-compose up -d # 查看启动日志 docker-compose logs -f # 启动容器存在 docker-compose start # 停止容器存在 docker-compose stopDocker Compose 的好处✅ 命令简短docker-compose up -d一键启动✅ 配置可复用团队共享版本控制✅ 环境一致所有人都用同样的配置✅ 数据持久化重启容器配置不丢失第三步验证是否成功浏览器访问 http://localhost:8080看到欢迎页说明成功第四步基础配置登录管理控制台admin/admin访问 http://localhost:8080/admin创建领域Realm相当于租户空间左上角下拉菜单 → Create Realm输入my-company点击 Create创建客户端Client代表你的Vue应用Clients → Create clientClient ID:vue-app下一步Client authentication 选 OFF公开客户端Valid Redirect URIs:http://localhost:5173/*Web Origins:http://localhost:5173点击 Save创建测试用户Users → Add userUsername:testuser点击 CreateCredentials 标签页 → Set password输入密码Temporary 选 OFF3.3 我的 Vue 项目怎么集成安装依赖npm install keycloak-js创建 Keycloak 工具类src/utils/keycloak.tsimport Keycloak from keycloak-js; const keycloak new Keycloak({ url: http://localhost:8080, realm: my-company, clientId: vue-app, }); export default keycloak;在 App.vue 中初始化script setup langts import { onMounted } from vue; import keycloak from ./utils/keycloak; onMounted(async () { try { const authenticated await keycloak.init({ onLoad: login-required, // 自动跳转登录页 checkLoginIframe: false, // 开发时关闭 iframe 检查 }); if (authenticated) { console.log(用户已登录, keycloak.tokenParsed); // 存储token供API请求使用 localStorage.setItem(token, keycloak.token || ); // 设置token自动刷新过期前60秒 setInterval(() { keycloak.updateToken(60) .then((refreshed) { if (refreshed) { localStorage.setItem(token, keycloak.token || ); } }) .catch(() { console.log(刷新token失败请重新登录); keycloak.login(); }); }, 5000); } } catch (error) { console.error(Keycloak 初始化失败, error); } }); /script template div idapp router-view / /div /template 第四章核心任务 - 定制登录/注册页4.1 理解 Keycloak 的主题机制Keycloak 允许你继承官方主题只覆盖需要修改的部分而不是从头重写。这样升级时只需微调大大降低维护成本。4.2 创建主题文件有四种主题分别是登录页面主题账户管理主题、管理界面主题三种页面的主题定制都有对应的主题包比如我项目中my-keycloak-theme中有三个文件夹login、admin、account就对应上面三种主题修改里面的resources、theme.properties以及比如登录页中的login.ftl文件template.ftl比如在D:/my-keycloak-project/themes/my-company-theme/login/目录中创建theme.properties# 继承官方主题 parentkeycloak # 自定义样式放在最后以覆盖默认 stylescss/login.css css/styles.css # 支持中文 localesen,zh-CN # 自定义属性可在模板中使用 companyName我的公司resources/css/styles.css/* 覆盖背景 */ .login-pf body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } /* 自定义登录框 */ .card-pf { border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); border: none; } /* 修改按钮样式 */ .btn-primary { background: #667eea; border: none; border-radius: 6px; padding: 10px; } .btn-primary:hover { background: #5a67d8; } /* 添加Logo */ #kc-header { background-image: url(../img/logo.png); background-repeat: no-repeat; background-position: center; height: 60px; margin: 20px 0; background-size: contain; } /* 美化输入框 */ .form-control { border-radius: 6px; border: 1px solid #e2e8f0; padding: 10px; } .form-control:focus { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } /* 链接样式 */ a { color: #667eea; } a:hover { color: #5a67d8; }注意在theme.properties中parent 设置地方每个主题的父主题可能不一样比如//login可以选择keycloakadmin选择keycloak.v2account选择v3 parentkeycloak.v3关键点要学会f12查看原代码然后找到对应的class再再自己的css文件中修改比较坑的一点是当定制浏览器顶部的title和logo是遇到问题三种主题的定制方式不一样login是需要修改template.ftl后两种不一样根据f12查看logo放在resources根目录下title在theme.properties中设置4.3 选择应用主题登录管理控制台进入你的 Realmmy-companyRealm Settings → Themes 标签页Login Theme 选择my-company-theme点击 Save重点因为我们在 docker-compose.yml 中配置了开发模式禁用了缓存修改 CSS 后刷新浏览器就能看到效果无需重启 第五章关键理解 - 后端怎么配合5.1 令牌验证当你的前端携带令牌访问后端 API 时后端需要验证令牌的合法性。有两种方式方式原理优缺点公钥验签用 Keycloak 的公钥本地验证✅ 性能好无网络开销❌ 无法实时吊销令牌自省调用 Keycloak API 验证✅ 可检查实时状态❌ 有网络开销性能较低5.2 后端需要配置什么你作为前端需要告诉后端同学这些信息Keycloak 服务器地址http://your-keycloak-server:8080 Realm 名称my-company Client IDvue-app JWKS 端点/realms/my-company/protocol/openid-connect/certs Issuer/realms/my-company5.3 API 请求示例// 你的前端 API 请求 const token localStorage.getItem(token); fetch(http://your-backend-api/users/profile, { headers: { Authorization: Bearer ${token}, Content-Type: application/json } }) .then(response response.json()) .then(data console.log(data)) .catch(error console.error(请求失败, error));后端收到后验证 token 签名检查 token 是否过期从 token 中解析出用户IDsub用这个ID查询业务数据❓ 第六章我遇到的坑和解决方法坑1Docker 命令报错连接不上现象failed to connect to the docker API...原因Docker Desktop 没有启动解决双击启动 Docker Desktop等右下角出现鲸鱼图标坑2修改 CSS 没反应原因Keycloak 默认启用缓存解决docker-compose.yml 中必须加上禁用缓存的参数command: - start-dev - --spi-theme-static-max-age-1 - --spi-theme-cache-themesfalse - --spi-theme-cache-templatesfalse坑3WSL 版本太旧现象WSL needs updating...解决# 以管理员身份运行 PowerShell wsl --update wsl --shutdown坑4登录后无法跳回前端原因Redirect URIs 配置错误解决在 Client 配置中设置 Valid Redirect URIs 为http://localhost:5173/*坑5Docker Compose 端口占用现象Error: listen tcp4 :8080: bind: address already in use解决# 查找占用端口的进程 netstat -ano | findstr :8080 # 在 docker-compose.yml 中修改端口 ports: - 8081:8080 # 改成其他端口 第七章总结 - Keycloak 使用要点7.1 关键理解点✅ Keycloak 是独立的认证服务不是替代你的后端✅ 用户数据归 Keycloak业务数据归你的数据库✅ 通过令牌Token关联两个系统✅ 主题开发要继承官方主题不要从头重写✅ 开发模式要禁用缓存否则修改看不到效果7.2 我的开发流程1. 安装 Docker → 2. 创建 docker-compose.yml → 3. docker-compose up -d 启动 4. 配置 Realm/Client → 5. 创建本地主题文件夹 → 6. 编写 CSS 7. 应用主题 → 8. 刷新看效果 → 9. 重复 6-8 直到满意7.3 常用 Docker Compose 命令速查命令说明docker-compose up -d后台启动所有服务docker-compose down停止并删除容器docker-compose restart重启服务docker-compose logs -f查看实时日志docker-compose ps查看服务状态docker-compose exec keycloak bash进入容器内部7.4 什么时候需要后端配合任务是否需要后端说明搭建 Keycloak 服务❌ 不需要前端自己用 Docker Compose 搞定定制登录页主题❌ 不需要纯 CSS/HTML 工作Vue 项目集成 Keycloak❌ 不需要纯前端代码后端 API 验证 token✅ 需要后端配置公钥验证用户数据同步✅ 需要决定数据同步策略 最后的话作为前端开发者刚开始接触 Keycloak 可能会觉得陌生。但一旦理解了它的核心价值——让认证与业务解耦你就会发现它其实是你的好帮手而不是额外负担。Docker Compose 的使用让整个开发过程变得异常简单再也不用手动输入冗长的命令不用担心忘记参数团队协作时只需要分享一个配置文件所有人都能获得完全一致的开发环境。现在你已经有了和我一样的起点接下来就是动手实践了。记住遇到问题先检查 docker-compose.yml 配置再看 Keycloak 控制台设置最后才是代码问题。希望这篇按我的思考路径写的指南能帮你少走一些弯路。附完整的项目结构D:/my-keycloak-project/ ├── docker-compose.yml # 服务配置核心文件 ├── themes/ │ └── my-company-theme/ │ └── login/ │ ├── theme.properties │ └── resources/ │ ├── css/ │ │ └── styles.css │ └── img/ │ └── logo.png ├── data/ # 数据持久化 └── README.md # 项目说明
