Chrome 扩展程序：关于身份验证的最佳实践答案

【问题标题】：Chrome extension: best practise when it comes to authenticationChrome 扩展程序：关于身份验证的最佳实践
【发布时间】：2017-09-01 07:34:36
【问题描述】：

我正在开发一个基于 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!');
      }
    })

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

【问题讨论】：

也许JWT 代币会适合你。我在几个扩展中使用它。
感谢您的评论@Deliaz，但您能详细说明一下吗？我想在我的扩展程序中“重用”我的浏览器会话，所以我需要将 JWT 保存在 cookie 中，对吗？
我是不是在登录您的网站后，您还希望看到您已登录扩展程序？在这种情况下，我猜，您可以使用 External Message Passing 将 JWT 令牌发送到扩展程序（显然，在成功验证之后）。您可以将 JWT 放入 cookie，但我更喜欢标题。
这不是答案或建议，只是我的想法。
@JanVorcak，您能否总结一下您最终在答案中所做的事情并在此处发布？真的很有帮助

标签： javascript google-chrome google-chrome-extension

【解决方案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
}

【讨论】：

【解决方案2】：

如您所见，launchWebAuthFlow 不会利用您现有的浏览器会话。如果您拥有 tabs 权限，则可以使用 urn:ietf:wg:oauth:2.0:oob:aut 作为重定向 URL 从 window.title 读取 oauth 授权。有关更多信息，请参阅我的other answer。 This SA answer 有示例代码。

【讨论】：