La connexion Google ne fonctionne pas dans Next.js avec Firebase en raison d'une erreur Cross-Origin-Opener-Policy
P粉020085599
2023-08-25 20:30:33
<p>Je développe une application Web à l'aide de Next.js et Firebase. J'ai implémenté avec succès Google Sign-in dans mon application, mais je rencontre un problème qui empêche le processus de connexion de se dérouler comme prévu. </p>
<p>Lorsque j'essaie de me connecter, une fenêtre contextuelle apparaît comme prévu. Cependant, dans la console, je vois l'erreur suivante : </p>
<pre class="brush:php;toolbar:false;">La stratégie Cross-Origin-Opener-Policy bloquerait l'appel window.closed.</pre>
<p>En raison de cette erreur, le processus de connexion ne peut pas être terminé et l'utilisateur ne peut pas se connecter correctement. </p>
<p>Un peu plus de contexte : je teste cette fonctionnalité dans un environnement de développement sur localhost. <strong>Ce problème existe sur Chrome mais pas sur Firefox. </strong></p>
<p>Cette erreur est-elle due à une mauvaise configuration de Cross-Origin-Opener-Policy ? Si tel est le cas, comment configurer correctement cette stratégie dans mon application Next.js pour Google Sign-in avec Firebase ? </p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Oui, cela peut avoir quelque chose à voir avec la configuration COOP de vos pages, vos pages de connexion et la façon dont elles interagissent. Lorsque deux pages n'ont pas le même COOP, elles se retrouvent dans des groupes de contexte de navigation distincts, ce qui peut empêcher certaines interactions, comme la méthode window.close.
Il est difficile de donner une solution exacte sans voir votre code et votre implémentation, mais vous pouvez essayer de modifier votre COOP afin qu'elle corresponde à la COOP de la page de connexion. Cela peut être
same-origin或same-origin-allow-popups.Ces en-têtes peuvent être définis dans la configuration NextJS : https://nextjs.org/docs/pages/api-reference/next-config-js/headers
Dans votre cas :
module.exports = { async headers() { return [ { source: "/(.*)", headers: [ { key: "Cross-Origin-Opener-Policy", value: "same-origin", // "same-origin-allow-popups" }, ], }, ]; }, };Cela semble être un problème qui n'a pas été résolu depuis longtemps. Cependant, veuillez essayer ce qui suit
Vous pouvez également vous référer au Cross-Origin Isolation Guide - https://web.dev/cross-origin-isolation-guide/ et à la Documentation MDN pour en savoir plus sur Cross-Origin-Opener-Policy
Si vous utilisez l'API Google, assurez-vous d'ajouter également l'URI avec le port, par exemple
localhost:3000. Vous pouvez consulter mon site Web en direct - https://radheshyamdas.com/ J'utilise Firebase auth .js construit avec Next