Chrome扩展程序:身份验证方面的最佳做法

Question

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

我设法使用登录工作launchWebAuthFlow.唯一的问题是,即使我已经使用浏览器会话登录,它也想要进行身份验证.因此,extension的auth系统与浏览器中的auth系统是分开的.

像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 应用程序和扩展程序就可以拥有共同的会话。

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

{
        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 不会利用您现有的浏览器会话。如果您有选项卡权限，您可以从 window.title 中读取 oauth 授权，urn:ietf:wg:oauth:2.0:oob:aut并将其用作重定向 URL。有关它的更多信息，请参阅我的其他答案。这个 SA 答案有示例代码。