Angular集成Keycloak：如何获取PKCE code verifier用于后端换token？

一、直接获取Code Verifier解决当前报错 #

你使用的keycloak-js 25.0.6版本中，当启用PKCE（指定pkceMethod: 'S256'）时，Keycloak实例会自动生成并存储codeVerifier值。你可以直接通过实例的codeVerifier属性获取该值，再和授权码（code）一起发送给后端，就能解决后端兑换令牌时的"PKCE code verifier not specified"错误。

示例代码：

// 登录成功后提取code和codeVerifier
const authCode = this.keycloak.authResponse?.code;
const codeVerifier = this.keycloak.codeVerifier;

// 将两个参数一同发送至后端兑换令牌接口
this.http.post('/backend/exchange-token', { code: authCode, codeVerifier }).subscribe(...);

后端调用Keycloak令牌接口时，只需把code_verifier参数和code、client_id、client_secret等参数一同传递即可。

二、架构设计的优化方案 #

当前前端处理PKCE流程再传递code给后端的方案可行，但有更安全的架构选择：让后端作为OAuth2客户端主导整个授权流程。

优化后的流程： #

1. 前端点击登录时，直接跳转至后端的登录接口（如/api/login），而非调用Keycloak前端登录方法。
2. 后端生成PKCE的code verifier和code challenge，随后重定向至Keycloak授权端点，并携带code challenge等必要参数。
3. 用户在Keycloak完成登录后，Keycloak会重定向回后端的回调接口（如/api/login/callback）。
4. 后端从回调请求中获取授权码（code），结合之前保存的code verifier、客户端密钥等，向Keycloak请求令牌。
5. 后端将令牌存入服务器会话，再重定向回前端；前端后续通过会话标识（如Cookie）访问后端接口。

该方案的优势： #

• 安全性更高：令牌全程由后端管理，前端不会接触到敏感的access token或refresh token，规避前端存储令牌的泄露风险。
• 流程更规范：PKCE的生成与验证由后端统一处理，无需前端传递code verifier，减少前后端交互的安全风险点。
• 会话管理更便捷：令牌与服务器会话直接绑定，便于后续做权限校验、令牌刷新和会话过期管理。

注意事项： #

• 后端需使用Java的Keycloak客户端库（如keycloak-admin-client或Spring Security OAuth2）处理OAuth2流程。
• 需将后端的回调接口地址配置到Keycloak客户端的"Valid Redirect URIs"列表中。

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