Une origine non valide pour le client de Google API Oauth

Je reçois cette erreur de l'API Google Oauth:

idpiframe_initialization_failed", détails: "Pas un origin valide pour le client: http://127.0.0....itelist cette origine de votre projet, l'ID client

Je suis en train d'envoyer une demande à partir de ce chemin d'accès local:

http://127.0.0.1:8887/

Et j'ai déjà ajouté cette URL Autorisé JavaScript origines
section:
Une origine non valide pour le client de Google API Oauth

C'est mon code:

<!-- The top of file index.html -->
<html itemscope itemtype="http://schema.org/Article">
<head>
  <!-- BEGIN Pre-requisites -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
  </script>
  <script src="https://apis.google.com/js/client:platform.js?onload=start" async defer>
  </script>
  <!-- END Pre-requisites -->

<!-- Continuing the <head> section -->
  <script>
    function start() {
      gapi.load('auth2', function() {
        auth2 = gapi.auth2.init({
          client_id: 'MY CLIENT ID.apps.googleusercontent.com',
          //Scopes to request in addition to 'profile' and 'email'
          //scope: 'https://www.google.com/m8/feeds/'
        });
      });
    }
  </script>




</head>
<body>


<button id="signinButton">Sign in with Google</button>
<script>
  $('#signinButton').click(function() {
    //signInCallback defined in step 6.
    auth2.grantOfflineAccess().then(signInCallback);
  });
</script>



<!-- Last part of BODY element in file index.html -->
<script>
function signInCallback(authResult) {
  if (authResult['code']) {

    //Hide the sign-in button now that the user is authorized, for example:
    $('#signinButton').attr('style', 'display: none');

    //Send the code to the server
    $.ajax({
      type: 'POST',
      url: 'http://example.com/storeauthcode',
      //Always include an `X-Requested-With` header in every AJAX request,
      //to protect against CSRF attacks.
      headers: {
        'X-Requested-With': 'XMLHttpRequest'
      },
      contentType: 'application/octet-stream; charset=utf-8',
      success: function(result) {
        //Handle or verify the server response.
      },
      processData: false,
      data: authResult['code']
    });
  } else {
    //There was an error.
  }
}
</script>
  <!-- ... -->
</body>
</html>

Comment puis-je résoudre ce problème?

source d'informationauteur Filipe Ferminiano

  1. 4

    Si c'est la même chose pour vous, essayez d'ajouter http://localhost:8887 à votre autorisés JavaScript, des origines à la place. A cette erreur moi-même à un certain point, et c'fixe. Savez que vous allez avoir à utiliser cette URL pour votre demande ainsi d'événement, il se traduit par http://127.0.0.1:8887/.

  2. 28

    J'ai eu un problème similaire au vôtre. J'ai essayé d'ajouter plusieurs ports dans la liste blanche de localhost et rien ne fonctionnait. Fini par supprimer les informations d'identification et de leur mise en place à nouveau. Doit avoir été un bug sur googles fin de mon installation.

  3. 2

    J'ai lu à plusieurs endroits sur le web que les gens utilisent pour rétablir la création d'informations d'identification pour le faire fonctionner.

    Alors je l'ai fait, j'ai créé un nouveau justificatif pour le même projet et utilisé mon nouveau identifiant de l'utilisateur, et il a parfaitement fonctionné... Ressemble à l'édition de la liste blanche est un peu flacky...

    Nb: j'ai aussi utilisé localhost au lieu de 127.0.0.1les IPs ne sont pas valides.

  4. 1

    Je jouait pendant environ 10 minutes et puis elle a finalement travaillé quand j'ai essayé
    http://localhost/ dans le navigateur (à la place de 127.0.0.1)

    Ajouté l'url à chaque endroit que vous pouvez faire blanc-listes:
    https://console.developers.google.com/apis/credentials/