Vue.js集成Keycloak遇PKCE code verifier未指定错误求助

这个错误是因为你的Keycloak Realm开启了强制PKCE验证，授权码流程必须完整实现PKCE机制，只传基础参数无法通过校验。以下是具体修复步骤：

1. 生成PKCE密钥对 #

在发起授权请求（获取授权码code的步骤）之前，前端需要生成两个核心参数：

• code_verifier：32-128位的随机字符串，允许使用字母、数字，以及-、_、~、.这几个特殊字符。
• code_challenge：将code_verifier做SHA-256哈希后，再进行Base64URL编码（去掉末尾的=，把+替换为-，/替换为_）得到的值。
• 同时指定code_challenge_method=S256（对应SHA-256哈希方式）

2. 授权请求携带PKCE参数 #

在跳转到Keycloak授权页面的URL里，除了原有的client_id、redirect_uri、response_type=code等参数，还要追加：

&code_challenge={你的code_challenge值}&code_challenge_method=S256

3. 令牌交换请求添加code_verifier #

调用Token API（http://localhost:8080/realms/kredo-dev/protocol/openid-connect/token）时，请求体必须加入code_verifier参数，值就是第一步生成的随机字符串，要和授权时用的code_challenge严格配对。

最终请求体参数应包含：

• code：获取到的授权码
• client_id：你的应用客户端ID
• redirect_uri：和授权请求完全一致的回调地址
• grant_type=authorization_code
• code_verifier：第一步生成的密钥字符串

Vue示例代码片段 #

// 生成code_verifier
function generateCodeVerifier() {
  const array = new Uint32Array(56 / 2);
  window.crypto.getRandomValues(array);
  return Array.from(array, dec => ('0' + dec.toString(16)).substr(-2)).join('');
}

// 生成code_challenge
async function generateCodeChallenge(verifier) {
  const encoder = new TextEncoder();
  const data = encoder.encode(verifier);
  const digest = await window.crypto.subtle.digest('SHA-256', data);
  return btoa(String.fromCharCode(...new Uint8Array(digest)))
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=+$/, '');
}

// 发起授权请求前生成并存储verifier
const codeVerifier = generateCodeVerifier();
const codeChallenge = await generateCodeChallenge(codeVerifier);
localStorage.setItem('code_verifier', codeVerifier);

// 跳转到Keycloak授权页的URL示例
const authUrl = `http://localhost:8080/realms/kredo-dev/protocol/openid-connect/auth?client_id=your-client-id&redirect_uri=${encodeURIComponent(window.location.origin + '/callback')}&response_type=code&code_challenge=${codeChallenge}&code_challenge_method=S256`;
window.location.href = authUrl;

// 回调页面的令牌交换请求
const urlParams = new URLSearchParams(window.location.search);
const codeVerifier = localStorage.getItem('code_verifier');
const tokenResponse = await fetch('http://localhost:8080/realms/kredo-dev/protocol/openid-connect/token', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: new URLSearchParams({
    code: urlParams.get('code'),
    client_id: 'your-client-id',
    redirect_uri: window.location.origin + '/callback',
    grant_type: 'authorization_code',
    code_verifier: codeVerifier
  })
});

额外检查项 #

• 确认Keycloak客户端设置中，Access Type为public（PKCE主要用于SPA这类公共客户端）
• 确保授权请求和令牌交换请求的redirect_uri完全一致，包括协议、域名、路径

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