Cross-Origin-Opener-Policy 오류로 인해 Firebase를 사용하는 Next.js에서 Google 로그인이 작동하지 않습니다.

Question

저는 Next.js와 Firebase를 사용하여 웹 애플리케이션을 개발하고 있습니다. 내 애플리케이션에서 Google 로그인을 성공적으로 구현했지만 로그인 프로세스가 예상대로 완료되지 않는 문제가 발생했습니다.

로그인을 시도하면 예상한 대로 팝업이 나타납니다. 그러나 콘솔에는 다음 오류가 표시됩니다.

Cross-Origin-Opener-Policy 정책은 window.closed 호출을 차단합니다.

이 오류로 인해 로그인 프로세스가 완료될 수 없으며 사용자가 올바르게 로그인할 수 없습니다.

추가 컨텍스트: 저는 localhost의 개발 환경에서 이 기능을 테스트하고 있습니다. 이 문제는 Chrome에서는 발생하지만 Firefox에서는 발생하지 않습니다.

이 오류는 Cross-Origin-Opener-Policy의 잘못된 구성으로 인해 발생합니까? 그렇다면 Firebase를 사용한 Google 로그인을 위한 Next.js 애플리케이션에서 이 정책을 올바르게 구성하려면 어떻게 해야 합니까?

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

귀하의 경우:

으아악

Answer 2

이 문제는 오랫동안 해결되지 않은 문제인 것 같습니다. 하지만 다음을 시도해 보세요

1. 범위를 확인해주세요 - https://stackoverflow.com/a/76574604/9640177
2. Google API를 사용하는 경우 Firebase 및 GCP에서 올바른 승인된 도메인 또는 URI를 설정했는지 확인하세요. - https:// stackoverflow.com/a/76547658/9640177

Cross-Origin-Opener-Policy에 대해 자세히 알아보려면 Cross-Origin 격리 가이드 - https://web.dev/cross-origin-isolation-guide/ 및 MDN 문서

를 참조할 수도 있습니다.

Google API를 사용하는 경우 포트와 함께 URI도 추가해야 합니다(예: localhost:3000). 내 라이브 웹사이트를 확인하실 수 있습니다 - https://radheshyamdas.com/ 저는 Next

로 구축된 Firebase auth .js를 사용하고 있습니다.