Question

我正在开发基于Extension API的chrome扩展程序，我需要针对自己的在线服务进行身份验证。我已经阅读了大量文档，我知道我需要使用OAuth2并且我应该使用chrome.identity.launchWebAuthFlow https://developer.chrome.com/apps/app_identity#update_manifest

我设法使用launchWebAuthFlow登录。唯一的问题是，即使我已经使用浏览器会话登录，它也想要进行身份验证。因此，扩展程序的身份验证系统与浏览器中的身份验证系统是分开的。

像Grammarly这样的扩展可以检测我是否在浏览器中以Grammarly登录并根据它调整弹出内容。从我看过他们的源代码看，他们似乎正在使用cookie来检测会话。扩展程序可以使用

访问Cookie

chrome.cookies.get({ url: 'http://localhost:8777', name: 'sessionid' },
    function (cookie) {
      if (cookie) {
        console.log(cookie.value);
      }
      else {
        console.log('Can\'t get cookie! Check the name!');
      }
    })

这真的是Extension API的工作方式吗？我不能使用（IMHO）更安全的Identity API并重新使用浏览器会话吗？

Answer 1

身份验证的最佳做法是使用Cookie对其进行管理-这样，Web应用程序和扩展程序可以有一个公共会话。

您将使用以下选项（javascript）将jwt令牌作为cookie发送

{
        httpOnly: true,
        secure: process.env.NODE_ENV === 'production',
        maxAge: 1000 * 60 * 60 * 24 * 60, // 60 days,
        sameSite: 'None'
}

（您可能要检查chrome：// flags）

此cookie将自动存储以用于后续请求。

在客户端-

您应该创建一个新的cookie变量。

        document.cookie = "signedin=true"

import Cookies from 'js-cookie'

if(Cookies.get('signedin') {
  // ... redirect to dashboard
}
else {
  // ... show login
}

Answer 2

就像您注意到的那样，launchWebAuthFlow不会利用您现有的浏览器会话。如果您具有选项卡权限，则可以使用urn:ietf:wg:oauth:2.0:oob:aut作为重定向URL从window.title中读取oauth授权。有关它的更多信息，请参阅我的other answer。 This SA answer有示例代码。

Chrome扩展程序：身份验证时的最佳做法

2 个答案: