Die Google-Anmeldung funktioniert in Next.js mit Firebase aufgrund eines Cross-Origin-Opener-Policy-Fehlers nicht

Question

Ich entwickle eine Webanwendung mit Next.js und Firebase. Ich habe die Google-Anmeldung erfolgreich in meiner Anwendung implementiert, stoße jedoch auf ein Problem, das verhindert, dass der Anmeldevorgang wie erwartet abgeschlossen wird.

Wenn ich versuche, mich anzumelden, erscheint wie erwartet ein Popup. Allerdings sehe ich in der Konsole den folgenden Fehler:

Cross-Origin-Opener-Policy würde den window.closed-Aufruf blockieren.

Aufgrund dieses Fehlers kann der Anmeldevorgang nicht abgeschlossen werden und der Benutzer kann sich nicht korrekt anmelden.

Einige weitere Zusammenhänge: Ich teste diese Funktionalität in einer Entwicklungsumgebung auf localhost. Dieses Problem besteht bei Chrome, aber nicht bei Firefox.

Ist dieser Fehler auf eine Fehlkonfiguration der Cross-Origin-Opener-Policy zurückzuführen? Wenn ja, wie konfiguriere ich diese Richtlinie in meiner Next.js-Anwendung für die Google-Anmeldung mit Firebase richtig?

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