Heim  >  Fragen und Antworten  >  Hauptteil

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

<p>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. </p> <p>Wenn ich versuche, mich anzumelden, erscheint wie erwartet ein Popup. Allerdings sehe ich in der Konsole den folgenden Fehler: </p> <pre class="brush:php;toolbar:false;">Cross-Origin-Opener-Policy würde den window.closed-Aufruf blockieren.</pre> <p>Aufgrund dieses Fehlers kann der Anmeldevorgang nicht abgeschlossen werden und der Benutzer kann sich nicht korrekt anmelden. </p> <p>Einige weitere Zusammenhänge: Ich teste diese Funktionalität in einer Entwicklungsumgebung auf localhost. <strong>Dieses Problem besteht bei Chrome, aber nicht bei Firefox. </strong></p> <p>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? </p>
P粉020085599P粉020085599444 Tage vor970

Antworte allen(2)Ich werde antworten

  • P粉616111038

    P粉6161110382023-08-26 18:51:46

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

    在没有看到您的代码和实现的情况下很难给出准确的解决方案,但是您可以尝试修改您的 COOP,使其与登录页面的 COOP 匹配。 这可以是same-originsame-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"
              },
            ],
          },
        ];
      },
    };
    

    Antwort
    0
  • P粉616383625

    P粉6163836252023-08-26 13:48:14

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

    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

    Antwort
    0
  • StornierenAntwort