web-dev-qa-db-ja.com

Google APIからのクライアントの有効なOriginではありませんOauth

Google API Oauthからこのエラーを受け取りました：

idpiframe_initialization_failed "、詳細："クライアントの有効なオリジンではありません： http：//127.0. 。…iterigをプロジェクトのクライアントIDにリストします

私はこのローカルパスからリクエストを送信しようとしています：

http://127.0.0.1:8887/

そして、すでにこのURLをAuthorized JavaScript originsセクションに追加しました： 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>

どうすれば修正できますか？

javascriptoauth-2.0google-oauth
26
Filipe Ferminiano

まったく同じ場合は、代わりに承認済みのJavaScriptオリジンに http：// localhost：8887 を追加してみてください。ある時点で自分自身でエラーが発生し、修正されました。 http://127.0.0.1:8887/ に変換されますが、イベントと同様にリクエストにもこのURLを使用する必要があることを理解してください。

6
user7191932

私はあなたと非常によく似た問題を抱えていました。 localhostから複数のホワイトリストに登録されたポートを追加しようとしましたが、何も機能しませんでした。資格情報を削除して、それらを再度セットアップしました。私の設定ではグーグルエンドのバグだったに違いない。

68
Andrew McOlash

クレデンシャルの作成をやり直して動作させるために使用するWeb上のいくつかの場所を読みました。
そのため、同じプロジェクトの新しい資格情報を作成し、新しいuser-idを使用しましたが、完全に機能しました...ホワイトリストのエディションは少し派手なようです...

Nb：127.0.0.1の代わりにlocalhostも使用しました。IPは無効です。

5
vtellier

私は約10分間いじりましたが、ブラウザで http：// localhost / （127.0.0.1の代わりに）

ホワイトリストを作成できるすべての場所にURLを追加しました： https://console.developers.google.com/apis/credentials/

3
user5886944

「クライアントの有効なオリジンではありません」は、GoogleのAPIによって過度に使用されているようです。つまり、認証エラーにも誤解を招くように使用されています。

エラーが表示される場合は、資格情報が正しいことを確認してください。

（これは、クレデンシャルを再作成した後、一部の人々にとって機能する理由を説明するかもしれません-場合によっては、元のクレデンシャルが正しくなかったかもしれません）。

1
mahemoff

私が入れていることに気づく前に、これらのソリューションをすべて試しました

https：// localhost：3000

そして、私の開発サーバーは役立っていました

http：// localhost：3000

愚か、私は知っているが、他の誰かがおそらく同じ間違いを犯し、おそらくこのコメントは彼らを助けるでしょう:)

0
TomHinkle