Firebase第三方AuthProvider (Google/Facebook/etc)使用chrome扩展清单v3登录
最近，Chrome扩展的清单版本3一直在折磨我。到目前为止还能在它周围航行，但这一次真的让我很困惑。我正在尝试使用Firebase认证的Chrome扩展，特别是与第三方供应商，如谷歌和Facebook。我已经设置了使用Google登录的Firebase配置，并在Chrome扩展的选项页面中创建了一个登录部分，并设置了Firebase。
现在，在使用auth提供程序时有两个登录选项，signInWithRedirect和signInWithPopup。我尝试过这两种方法，但由于不同的原因都失败了。signInWithRedirect似乎是一个完全的死胡同，因为它重定向到auth提供程序，当它试图重定向回chrome-扩展名:/./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修改。脚本-src、object-src和worker-src指令可能只有以下值：
selfnone- 任何本地主机源(
http://localhost、http://127.0.0.1或这些域上的任何端口)
那么，谷歌Chrome扩展程序真的没有办法通过Google的Firebase与Google auth提供商进行身份验证吗？我所能想到的唯一解决办法是创建一些托管站点来进行身份验证，让Chrome扩展注入一个内容脚本，并让托管站点通过事件或其他方式将auth细节传递给Chrome扩展。不过，这似乎是一次巨大的黑客攻击，而且可能存在安全漏洞。还有其他人有主意吗？
回答 1
Stack Overflow用户
发布于 2022-02-04 08:01:29
虽然在评论中提到，这对使用chrome.identity的Google提供商是有效的，但遗憾的是，没有代码示例，所以我不得不自己想办法。
下面是我在这个教程之后所做的事情
(它还提到了非谷歌auth提供商的解决方案，我没有尝试过)
身份许可
首先，您需要使用chrome标识API的权限。通过将它添加到您的manifest.json中就可以得到它。
{
...
"permissions": [
"identity"
],
...
}一致应用程序ID
您需要在开发期间使用一致的应用程序ID才能使用OAuth进程。为此，您需要在已安装的manifest.json版本中复制密钥。
要获得一个合适的key值，首先从一个.crx文件中安装您的扩展名(您可能需要上传您的扩展名或手动将其打包)。然后，在您的用户数据目录(在Default/Extensions/EXTENSION_ID/EXTENSION_VERSION/manifest.json.上是~/Library/Application\ Support/Google/Chrome)中，查看文件~/Library/Application\ Support/Google/Chrome您将看到在那里填充的键值。
{
...
"key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAgFbIrnF3oWbqomZh8CHzkTE9MxD/4tVmCTJ3JYSzYhtVnX7tVAbXZRRPuYLavIFaS15tojlRNRhfOdvyTXew+RaSJjOIzdo30byBU3C4mJAtRtSjb+U9fAsJxStVpXvdQrYNNFCCx/85T6oJX3qDsYexFCs/9doGqzhCc5RvN+W4jbQlfz7n+TiT8TtPBKrQWGLYjbEdNpPnvnorJBMys/yob82cglpqbWI36sTSGwQxjgQbp3b4mnQ2R0gzOcY41cMOw8JqSl6aXdYfHBTLxCy+gz9RCQYNUhDewxE1DeoEgAh21956oKJ8Sn7FacyMyNcnWvNhlMzPtr/0RUK7nQIDAQAB",
...
}将这一行复制到源manifest.json。
向Google注册扩展
您需要在Google控制台中注册应用程序以获取客户端ID：
- 搜索要使用的API，并确保它在项目中被激活。在我的例子中，云修复API。
- 转到API Access导航菜单项并单击创建OAuth 2.0客户端ID.蓝色按钮。
- 选择Chrome 并输入您的应用程序ID (在扩展管理页面中显示相同的ID )。
- 将这个客户端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);
});
});玩你的消防基地服务..。
https://stackoverflow.com/questions/68311559
复制相似问题
腾讯云开发者
