Keycloak 登录 i chrome 扩展

问题描述

我开始在纯 JS 中对现有的自制 chrome 扩展程序实施 keycloak SSO 身份验证。 Keycloak 服务器配置良好，我已经检查过了。我可以在 background.js 上导入 keycloak.json。我能够初始化 keycloak 对象： enter image description here

但是我对登录有点迷茫。单击登录按钮应调用 keycloak.login 函数。一个简单的 keycloak.login({redirectUri:${url_extension_bckg}?action=login}); 显然不起作用。所以我找到了 1 个示例，但使用 angular 运行：

async function login() {
  try {
    browser.identity.launchWebAuthFlow(
      {url: `https://AUTH_URL/auth/realms/realmName/protocol/openid-connect/auth?client_id=client&action=login`,interactive: true},(redirectURL) => {
        browser.extension.getBackgroundPage().console.log('result',redirectURL);
      }
    )
  } catch (err) {
    console.log(err);
  }
  
}

我试过了，但得到“无效参数：redirect_uri”。 enter image description here 我无法实现构建登录 URL。

帮助将不胜感激。我检查了文档，但使用 chrome 扩展程序检查 keycloak SSO 似乎非常罕见......

提前致谢

解决方法

仔细查看您提供的第二张图片。该 URL 显示您的参数被称为 redirectURI 而不是 redirect_uri。将其更改为 redirect_uri 就可以了。

我终于成功了：

async function login() {
  const redirectURL = browser.identity.getRedirectURL();
  console.log("redirectURL : ",redirectURL)
  const clientID = "*******";
  const scopes = "openid";
  let authURL = "https://URL_AUTH_SERVER/auth/realms/REALM_NAME/protocol/openid-connect/auth";
  authURL += `?client_id=${clientID}`;
  authURL += `&response_type=code`;
  authURL += "&state = default";
  authURL += `&redirect_uri=${encodeURIComponent(redirectURL)}`;
  authURL += `&scope=${encodeURIComponent(scopes)}`;

  return browser.identity.launchWebAuthFlow({
    interactive: true,url: authURL
  });
}

keycloak Login Page 然后我被重定向并返回到我单击扩展按钮时所在的页面。我已经检查过 cookie 是正确创建的（在 manifest.json 上还需要 3 行）。现在要确认 SSO 功能正常，我只需要检查我是否可以继续使用 keycloak 上链接的另一个应用程序并将其“输入”为已连接。我明天会做，但我很有信心：D 感谢大家的帮助:)

我找到了方法:) 使用存储令牌的控制，当我要求注销我的扩展时，它总是被删除。我只是检查弹出窗口是否存在存储的令牌。如果不是，我调用登录功能，如果仍然登录，则通过 SSO 进行验证。如果没有，则重定向到 keycloak 模板登录页面。

@alainebdev 您能否提供更多代码示例？我遇到了类似的问题，目前还无法解决。

简要说明我在做什么：

我使用 keycloak.init()（不带选项）是为了能够使用 keycloak.createLoginUrl() 函数，它会自动创建您描述的网址。接下来，我调用 launchWebAuthFlow 函数以打开带有授权界面的弹出窗口，我们在此登录，获取带有授权数据的 url，然后返回应用程序。

在代码中是这样的：

keycloak.init()
  .then(auth => {
      const loginPageUrl = keycloak.createLoginUrl({redirectUri: 'https://<extension_id>.chromiumapp.org'})

      chrome.identity.launchWebAuthFlow({
          url: loginPageUrl,interactive: true
      },authUrl => {
          console.log('authUrl: ',authUrl)
      }
  }

到目前为止，一切都很顺利。在这部分代码中，我有一个 authUrl 行，其中包含 Keyclak 的授权数据，我不知道如何让 Keycloak 读取这些数据。它的任何方法（init 或 login）都没有我可以传递它的相应属性。

我们如何让 Keycloak 知道我们已经收到了所有必要的数据？

keycloak keycloak-connect