Log Masuk Google tidak berfungsi dalam Next.js dengan Firebase kerana ralat Polisi-Pembuka-Silang Asal

Question

Saya sedang membangunkan aplikasi web menggunakan Next.js dan Firebase. Saya telah berjaya melaksanakan Log Masuk Google dalam aplikasi saya, tetapi saya menghadapi masalah yang menghalang proses log masuk daripada selesai seperti yang diharapkan.

Apabila saya cuba log masuk, pop timbul muncul seperti yang dijangkakan. Walau bagaimanapun, dalam konsol saya melihat ralat berikut:

Dasar-Dasar-Pembuka-Cross-Origin akan menyekat tetingkap.panggilan tertutup.

Disebabkan ralat ini, proses log masuk tidak dapat diselesaikan dan pengguna tidak boleh log masuk dengan betul.

Sesetengah konteks lanjut: Saya sedang menguji fungsi ini dalam persekitaran pembangunan pada localhost. Isu ini wujud pada Chrome tetapi bukan Firefox.

Adakah ralat ini disebabkan oleh salah konfigurasi Dasar-Pembuka-Silang Asal? Jika ya, bagaimanakah saya boleh mengkonfigurasi dasar ini dengan betul dalam aplikasi Next.js saya untuk Log Masuk Google dengan Firebase?

Answer 1

Ya, ini mungkin ada kaitan dengan konfigurasi COOP halaman anda, halaman log masuk dan cara ia berinteraksi. Apabila dua halaman tidak mempunyai COOP yang sama, halaman tersebut akan berada dalam kumpulan konteks penyemakan imbas yang berasingan, yang mungkin menghalang interaksi tertentu, seperti kaedah window.close.

Sukar untuk memberikan penyelesaian yang tepat tanpa melihat kod dan pelaksanaan anda, tetapi anda boleh cuba mengubah suai COOP anda supaya ia sepadan dengan COOP halaman log masuk. Ini boleh jadi same-origin或same-origin-allow-popups.

Pengepala ini boleh ditetapkan dalam konfigurasi NextJS: https://nextjs.org/docs/pages/api-reference/next-config-js/headers

Dalam kes anda:

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

Answer 2

Ini nampaknya masalah yang sudah lama tidak selesai. Walau bagaimanapun, sila cuba perkara berikut

1. Sila semak skop - https://stackoverflow.com/a/76574604/9640177
2. Jika anda menggunakan API Google, pastikan anda telah menetapkan domain atau URI dibenarkan yang betul pada Firebase dan GCP - https:// stackoverflow.com/a/76547658/9640177

Anda juga boleh merujuk kepada Panduan Pengasingan Cross-Asal - https://web.dev/cross-origin-isolation-guide/ dan dokumentasi MDN untuk mengetahui lebih lanjut tentang Cross-Origin-Opener-Policy

Jika anda menggunakan Google API, pastikan anda turut menambah URI dengan port, mis. Anda boleh menyemak tapak web langsung saya - localhost:3000https://radheshyamdas.com/ Saya menggunakan firebase auth .js yang dibina dengan Next