React SPA对接Keycloak使用带PKCE授权码流获取OIDC访问令牌问题

问题1：code返回在查询参数是否正常 #

这是正常行为，完全符合OAuth 2.0规范：

• 只有Implicit Flow会将令牌等敏感参数放在哈希片段中返回，避免被传输到后端服务器
• Authorization Code Flow返回的code本身是一次性、短时有效的非敏感凭证，就算被后端服务器日志捕获也无法单独使用，因此规范默认放在查询参数中返回，不存在安全风险。

问题2：调用/token接口要求提供client_secret的原因及解决方法 #

该报错是两个配置/参数问题共同导致的，按以下顺序排查即可：

第一步：修正Keycloak客户端配置 #

Keycloak中创建的客户端访问类型配置错误：

• 面向前端SPA的客户端必须将「访问类型」设置为public，只有面向后端服务的机密客户端才需要设置为confidential，后者才会要求传入client_secret
• 同时确认客户端配置中已开启「标准流启用」开关，回调地址、允许的Web源配置和实际使用的地址匹配

第二步：补全/token接口的必填参数 #

PKCE流程下兑换令牌必须传入本地生成的原始code_verifier参数，当前的请求参数缺失该字段：

• 之前生成code_challenge时所用的原始随机字符串就是code_verifier，Keycloak需要用该值和之前传入的code_challenge做校验，确认请求身份一致
• 额外说明：当前请求里的client_session参数不是/token接口的必填参数，可以直接删除

修正后的/token请求form参数应该包含以下字段即可：

grant_type: authorization_code
code: <从/auth接口返回的code值>
redirect_uri: 和/auth请求一致的回调地址
client_id: 客户端ID
code_verifier: 本地生成的原始随机字符串

完整流程核对 #

标准SPA+Keycloak+Authorization Code Flow with PKCE的完整流程如下，可对照排查：

1. 前端生成长度在43~128位的随机字符串作为code_verifier
2. 对code_verifier做SHA256哈希后做Base64URL编码得到code_challenge
3. 携带code_challenge、code_challenge_method=S256等参数请求/auth接口，跳转到Keycloak登录页
4. 登录成功后Keycloak回调到指定redirect_uri，返回code等查询参数
5. 拿code+code_verifier等参数请求/token接口，不需要传client_secret，直接拿到access_token、id_token等凭证
6. 后续请求Java API时在Authorization头携带Bearer <access_token>即可

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