javascript - Chrome 扩展 : best practise when it comes to authentication

Question

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

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

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

访问 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!');
      }
    })

这真的是扩展 API 的工作方式吗？我不能使用(恕我直言)更安全的身份 API 并重新使用浏览器 session 吗？

Answer 1

身份验证的最佳做法是使用 cookie 进行管理 - 这样，网络应用程序和扩展程序就可以有一个共同的 session 。

您可以使用这些选项 (javascript) 将 jwt token 作为 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
}