ReactJS集成Keycloak PKCE：获取Token因未传code_verifier报错求助

问题根源 #

1. 你手动拼接登录URL的方式存在错误：CODE_VERIFIER变量的格式写错了，应该是&code_verifier= + code_verifier，而非直接拼接字符串，这会导致Keycloak无法识别该参数。
2. 生成的code_verifier没有被Keycloak客户端实例保存，因此在回调后获取Token的请求中，适配器无法自动携带该参数。
3. 配置中存在重复项：code-challenge-method和pkce-method是同一配置，保留其一即可。

修正方案 #

1. 正确生成并保存code_verifier，使用适配器方法拼接登录URL

修改generateUrl函数，将code_verifier存入sessionStorage，并通过Keycloak的createLoginUrl方法传入code_challenge参数，避免手动拼接出错：

// _kc 是Keycloak客户端适配器实例
function generateUrl() {
  const { code_verifier, code_challenge } = pkceChallenge();
  // 将code_verifier存入sessionStorage，回调时需要用到
  sessionStorage.setItem('code_verifier', code_verifier);
  // 用适配器方法生成登录URL，自动拼接code_challenge参数
  const authorizationUrl = _kc.createLoginUrl({
    code_challenge: code_challenge,
    code_challenge_method: 'S256'
  });
  window.location.href = authorizationUrl;
}

2. 在初始化Keycloak时传入code_verifier

当Keycloak重定向回应用后，在初始化实例时从sessionStorage取出code_verifier，让适配器自动携带到Token请求中：

const initOptions = {
  onLoad: 'login-required', // 按需设置初始化行为
  code_verifier: sessionStorage.getItem('code_verifier')
};

_kc.init(initOptions)
  .then(authenticated => {
    if (authenticated) {
      // 认证成功后的逻辑
      sessionStorage.removeItem('code_verifier'); // 用完后清理存储
    }
  })
  .catch(error => {
    console.error('初始化失败:', error);
  });

3. 可选：重写适配器的Token请求方法（兜底方案）

如果上述方法仍不生效，可以重写Keycloak的fetchToken方法，强制在Token请求中添加code_verifier：

const originalFetchToken = _kc.fetchToken;
_kc.fetchToken = function(options) {
  const codeVerifier = sessionStorage.getItem('code_verifier');
  if (codeVerifier) {
    options = { ...options, code_verifier: codeVerifier };
  }
  return originalFetchToken.call(this, options);
};

// 之后正常初始化Keycloak
_kc.init(initOptions);

关键说明 #

• 开启enable-pkce: true后，Keycloak JS适配器其实可以自动生成code_challenge和code_verifier，如果你不需要自定义生成逻辑，可以直接省略手动生成步骤，适配器会自动处理整个流程。
• 确保public-client: true配置正确，PKCE仅适用于公开客户端。

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