ブラウザからGoogleドライブAPIを使ってみようとおもったのですが、成功しません…。

Google Cloud Platform でAPIの有効化やAPIキーの作成、クライアントIDの作成をしたあと、
Browser Quickstartのソースをコピーしてファイルを作成してみました。

ファイルを直接開いても、ローカルサーバーをたててそこからアクセスしようとしても、エラーがでてしまいます。
どうしたらよいでしょうか？

ブラウザで直接ファイルを開いて試そうとすると、
コンソールに

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').

と表示されます。

サーバーを建てないといけないのだと思い、VSCodeの拡張機能Live Serverを使ってサーバーを建ててアクセスすると、
HTML Bodyに

{
  "error": "idpiframe_initialization_failed",
  "details": "Not a valid origin for the client: http://127.0.0.1:5500 has not been whitelisted for client ID 116487671093-04hqrug3troora8uddlb3gbfbg9qi1ru.apps.googleusercontent.com. Please go to https://console.developers.google.com/ and whitelist this origin for your project's client ID."
}

と表示されます。

試したこと

Google Cloud PlatformのクライアントIDの設定にある、

承認済みの JavaScript 生成元の項目でhttp://localhost:◯◯◯◯を指定しました。

OAuth 同意画面のGoogle API のスコープに../auth/drive.fileを追加して、ソースの方を書きかえました。
こちらの質問のトップ回答者の言う通りに

Google Analytics API と Google+ API を有効にしてプロジェクトを作り直しました。
上記を試しても、状況は変わりませんでした。

GoogleドライブAPIを使う方法をご存知の方、お助けください。

#ソース

<!DOCTYPE html>
<html>
  <head>
    <title>Drive API Quickstart</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>Drive API Quickstart</p>

    <!--Add buttons to initiate auth sequence and sign out-->
    <button id="authorize_button" style="display: none;">Authorize</button>
    <button id="signout_button" style="display: none;">Sign Out</button>

    <pre id="content" style="white-space: pre-wrap;"></pre>

    <script type="text/javascript">
      // Client ID and API key from the Developer Console
      var CLIENT_ID = '◯◯◯◯';
      var API_KEY = '◯◯◯◯';

      // Array of API discovery doc URLs for APIs used by the quickstart
      var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"];

      // Authorization scopes required by the API; multiple scopes can be
      // included, separated by spaces.
      var SCOPES = 'https://www.googleapis.com/auth/drive.file';

      var authorizeButton = document.getElementById('authorize_button');
      var signoutButton = document.getElementById('signout_button');

      /**
       *  On load, called to load the auth2 library and API client library.
       */
      function handleClientLoad() {
        gapi.load('client:auth2', initClient);
      }

      /**
       *  Initializes the API client library and sets up sign-in state
       *  listeners.
       */
      function initClient() {
        gapi.client.init({
          apiKey: API_KEY,
          clientId: CLIENT_ID,
          discoveryDocs: DISCOVERY_DOCS,
          scope: SCOPES
        }).then(function () {
          // Listen for sign-in state changes.
          gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);

          // Handle the initial sign-in state.
          updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
          authorizeButton.onclick = handleAuthClick;
          signoutButton.onclick = handleSignoutClick;
        }, function(error) {
          appendPre(JSON.stringify(error, null, 2));
        });
      }

      /**
       *  Called when the signed in status changes, to update the UI
       *  appropriately. After a sign-in, the API is called.
       */
      function updateSigninStatus(isSignedIn) {
        if (isSignedIn) {
          authorizeButton.style.display = 'none';
          signoutButton.style.display = 'block';
          listFiles();
        } else {
          authorizeButton.style.display = 'block';
          signoutButton.style.display = 'none';
        }
      }

      /**
       *  Sign in the user upon button click.
       */
      function handleAuthClick(event) {
        gapi.auth2.getAuthInstance().signIn();
      }

      /**
       *  Sign out the user upon button click.
       */
      function handleSignoutClick(event) {
        gapi.auth2.getAuthInstance().signOut();
      }

      /**
       * Append a pre element to the body containing the given message
       * as its text node. Used to display the results of the API call.
       *
       * @param {string} message Text to be placed in pre element.
       */
      function appendPre(message) {
        var pre = document.getElementById('content');
        var textContent = document.createTextNode(message + '\n');
        pre.appendChild(textContent);
      }

      /**
       * Print files.
       */
      function listFiles() {
        gapi.client.drive.files.list({
          'pageSize': 10,
          'fields': "nextPageToken, files(id, name)"
        }).then(function(response) {
          appendPre('Files:');
          var files = response.result.files;
          if (files && files.length > 0) {
            for (var i = 0; i < files.length; i++) {
              var file = files[i];
              appendPre(file.name + ' (' + file.id + ')');
            }
          } else {
            appendPre('No files found.');
          }
        });
      }

    </script>

    <script async defer src="https://apis.google.com/js/api.js"
      onload="this.onload=function(){};handleClientLoad()"
      onreadystatechange="if (this.readyState === 'complete') this.onload()">
    </script>
  </body>
</html>

行動規範の内容に同意します

回答2件

こんにちは、
ブラウザのキャッシュを削除(「Ctrl」＋「Shift」＋「Del」)してからやれば、Authorizeというボタンが表示されるかもしれません。

投稿2020/06/01 08:44

fake_shibe

総合スコア806

H40831

2020/06/03 08:58

ご回答いただき、ありがとうございます。キャッシュを削除してスーパーリロードしてみましたが、状況はかわりませんでした…

H40831

2020/06/07 14:13

問題点としては、AkitoshiManabeさんの回答のコメントに書かせていただきましたが、そこを直したうえでも、キャッシュの削除をしないとエラー表示が変わらないようでしたので、 fake_shibeさんの回答も、とてもためになりました。皆様をベストアンサーに選ぶことができなく歯痒いので、せめてもの感謝を伝えさせてください。どうもありがとうございました。

行動規範の内容に同意します

ベストアンサー

VSCode を利用していないので、回答は曖昧になりますことをご了承ください。

エラーメッセージ通り、オリジンの問題を解決できないか試してみてはいかがでしょう。
（host がIP指定の 127.0.0.1 と文字列指定の localhost とは、クロスオリジンの関係になります）

LiveServer の Settings セクションで案内されている Settings Docs を眺めていると、以下の項目があります。

liveServer.settings.port
liveServer.settings.host

変更できるの？と思い、[how to change live Server.settings] とGoogle先生に問いかけてみたところ、Where to set value of liveServer.settings.port in live server extension of visual studio code を教えてくれました。

コンフィグのJSONファイルを弄って http://localhost:○○○○ が開くようにできるかもしれません。

投稿2020/06/01 08:03

AkitoshiManabe

総合スコア5434

H40831

2020/06/03 09:06

ご回答いただき、ありがとうございます。 "liveServer.settings.port": 0, の値を、使用中の（デフォルトの）ポート番号に変更してみましたが、状況はかわりませんでした。また、エラーメッセージを翻訳にかけてみたところ、おそらくGoogle Cloud Platform側で、該当のオリジンがホワイトリストに登録されていないという意味かと思います。しかし、質問に記載したとおり、ホワイトリストには該当のオリジンを登録済みなので、解決方法がわからず困っております…

H40831

2020/06/07 14:10

すみません、自分の知識不足により、アドバイスを曲解していたかもしれません。 localhostと127.0.0.1はクロスオリジンであって、同一ではないということなのですね。今回の問題は、自分の些細な勘違いが原因だったようです。 Google Cloud Platformで許可していたURIはlocalhost、 LiveServerで立ち上がるURLは127.0.0.1でした。 Google Cloud Platformの設定はこの２つを明確に区別しているようでしたので、 Google Cloud Platformで127.0.0.1:○○○○を設定するか、もしくは立ち上がったローカルサーバーのURIをlocalhost:○○○○に書き換え、そのうえでキャッシュ削除＆スーパーリロードしてみたら、無事成功しました。 127.0.0.1とlocalhostは同じところを指すということを学習していたせいで、この小さな問題に気づくことができませんでした。きっと、AkitoshiManabeさんの言いたいことはこういうことだったのだろうと思いますので、回答をベストアンサーにさせていただきます。どうもありがとうございました。