我正在尝试使用 React js 构建清单 V3 chrome 扩展,该扩展应该连接到 firestore 并执行 CRUD 任务。扩展程序的用户应使用其现有的 Gmail 帐户登录。 Google 的 CSP 策略阻止从外部源加载脚本并阻止用户打开弹出窗口(对于signInWithPopup 方法),这让我的生活变得困难。我在网上看到很多人都在为此苦苦挣扎。 有人可以一步步解释我如何实现身份验证吗?
firebase的官方文档说我应该将google的登录弹出窗口放在I-frame中: https://firebase.google.com/docs/auth/web/chrome-extension,但不幸的是我无法使其工作。
这里有没有人成功地实现了这一点,并且可以逐步向我解释如何才能完成这项工作?
转到 Firebase 控制台。在身份验证选项卡中启用 Google 登录方法。
在您的扩展程序中初始化 Firebase**:在您的项目中安装 Firebase (npm install firebase) 并使用 Firebase 项目的凭据对其进行初始化。
处理登录过程*:由于 CSP 限制,您无法打开弹出窗口,因此您需要使用 firebase.auth().currentUser 方法来检查用户是否已签名如果没有,您可以使用 firebase.auth().signInWithRedirect(provider) 方法将用户重定向到登录页面。
处理登录重定向**:在您的index.html文件中,您可以使用全页iframe来处理登录重定向。确保将 src 属性设置为扩展程序弹出页面的 URL。
处理弹出页面的登录**:在弹出页面上,您可以使用 firebase.auth().getRedirectResult() 方法获取登录结果。如果登录成功,您可以关闭弹出页面并将用户返回到您的分机。