1

我开始在纯 JS 中的现有自制 chrome 扩展上实现 keycloak SSO 身份验证。Keycloak 服务器配置良好，我已经检查过了。我可以在 background.js 上导入 keycloak.json。我能够初始化 keycloak 对象： 在此处输入图像描述

但我对登录有点迷茫。单击登录按钮应调用 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”。 在此处输入图像描述 我无法构建登录 URL。

帮助将不胜感激。我检查了文档，但使用 chrome 扩展的 keycloak SSO 检查似乎很少见......

提前致谢

4

4 回答 4

1

仔细查看您提供的第二张图片。该 URL 显示您的参数被调用redirectURI而不是redirect_uri. 将其更改为redirect_uri，您应该没问题。

于 2021-07-28T06:45:10.623 回答
0

我终于成功了：

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 登录页面 然后我被重定向并返回到我点击扩展按钮时的页面。而且我检查了 cookie 是否正确创建（在 manifest.json 上需要多 3 行）。现在要确认 SSO 功能正常，我只需要检查是否可以继续使用 keycloak 上链接的另一个应用程序并将其“输入”为已连接。我明天会做，但我很有信心 :D 谢谢大家的帮助:)

于 2021-07-28T19:38:16.293 回答
0

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

于 2021-07-30T13:23:26.803 回答
0

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

简单地说我在做什么：

我使用keycloak.init()（不带选项）是为了能够使用该keycloak.createLoginUrl()功能，该功能会自动创建您描述的 url。接下来，我调用该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 了解我们已收到所有必要的数据？

于 2021-08-03T13:24:13.880 回答