Firebase 3rd-party AuthProvider (Google/Facebook/etc) 使用 chrome 扩展清单 v3 登录

Question

Chrome 扩展的 Manifest 版本 3 最近让我苦恼不已。到目前为止我已经能够浏览它了，但是这个确实难倒了我。我正在尝试对 Chrome 扩展程序使用 Firebase 身份验证，特别是与 Google 和 Facebook 等第三方身份验证提供商一起使用。我已经为“使用 Google 登录”设置了 Firebase 配置，并在 Chrome 扩展程序的选项页面中创建了登录部分，并设置了 Firebase SDK。

现在，使用身份验证提供程序时有两个登录选项，signInWithRedirect以及signInWithPopup。我已经尝试过这两种方法，但由于不同的原因都失败了。signInWithRedirect似乎完全是一个死胡同，因为它重定向到身份验证提供程序，并且当它尝试重定向回 chrome-extension://.../options.html 页面时，它只是重定向到“about:blank#blocked” 。

当尝试使用时signInWithPopup，我反而得到

Refused to load the script 'https://apis.google.com/js/api.js?onload=__iframefcb776751' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

在 v2 中，您只需添加https://apis.google.com到清单中的 content_security_policy 即可。但在 v3 中，文档说

“此外，MV3 不允许对 MV2 中允许的 extension_pages 进行某些 CSP 修改。 script-src、object-src 和 worker-src 指令只能具有以下值：”

• self
• none
• 任何本地主机源（http://localhost、http://127.0.0.1或这些域上的任何端口）

那么Google Chrome扩展程序真的没有办法通过Google 的 Firebase向Google 身份验证提供商进行身份验证吗？我能想到的唯一解决方法是创建一些进行身份验证的托管网站，让 Chrome 扩展程序注入内容脚本，并让托管网站通过事件或其他方式将身份验证详细信息传递回 Chrome 扩展程序。看起来像是一个巨大的黑客攻击，并且可能存在安全漏洞。还有人有想法吗？？

Answer 1

尽管评论中提到这可以与使用 chrome.identity 的 Google 身份验证提供商一起使用，但遗憾的是没有代码示例，所以我必须自己弄清楚如何做到这一点。

这是我按照本教程执行的操作：（
它还提到了我没有尝试过的非 Google 身份验证提供商的解决方案）

身份许可

首先，您需要获得使用 chrome 身份 API 的权限。您可以通过将其添加到您的manifest.json：

{
  ...
  "permissions": [
    "identity"
  ],
  ...
}

一致的应用程序 ID

您需要在开发过程中应用程序 ID 保持一致才能使用 OAuth 流程。为此，您需要将密钥复制到已安装的manifest.json.

要获得合适的key值，请首先从文件安装扩展.crx（您可能需要上传扩展或手动打包）。然后，在您的用户数据目录（在 macOS 上为~/Library/Application\ Support/Google/Chrome）中，查找文件 Default/Extensions/EXTENSION_ID/EXTENSION_VERSION/manifest.json。您将看到那里填写的键值。

{
  ...
  "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAgFbIrnF3oWbqomZh8CHzkTE9MxD/4tVmCTJ3JYSzYhtVnX7tVAbXZRRPuYLavIFaS15tojlRNRhfOdvyTXew+RaSJjOIzdo30byBU3C4mJAtRtSjb+U9fAsJxStVpXvdQrYNNFCCx/85T6oJX3qDsYexFCs/9doGqzhCc5RvN+W4jbQlfz7n+TiT8TtPBKrQWGLYjbEdNpPnvnorJBMys/yob82cglpqbWI36sTSGwQxjgQbp3b4mnQ2R0gzOcY41cMOw8JqSl6aXdYfHBTLxCy+gz9RCQYNUhDewxE1DeoEgAh21956oKJ8Sn7FacyMyNcnWvNhlMzPtr/0RUK7nQIDAQAB",
  ...
}

将此行复制到您的源中manifest.json。

使用 Google Cloud API 注册您的扩展程序

您需要在Google API 控制台中注册您的应用程序才能获取客户端 ID：

1. 搜索您要使用的 API 并确保它在您的项目中已激活。就我而言，Cloud Firestore API。
2. 转至API Access导航菜单项，然后单击Create an OAuth 2.0 client ID ... 蓝色按钮。
3. 选择Chrome 应用程序并输入您的应用程序 ID（与扩展程序管理页面中显示的 ID 相同）。
4. 将此客户端 ID放入您的manifest.json. 您只需要userinfo.email 范围。

{
  ...
  "oauth2": {
    "client_id": "171239695530-3mbapmkhai2m0qjb2jgjp097c7jmmhc3.apps.googleusercontent.com",
    "scopes": [
      "https://www.googleapis.com/auth/userinfo.email"
    ]
  }
  ...
}

获取并使用 Google 身份验证令牌

chrome.identity.getAuthToken({ 'interactive': true }, function(token) {
    // console.log("token: " + token);
    let credential = firebase.auth.GoogleAuthProvider.credential(null, token);
    firebase.auth().signInWithCredential(credential)
        .then((result) => {
            // console.log("Login successful!");
            DoWhatYouWantWithTheUserObject(result.user);
        })
        .catch((error) => {
            console.error(error);
        });
});

尽情享受您的 Firebase 服务...