纯JS Chrome扩展如何实现Keycloak SSO登录并解决redirect_uri报错？

核心原因 #

keycloak.login()方法默认触发当前页面跳转，而Chrome扩展的popup、后台页面不支持普通页面跳转逻辑，必须配合chrome.identity.launchWebAuthFlow托管认证流程。报错核心是自定义的redirect_uri不符合Chrome扩展规则，且和Keycloak客户端配置不匹配。

第一步：配置合法的redirect_uri #

Chrome扩展回调地址必须通过chrome.identity.getRedirectURL()API生成，格式固定为chrome-extension://<你的扩展ID>/，必须将该地址完整添加到Keycloak客户端的「有效重定向URI」列表中，末尾斜杠不可省略。

第二步：调整manifest.json添加必要权限 #

如果是Manifest V3版本扩展，添加如下配置：

{
  "permissions": ["identity"],
  "host_permissions": ["https://你的Keycloak服务域名/*"]
}

第三步：正确实现登录逻辑 #

不要手动拼接Keycloak登录地址，使用已初始化的keycloak对象生成标准登录地址，避免缺漏state、nonce、response_type等安全参数：

// 点击登录按钮触发的逻辑
async function handleLogin() {
  // 生成Chrome扩展认可的合法回调地址
  const redirectUri = chrome.identity.getRedirectURL();
  // 用keycloak实例生成标准登录地址
  const loginUrl = keycloak.createLoginUrl({
    redirectUri: redirectUri,
    scope: 'openid profile email' // 按需调整请求范围
  });
  // 调用Chrome身份认证流程
  chrome.identity.launchWebAuthFlow(
    {
      url: loginUrl,
      interactive: true
    },
    async (callbackUrl) => {
      if (chrome.runtime.lastError || !callbackUrl) {
        console.error('认证失败：', chrome.runtime.lastError);
        return;
      }
      try {
        // 处理Keycloak回调，自动兑换token
        await keycloak.processCallback(callbackUrl);
        // 登录完成，token可从keycloak.token获取
        console.log('登录成功', keycloak.token);
      } catch (err) {
        console.error('回调处理失败：', err);
      }
    }
  )
}

Keycloak客户端配置检查项 #

• 客户端类型设置为public，Chrome扩展属于无后端秘钥的公开客户端
• 「Web源」配置项添加chrome-extension://<你的扩展ID>，避免跨域拦截
• 「需要客户端认证」开关设置为关闭

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