由于 Cross-Origin-Opener-Policy 错误，Google 登录无法在带有 Firebase 的 Next.js 中工作

Question

我正在使用 Next.js 和 Firebase 开发 Web 应用程序。我已在应用程序中成功实现了 Google 登录，但遇到了导致登录过程无法按预期完成的问题。

当我尝试登录时，会按预期显示一个弹出窗口。但是，在控制台中，我看到以下错误：

Cross-Origin-Opener-Policy policy would block the window.closed call.

由于此错误，登录过程无法完成，用户也无法正确登录。

一些进一步的上下文：我正在本地主机上的开发环境中测试此功能。 此问题在 Chrome 上存在，但在 Firefox 上不存在。

此错误是否是由于 Cross-Origin-Opener-Policy 配置错误造成的？如果是这样，我如何在 Next.js 应用程序中为使用 Firebase 进行 Google 登录正确配置此政策？

Answer 1

是的，这可能与您的页面、登录页面的 COOP 配置以及它们的交互方式有关。 当两个页面没有相同的 COOP 时，它们最终会出现在单独的浏览上下文组中，这可能会阻止某些交互，例如 window.close 方法。

在没有看到您的代码和实现的情况下很难给出准确的解决方案，但是您可以尝试修改您的 COOP，使其与登录页面的 COOP 匹配。 这可以是same-origin或same-origin-allow-popups。

这些标头可以在 NextJS 配置中设置：https ://nextjs.org/docs/pages/api-reference/next-config-js/headers

就你的情况而言：

module.exports = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "Cross-Origin-Opener-Policy",
            value: "same-origin", // "same-origin-allow-popups"
          },
        ],
      },
    ];
  },
};

Answer 2

这似乎是一个很长一段时间没有解决的问题。不过，请尝试以下操作

1. 请检查范围 - https://stackoverflow.com/a/76574604/9640177
2. 如果您使用 Google API，请确保您已在 Firebase 和 GCP 上设置正确的授权域名或 URI - https:// stackoverflow.com/a/76547658/9640177

您还可以参考跨域隔离指南 - https://web.dev /cross-origin-isolation-guide/ 和 MDN 文档，了解有关 Cross-Origin-Opener-Policy 的更多信息

如果您使用 Google API，请确保还添加带有端口的 URI，例如 localhost:3000。您可以查看我的实时网站 - https://radheshyamdas.com/ 我正在使用使用 Next 构建的 firebase auth .js