带有 chrome 扩展的 Keycloak 登录

Posted 2023-02-19

【中文标题】带有 chrome 扩展的 Keycloak 登录

【英文标题】：Keycloak login ith chrome extension

【发布时间】：2021-10-03 07:30:23

【问题描述】：

我开始在纯 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 检查似乎很少见......

提前致谢

【问题讨论】：

检查您的重定向 URI (http://www.google.fr/) 是否在您的客户端允许的重定向 URI 列表中。

@sventorben 我刚刚将该网址用于测试。 keycloak 配置中的有效重定向 url 设置为“*”。我已经通过一个简单的 html/js 代码和一个本地主机调用 keycloak.login 函数来测试登录过程。一切正常。但在我的 chrome 扩展中，它不起作用......

我试过没有(redirectURL) => browser.extension.getBackgroundPage().console.log('result', redirectURL); 没有更多的成功。还是“无效参数redirect_uri”

【参考方案1】：

@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 了解我们已收到所有必要的数据？

【讨论】：

我没有使用 keyckloak 类对象来使用身份验证。我刚刚使用了 launchWebAuthFlow，因为该功能也管理 SSO。关于redirect_uri，只需使用const redirectURL = browser.identity.getRedirectURL(); 即可。

const redirectURL = browser.identity.getRedirectURL();常量客户端 ID = "**";常量范围=“openid”；让 loginURL = "https://***/auth/realms/lde-poplab/protocol/openid-connect/auth";登录网址 += ?client_id=$clientID;登录网址 += &response_type=code; loginURL += "&state = 默认";登录网址 += &redirect_uri=$encodeURIComponent(redirectURL);登录网址 += &scope=$encodeURIComponent(scopes);让网址 = ;尝试 url = await browser.identity.launchWebAuthFlow( interactive: true, url: loginURL, ) catch (err)

以上是我使用的功能，然后我重定向到 keycloak 交互式登录

我使用了 response_type=code（添加在 url 参数函数上，然后我检索由 launchWebAuthFlow 返回的授权代码切片 url

是的，它看起来像我正在使用的那个，但问题是接下来要做什么？我从launchWebAuthFlow 获得了URL https://<extension_id>.chromiumapp.org/?session_state=b7884224-6b59-4e99-9824-801fca5f1696&code=38c04022-6a7c-4e3d-9235-f982fc588b499-4b7d98d -5f6c584ab41a，但是如何进一步使用这些信息，尤其是code，来获取访问令牌？

【参考方案2】：

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

【参考方案3】：

我终于成功了：

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 感谢大家的帮助:)

【讨论】：

在我的扩展程序中，我必须检查用户是否仍处于连接状态（而他可能已被另一个应用程序注销）。我不知道如何检查会话是否仍然打开或任何可以告诉我他已注销的信息。

我成功地检查了是否需要使用登录功能重新登录，并添加了 1 个参数作为调用上下文。

【参考方案4】：

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

【讨论】：

登录 url 在控制台上发回“redirect_uri not allowed”。如我的第二张图片所示，无法再访问登录页面。