google-chrome-extension - 我可以将 chrome.identity 与 Firebase 自定义身份验证一起使用吗？

Question

我正在构建一个 Chrome 扩展程序，并希望使用 Firebase 来保存用户之间共享的状态。 Firebase 身份验证在 Chrome 扩展中不起作用，因为没有源域。 chrome.identity API 可用于确保用户经过身份验证并获取 OAuth 请求的访问 token 。

几个注意事项:

• 使用 chrome.storage 存储 token 并使用该 token 通过 Firebase 进行身份验证。存储区域未加密，因此从用户的磁盘读取用户 token 是微不足道的。
• 我假设 chrome.identity.getAuthToken 返回的 token 是 OAuth 访问 token ，因此是暂时的 - 它不适合作为用户的永久唯一标识符。
• 我可以向 Google OAuth API 发出请求，以交换用户个人资料 (https://www.googleapis.com/userinfo/v2/me) 的访问 token ，其中包含一个 id 字段，但这是公开的。

Answer 1

我在寻求解决类似问题时遇到了这个问题。我确定这个问题已经过时了，但也许我的解决方案可以帮助其他人解决这个问题。

Firebase认证确实可以使用chrome.identity...但是方式不是通过自定义认证方式。还有另一种方法接受来自 chrome.identity.getAuthToken 的 OAuth2 token 。

这是我在 tutorial 之后所做的一切:
(它还提到了我没有尝试过的针对非 Google 身份验证提供商的解决方案)

身份许可

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

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

一致的应用程序 ID

您需要在开发期间保持一致的应用程序 ID 才能使用 OAuth 流程。为此，您需要将 key 复制到 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 APIs 控制台中注册您的应用程序以获取客户端 ID:

1. 搜索您要使用的 API，并确保它已在您的项目中激活。就我而言，Cloud Firestore API。
2. 转到 API 访问 导航菜单项并点击创建 OAuth 2.0 客户端 ID... 蓝色按钮。
3. 选择 Chrome 应用程序 并输入您的应用程序 ID(显示在扩展程序管理页面中的相同 ID)。
4. 将此客户端 ID 放入您的 manifest.json 中。您只需要 userinfo.email scope。

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

获取并使用 Google 身份验证 token

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 服务...