Cross-Origin-Opener-Policy エラーにより、Firebase を使用した Next.js で Google サインインが機能しない

Question

Next.js と Firebase を使用して Web アプリケーションを開発しています。アプリケーションに Google サインインを正常に実装しましたが、サインイン プロセスが期待どおりに完了できないという問題が発生しています。

ログインしようとすると、予想どおりポップアップが表示されます。ただし、コンソールには次のエラーが表示されます:

Cross-Origin-Opener-Policy ポリシーは window.closed 呼び出しをブロックします。

このエラーにより、ログイン処理を完了できず、ユーザーは正しくログインできません。

さらに詳しい内容: この機能をローカルホストの開発環境でテストしています。 この問題は Chrome には存在しますが、Firefox には存在しません。

このエラーは、Cross-Origin-Opener-Policy の設定ミスによって引き起こされますか?その場合、Firebase での Google サインイン用に Next.js アプリケーションでこのポリシーを適切に構成するにはどうすればよいですか?

Answer 1

はい、これはページの COOP 設定、ログイン ページ、およびそれらの相互作用に関係している可能性があります。 2 つのページが同じ 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

クロスオリジン分離ガイド - https://web.dev /cross-origin-isolation-guide/ および MDN ドキュメント を参照して詳細を確認することもできます。クロスオリジン - オープナー ポリシーの詳細

Google API を使用している場合は、localhost:3000 などのポートを含む URI も必ず追加してください。私のライブウェブサイトをチェックしてください - https://radheshyamdas.com/ Next

で構築された firebase auth .js を使用しています