Google API：クライアントの有効なオリジンではありません：URLはクライアントID「ID」のホワイトリストに登録されていません

私は助けが必要です。質問に対する答えが見つかりません。グーグルをして、反対側に聞いてみましたが、答えが見つかりませんでした。

私はグーグルAPI（YoutubeデータAPI）を使用していて、グーグル側からのサンプルコードを使用して、それが機能するコードを使用しています。それについてはかなり確信しています。スクリプトを起動しようとするとエラーが発生しました：

詳細：「クライアントの有効なオリジンではありません：「MyURL」はクライアントID「MyID」のホワイトリストに登録されていません。https：//console.developers.google.com/にアクセスして、プロジェクトのクライアントIDのこのオリジンをホワイトリストに登録してください。 「」

エラー：「idpiframe_initialization_failed」

私が自分のウェブサイトをホワイトリストに登録した問題は受け入れられました。何が悪いのかわかりません。ドメインを「ホワイトリストに登録」するにはどうすればよいですか（ホワイトリストに登録されています）

そして別の質問。私はこれまでこの質問に対する答えを探していませんでした。

Localhostでコードを使用できる可能性があると思います。ローカルホストアドレスなどをホワイトリストに登録する必要があると思います。ただし、ホワイトリストは機能しません。

• DreamGamer

同じ問題があり、これが私がそれを解決した方法です：

1. プロジェクトでAnalyticsAPIとGooglePlusAPIの両方をアクティブ化する
2. 新しいOAUTH2.0クライアント資格情報を作成します
   • 追加認定Javascriptの起源を下の制限セクション
3. 新しいクライアントIDを使用します。

楽しい。

キャッシュをクリアしました。その後、働き始めました。

Chromeの場合：[設定]-> [詳細設定]-> [閲覧データを消去]-> [キャッシュされた画像とファイル]

キャッシュをクリアすることは私にとってトリックでした

キャッシュをクリアしてみてください。キャッシュ/ローカルストレージで問題が発生する可能性があります。

私にとっては、グーグルアナリティクスのような追加のAPIを追加しなくても機能しました。キャッシュの保存を避けるために、必ず完全なclientidを追加し、シークレットウィンドウでアプリを開いてください。すでに通常のウィンドウでアプリを開いている場合は、1-アプリが開いているすべてのタブを閉じます。2-キャッシュとCookieをクリアします。Chromeでは、[設定]-> [パスワードとフォーム]-> [閲覧データのクリア]-> [詳細設定]（タブ）-> [a）Cookieとその他のサイトデータおよびb）キャッシュされた画像とファイル3-新しいシークレットウィンドウを開いて、アプリ。

ドキュメントには、2つの重要なステップを見逃さないように記載されています（「手順を実行するときは、次の2つの重要なステップを見逃さないことが重要です。AnalyticsAPIを有効にするこれ が私にとってうまくいったことです。

1. AnalyticsAPIを有効にする
2. 資格情報に戻り、以前のOAuth2.0を削除します
3. 正しいオリジンで新しいOAuthを作成する

また、クイックスタートの例の指示に従いました。同じ問題があり、ここで提案されているすべての解決策を試しましたが、役に立たず、想像できるすべてのことを試しましたが、役に立ちませんでした。

最後にCLIENT_IDスペースを入れてコピーしたことがようやくわかりました。

  var CLIENT_ID = '44********-*****************.apps.googleusercontent.com ';

これを修正すると（余分なスペースを削除すると）、機能しました。

この場合、エラーメッセージはあまり正確ではないと思います。お役に立てれば。

私はちょうど同じ間違いをしました：公式のクイックスタートの例を試し、あなたと同じエラーメッセージを受け取りました。

その例は私が個人的に必要としていたものよりもはるかに複雑であるため、かなり混乱します。ユーザーのログインにOAuthを使用し、だけではありませんAPI key。あなたが私のようで、OAuthを使用せず、特権アクションなしで一部のYouTubeデータのみを取得したい場合（たとえば、ビデオ、チャンネル、またはプレイリストのみを検索または一覧表示したい場合）、この例は次のとおりです。あなたのために。

解決策は単純で、次apiKeyのclientIdようにgapi.client.init（リンク：APIドキュメント）の代わりに提供するだけです。

const apiKey = '<my API key>';

function gooApiInitClient() {
  // Array of API discovery doc URLs for APIs used by the quickstart
  const discoveryDocs = [
    "https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest"
  ];

  return gapi.client.init({
    apiKey,
    discoveryDocs
  });
}

// see: https://developers.google.com/api-client-library/javascript/reference/referencedocs
gapi.load('client', {
  callback: function() {
    // we now have gapi.client! initialize it.
    gooApiInitClient().
      then(() => {
        // we can start using the API here!
        // e.g. gapi.client.youtube.videos.list(...);
      }).then(results => { 
        // use results here....
      });
  }
});

私はまた、サンプルを機能させようとしていました（から）https://developers.google.com/drive/api/v3/quickstart/js

IPアドレスがWebAPIに追加されたにもかかわらず、継続的に失敗しました。

ただし、次に示すように、localhost：8000（127.0.0.1:8000だけでなく）をOAUTHに追加する必要があります。

OAUTHクライアントテキストの上に浮かぶと、リンクになります。そのリンクをクリックすると、ポートを含むURIを追加できます。鉱山にはすでに127.0.0.1:8000がありましたが、locahost：8000はありませんでした。

これが面白い/奇妙なことです。ローカルホストにpingを実行すると、次のように表示されます。

それがIPV6のことだと思います。

とにかく、127.0.0.1にpingを実行すると、期待される応答が表示されます（IPV4経由）

それは赤いニシンかもしれませんが、OAUTHに入力された値がそれによって影響を受けたかどうかはわかりませんでした。

私がそれに気付いた理由は、チュートリアルの指示に従ってPython Webサーバーを起動したときに、次のことを見て、奇妙だと思ったからです。

OAUTHにlocalhost：8000 URIを追加した後でのみ機能しましたが、追加した後は正常に機能しました。

多くの人がここで示しているように、これは単なるブラウザのキャッシュの問題です。新しいキーを作成したり、キャッシュをクリアしたりする必要はありません。新しいブラウザのシークレット（匿名）ウィンドウでもう一度試してみてください。正常に動作するはずです。

Webアプリのログインを取得しようとしても同様の問題が発生していました。私がしたことは、CloudPlatformからOAuthクライアントID資格情報を再作成することでした。これを実行して新しいクライアントIDを使用すると、すべてが正常に機能しました。以前の問題はわかりませんが、現在は完全に問題なく処理されています。

誰かがグーグルなどからこれを見つけたら、それを試してみてください。それはうまくいくかもしれません。これは、Ezra Obiwaleの答えを説明します。これは、基本的に、いくつかのAPIを追加した直後に新しいクライアントIDを作成するためです。

なぜこれが起こるのかについての説明を誰かが知っているなら、それはありがたいです。

私はこれとまったく同じ問題を抱えていました-私にとっての解決策は、APIManagerにアクセスしてAnalyticsAPIを有効にすることでした。問題が何であったかはわかりませんが、これで修正されたようです。

これはキャッシュに関係していると思います。ブラウザに移動してキャッシュをクリアしてみてください。Chromeで>設定>詳細>ブラウジングデータをクリア：>：キャッシュされた画像とファイル。

それが機能しなかった理由の1つは、特定のログイン数（100）を超えていることclient IDです。

Google APIコンソールページにアクセスして、新しいOauth2クライアント認証情報を作成し（アプリケーションのURLを下に追加することを忘れないでくださいAuthorized Javascript Origins）、それを使用できます。

client_IDをコピーしたときにファイルに空白があったことに気付くまで、同じ問題が発生していました。そのため、文字列から空白を削除すると、すべてが正常に機能するようになりました。

ローカルホストでreact-social-loginを使用してGoogleサインインを操作しているときに、同じ問題に直面しました。ホワイトリストのオリジンでは、それを機能させるためにhttp：// localhost：3000を提供する必要があります。