このページは Cloud Translation API によって翻訳されました。

JavaScript クイックスタート

クイックスタートでは、 Google Workspace API

Google Workspace クイックスタートでは、API クライアントライブラリを使用して認証と認可のフローの詳細を確認できます。おすすめの方法独自のアプリ用のクライアントライブラリを使用します。このクイックスタートでは、テストに適したシンプルな認証アプローチできます。本番環境では、Terraform の IAM 構成の認証と認可次の日付より前アクセス認証情報の選択選択することもできます

Google Drive API にリクエストを送信する JavaScript ウェブアプリケーションを作成します。

目標

環境を設定する。
サンプルを設定します。
サンプルを実行します。

前提条件

Node.js とnpm インストールされています。
Google Cloud プロジェクトです。

Google ドライブが有効になっている Google アカウント。

環境の設定

このクイックスタートを完了するには、環境を設定します。

API を有効にする

Google API を使用する前に、Google Cloud プロジェクトで有効にする必要があります。 1 つの Google Cloud プロジェクトで 1 つ以上の API を有効にできます。

Google Cloud コンソールで、Google Drive API を有効にします。

API の有効化

OAuth 同意画面を構成する

このクイックスタートを完了するために新しい Google Cloud プロジェクトを使用する場合は、 OAuth 同意画面を開き、自分自身をテストユーザーとして追加します。すでに完了している場合は、次のセクションにスキップしてください。

Google Cloud コンソールで、メニューに移動します。 > API とサービス > OAuth 同意画面。
OAuth 同意画面に移動
[ユーザーの種類] で [内部] を選択し、[作成] をクリックします。
アプリ登録フォームに入力し、[保存して次へ] をクリックします。
現時点では、スコープの追加をスキップして [保存して次へ] をクリックします。将来的に、 [ユーザーの種類] を [外部] に変更してから、アプリに必要な認証スコープを追加します。
アプリ登録の概要を確認します。変更するには、[編集] をクリックします。アプリが問題がなければ、[ダッシュボードに戻る] をクリックします。

ウェブアプリケーションの認証情報を承認する

エンドユーザーを認証してアプリでユーザーデータにアクセスするには、次のことを行う必要があります。 OAuth 2.0 クライアント ID を作成します。クライアント ID は Google の OAuth サーバーに送信します。アプリが複数のプラットフォームで動作する場合プラットフォームごとに個別のクライアント ID を作成する必要があります。

Google Cloud コンソールで、メニュー > [API と[サービス] > [認証情報] に移動します。
[認証情報] に移動
[認証情報を作成] > [OAuth クライアント ID] をクリックします。
[アプリケーションの種類] > [ウェブアプリケーション] をクリックします。
[名前] フィールドに、認証情報の名前を入力します。この名前は Google Cloud コンソールにのみ表示されます。
アプリに関連する承認済み URI を追加します。 <ph type="x-smartling-placeholder">
- クライアントサイドアプリ（JavaScript） - [承認済みの JavaScript 生成元] で [URI を追加] をクリックします。次に、ブラウザリクエストに使用する URI を入力します。アプリケーションが OAuth 2.0 サーバーに API リクエストを送信できるドメインを識別します。
- サーバーサイドアプリ（Java、Python など） - [承認済みのリダイレクト URI] で [URI を追加] をクリックします。次に、OAuth 2.0 サーバーがレスポンスを送信できるエンドポイント URI を入力します。
[作成] をクリックします。OAuth クライアントの作成画面が表示され、新しいクライアント ID とクライアントシークレットが表示されます。
クライアント ID をメモします。クライアントシークレットはウェブアプリケーションには使用されません。
[OK] をクリックします。新しく作成された認証情報が [OAuth 2.0 クライアント ID] に表示されます。

このクイックスタートの後半で必要になるため、これらの認証情報はメモしておきます。

API キーを作成する

Google Cloud コンソールで、メニューに移動します。 > API とサービス > [認証情報] をタップします。
[認証情報] に移動
[認証情報を作成] > をクリックします。 API キー。
新しい API キーが表示されます。
- コピーアイコンをクリックします。して、アプリのコードで使用する API キーをコピーします。API キーは [API キー] セクションでセクション内にあります。
- 詳細設定を更新して使用を制限するには、[キーを制限] をクリックします指定します。詳しくは、API キーの制限を適用するをご覧ください。

サンプルのセットアップ

作業ディレクトリに、index.html という名前のファイルを作成します。

index.html ファイルに次のサンプルコードを貼り付けます。

drive/quickstart/index.html

GitHub で表示

<!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" onclick="handleAuthClick()">Authorize</button>
    <button id="signout_button" onclick="handleSignoutClick()">Sign Out</button>

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

    <script type="text/javascript">
      /* exported gapiLoaded */
      /* exported gisLoaded */
      /* exported handleAuthClick */
      /* exported handleSignoutClick */

      // TODO(developer): Set to client ID and API key from the Developer Console
      const CLIENT_ID = '<YOUR_CLIENT_ID>';
      const API_KEY = '<YOUR_API_KEY>';

      // Discovery doc URL for APIs used by the quickstart
      const DISCOVERY_DOC = 'https://www.googleapis.com/discovery/v1/apis/drive/v3/rest';

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

      let tokenClient;
      let gapiInited = false;
      let gisInited = false;

      document.getElementById('authorize_button').style.visibility = 'hidden';
      document.getElementById('signout_button').style.visibility = 'hidden';

      /**
       * Callback after api.js is loaded.
       */
      function gapiLoaded() {
        gapi.load('client', initializeGapiClient);
      }

      /**
       * Callback after the API client is loaded. Loads the
       * discovery doc to initialize the API.
       */
      async function initializeGapiClient() {
        await gapi.client.init({
          apiKey: API_KEY,
          discoveryDocs: [DISCOVERY_DOC],
        });
        gapiInited = true;
        maybeEnableButtons();
      }

      /**
       * Callback after Google Identity Services are loaded.
       */
      function gisLoaded() {
        tokenClient = google.accounts.oauth2.initTokenClient({
          client_id: CLIENT_ID,
          scope: SCOPES,
          callback: '', // defined later
        });
        gisInited = true;
        maybeEnableButtons();
      }

      /**
       * Enables user interaction after all libraries are loaded.
       */
      function maybeEnableButtons() {
        if (gapiInited && gisInited) {
          document.getElementById('authorize_button').style.visibility = 'visible';
        }
      }

      /**
       *  Sign in the user upon button click.
       */
      function handleAuthClick() {
        tokenClient.callback = async (resp) => {
          if (resp.error !== undefined) {
            throw (resp);
          }
          document.getElementById('signout_button').style.visibility = 'visible';
          document.getElementById('authorize_button').innerText = 'Refresh';
          await listFiles();
        };

        if (gapi.client.getToken() === null) {
          // Prompt the user to select a Google Account and ask for consent to share their data
          // when establishing a new session.
          tokenClient.requestAccessToken({prompt: 'consent'});
        } else {
          // Skip display of account chooser and consent dialog for an existing session.
          tokenClient.requestAccessToken({prompt: ''});
        }
      }

      /**
       *  Sign out the user upon button click.
       */
      function handleSignoutClick() {
        const token = gapi.client.getToken();
        if (token !== null) {
          google.accounts.oauth2.revoke(token.access_token);
          gapi.client.setToken('');
          document.getElementById('content').innerText = '';
          document.getElementById('authorize_button').innerText = 'Authorize';
          document.getElementById('signout_button').style.visibility = 'hidden';
        }
      }

      /**
       * Print metadata for first 10 files.
       */
      async function listFiles() {
        let response;
        try {
          response = await gapi.client.drive.files.list({
            'pageSize': 10,
            'fields': 'files(id, name)',
          });
        } catch (err) {
          document.getElementById('content').innerText = err.message;
          return;
        }
        const files = response.result.files;
        if (!files || files.length == 0) {
          document.getElementById('content').innerText = 'No files found.';
          return;
        }
        // Flatten to string to display
        const output = files.reduce(
            (str, file) => `${str}${file.name} (${file.id})\n`,
            'Files:\n');
        document.getElementById('content').innerText = output;
      }
    </script>
    <script async defer src="https://apis.google.com/js/api.js" onload="gapiLoaded()"></script>
    <script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>
  </body>
</html>

次のように置き換えます。

YOUR_CLIENT_ID: 作成したクライアント ID Google Chat の設定にウェブアプリケーション用の承認済み認証情報。
YOUR_API_KEY: 作成した API キー前提条件を満たす必要があります。

サンプルの実行

作業ディレクトリに http-server パッケージをインストールします。
```
npm install http-server
```
作業ディレクトリでウェブサーバーを起動します。
```
npx http-server -p 8000
```

ブラウザで http://localhost:8000 にアクセスします。
アクセスの承認を求めるメッセージが表示されます。 <ph type="x-smartling-placeholder">
1. Google アカウントにまだログインしていない場合は、ログインを求められたらログインします。条件複数のアカウントにログインしている場合は、承認に使用するアカウントを 1 つ選択してください。
2. [Accept] をクリックします。

JavaScript アプリケーションが実行され、Google Drive API が呼び出されます。