基于React自定义Keycloak授权与密码重置页面的实现问询

一、自定义密码重置页面 #

要替换Keycloak默认的密码重置页面，核心是接管密码重置的令牌传递与最终重置操作，具体步骤如下：

• 修改后端发送重置邮件逻辑
  调用Keycloak Admin API的PUT /auth/admin/realms/{realm}/users/{id}/execute-actions-email时，除传入["UPDATE_PASSWORD"]动作参数，额外添加redirect_uri参数，值为你的React自定义密码重置页面地址（例如https://your-app.com/reset-password）。Keycloak生成的魔法链接会自动携带keycloak_action、keycloak_session、keycloak_code三个关键参数跳转至你的页面。
• React页面处理重置请求
  在自定义重置页面中，从URL参数提取上述三个Keycloak参数，展示自定义密码输入表单（含新密码、确认密码）。用户提交后，将参数与新密码一并传给后端接口。
• 后端完成密码重置
  后端调用Keycloak的POST /auth/realms/{realm}/login-actions/reset-credentials?client_id={你的客户端ID}端点，请求体携带：

  code={keycloak_code}&password={新密码}&password-confirmation={确认密码}&session_code={keycloak_session}
  

  调用成功即完成密码重置。
• 注意事项
  必须在Keycloak客户端配置中，将React重置页面地址添加到Valid Redirect URIs和Web Origins列表，避免跳转被拦截。

二、自定义授权许可页面 #

自定义第三方客户端的授权同意页面，需基于Keycloak的Authorization Code Flow，自行处理权限展示与同意逻辑：

• 调整授权请求入口
  将第三方客户端的授权端点配置为你的React自定义同意页面地址，而非Keycloak默认授权端点。
• 校验用户登录状态
  在React同意页面中，通过已有登录校验逻辑确认用户是否已登录。未登录则跳转至自定义登录页面，登录完成后返回同意页面。
• 获取待授权的权限范围
  后端调用Keycloak的GET /auth/realms/{realm}/protocol/openid-connect/auth端点，携带response_type=code、client_id={第三方客户端ID}、redirect_uri={第三方客户端回调地址}、scope={请求的权限范围}等参数，解析返回结果获取需用户确认的权限列表。
• 展示自定义同意界面
  React页面将权限范围以自定义UI展示，让用户选择同意或拒绝。用户确认同意后，将选择结果传给后端。
• 后端完成授权流程
  后端调用Keycloak授权端点完成同意操作，获取授权码，再用授权码调用POST /auth/realms/{realm}/protocol/openid-connect/token交换access_token和id_token，最后将令牌返回给第三方客户端（或按约定重定向）。
• 注意事项
  确保Keycloak第三方客户端配置中开启Consent Required选项，同时后端需持有具备足够权限的Keycloak Admin令牌，用于查询和处理授权范围。

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