Maison  >  Questions et réponses  >  le corps du texte

La connexion Google ne fonctionne pas dans Next.js avec Firebase en raison d'une erreur Cross-Origin-Opener-Policy

<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>
P粉020085599P粉020085599444 Il y a quelques jours969

répondre à tous(2)je répondrai

  • P粉616111038

    P粉6161110382023-08-26 18:51:46

    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-originsame-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"
              },
            ],
          },
        ];
      },
    };
    

    répondre
    0
  • P粉616383625

    P粉6163836252023-08-26 13:48:14

    Cela semble être un problème qui n'a pas été résolu depuis longtemps. Cependant, veuillez essayer ce qui suit

    1. Veuillez vérifier la portée - https://stackoverflow.com/a/76574604/9640177
    2. Si vous utilisez l'API Google, assurez-vous d'avoir défini le domaine autorisé ou l'URI correct sur Firebase et GCP - https:// stackoverflow.com/a/76547658/9640177

    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

    répondre
    0
  • Annulerrépondre