如何在Keycloak登录页添加Back to App链接（React前端）

嗨Arthur，我来帮你搞定这个问题！结合你用React前端+自定义Keycloak主题的场景，步骤其实很清晰：

1. 定位自定义主题的模板文件 #

首先找到你创建的自定义主题目录，通常结构是这样的：

your-custom-theme/
├── login/
│   ├── login.ftl       # 主登录页面模板
│   ├── form-login.ftl  # 登录表单拆分模板（部分主题会用）
│   └── css/
│       └── login.css   # 自定义样式文件

你需要修改的是登录页面的核心模板，一般是login.ftl，如果你的主题把表单单独拆分了，就修改form-login.ftl。

2. 在模板中插入"返回应用"链接 #

在模板的合适位置（比如页面顶部、登录表单上方）添加以下代码：

<div class="back-to-app">
  <a href="${redirectUri}" class="btn btn-link">Back to App</a>
</div>

划重点：${redirectUri}就是你调用keycloak.login({redirectUri: '你的应用地址'})时传入的地址！Keycloak会自动把这个参数传递到登录页面的模板上下文里，直接引用即可。

如果发现${redirectUri}不生效，试试${auth.redirectUri}——不同Keycloak版本可能变量名有细微差异，不过大多数新版本里redirectUri是直接可用的。

3. （可选）优化链接样式 #

为了让链接更贴合页面风格，可以在login.css里添加自定义样式：

.back-to-app {
  margin: 1rem 0;
  padding: 0 1rem;
}
.back-to-app a {
  text-decoration: none;
  color: #2c3e50;
}
.back-to-app a:hover {
  text-decoration: underline;
}

4. 关键验证环节 #

• 确保你的自定义主题已经在Keycloak领域设置的「主题」选项中被选中（领域管理 → 主题 → 登录主题选择你的自定义主题）。
• 务必确认你传入的redirectUri已经添加到Keycloak客户端的「Valid Redirect URIs」列表中，否则点击链接时Keycloak会拒绝跳转，出现错误提示。

这样配置后，当你调用keycloak.login({redirectUri: window.location.origin})跳转到Keycloak登录页面时，就能看到"Back to App"链接，点击后会直接返回你指定的应用地址啦！

内容的提问来源于stack exchange，提问作者Arthur Dumoulin