来自Google API Oauth的客户端不是有效来源

时间:2017-05-19 11:17:50

标签: javascript oauth-2.0 google-oauth

我从Google API Oauth收到此错误:

  

idpiframe_initialization_failed“,详情:”不是客户的有效来源:http://127.0.0 ....将此来源列为您项目的客户ID

我正在尝试从此本地路径发送请求:

  

http://127.0.0.1:8887/

我已将此URL添加到授权的JavaScript源  部分: enter image description here

这是我的代码:

<!-- 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>

我该如何解决这个问题?

12 个答案:

答案 0 :(得分:61)

我和你的问题非常相似。我尝试从localhost添加多个白名单端口,但没有任何工作。结束删除凭据并重新设置。对于我的设置,谷歌一定是个bug。

答案 1 :(得分:8)

重置Chrome缓存可以为我解决。长按“重新加载”按钮,然后长按“清空缓存和硬重新加载”。

enter image description here

答案 2 :(得分:7)

如果您对此完全相同,请尝试将http://localhost:8887添加到您的授权JavaScript源代码中。在某些时候我自己有这个错误,这就解决了。知道您必须将此网址用于您的请求以及事件,尽管它会转换为http://127.0.0.1:8887/

答案 3 :(得分:4)

我在网上的几个地方读到了人们用来重做凭证的创建以使其发挥作用 所以我做了,我为同一个项目创建了一个新的凭证并使用了我的新 user-id ,它运行得很完美......看起来白名单的版本有点诡异......

Nb:我还使用 localhost 而不是 127.0.0.1 ,IP无效。

答案 4 :(得分:2)

我摆弄了大约10分钟,然后当我尝试时它终于奏效了  浏览器中的http://localhost/(而不是127.0.0.1)

在每个可以执行白名单的地方添加了网址: https://console.developers.google.com/apis/credentials/

答案 5 :(得分:1)

“无效的客户端来源”似乎已被Google API过度使用,也就是说,它也被误导用于身份验证错误。

对于看到错误的人,请检查凭据是否正确。

(这也许可以解释为什么重新创建凭据后某些人可以使用它-在某些情况下,原始凭据可能不正确)。

答案 6 :(得分:0)

在意识到要放入

之前,我经历了所有这些解决方案

https :// localhost:3000

我的开发服务器正在服务

http :// localhost:3000

我知道这很愚蠢,但是其他人可能也会犯同样的错误,也许这个评论对他们有帮助:)

答案 7 :(得分:0)

对我们有用的是在授权来源中添加非本地主机域。我的同事在添加了一个不存在的本地域后,让他的localhost域工作了。 http://test-my-app.local

答案 8 :(得分:0)

我有同样的问题;但这对我有用:

  1. 打开 console.developers
  2. 打开项目名称
  3. 点击凭据
  4. 在“ 名称”下,单击“ 网络客户端1
  5. 在“ URL ”下,添加“ http://localhost:3000

答案 9 :(得分:0)

在您使用相同电子邮件 ID来创建客户端ID并通过网页登录时,情况可能是这样的。

答案 10 :(得分:0)

我通过添加 http://localhost 和 http://localhost:8083 解决了。

答案 11 :(得分:-1)

我遇到了同样的问题,并且搜索了3天:解决“ popup_closed_by_user”转到您的console.google转到您的API管理:Credentials:modify your credentials:

Authorized Javascript origin (http://localhost:port);Authorized redirect URI( http://localhost:port/auth/google/callback);

Example:|| Authorized Javascript origin (http://localhost:4200);Authorized redirect URI( http://localhost:4200/auth/google/callback)|| enter image description here`enter code here`