由於 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