クライアントサイド ウェブ アプリケーション用の OAuth 2.0

OAuth 2.0 エンドポイント

Google の OAuth 2.0 エンドポイントからのアクセスをリクエストする URL を https://accounts.google.com/o/oauth2/v2/auth。このエンドポイントには HTTPS 経由でアクセスできます。 単純な HTTP 接続は拒否されます

Google の認証サーバーは、ウェブ用に次のクエリ文字列パラメータをサポートしています。 サーバー アプリケーション:

Google の承認サーバーへのリダイレクトの例

以下に、読みやすくするために改行とスペースを入れた URL の例を示します。

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly&
 include_granted_scopes=true&
 response_type=token&
 state=state_parameter_passthrough_value&
 redirect_uri=https%3A//oauth2.example.com/code&
 client_id=client_id

リクエスト URL を作成したら、ユーザーをその URL にリダイレクトします。

JavaScript サンプルコード

次の JavaScript スニペットは、認証フローを開始する方法を示しています。 JavaScript 用の Google API クライアント ライブラリを使用しない。この OAuth 2.0 は 2.0 エンドポイントがクロスオリジン リソース シェアリング（CORS）をサポートしていない場合、スニペットは そのエンドポイントへのリクエストを開きます。

/*
 * Create form to request access token from Google's OAuth 2.0 server.
 */
function oauthSignIn() {
  // Google's OAuth 2.0 endpoint for requesting an access token
  var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';

  // Create <form> element to submit parameters to OAuth 2.0 endpoint.
  var form = document.createElement('form');
  form.setAttribute('method', 'GET'); // Send as a GET request.
  form.setAttribute('action', oauth2Endpoint);

  // Parameters to pass to OAuth 2.0 endpoint.
  var params = {'client_id': 'YOUR_CLIENT_ID',
                'redirect_uri': 'YOUR_REDIRECT_URI',
                'response_type': 'token',
                'scope': 'https://www.googleapis.com/auth/drive.metadata.readonly',
                'include_granted_scopes': 'true',
                'state': 'pass-through value'};

  // Add form parameters as hidden input values.
  for (var p in params) {
    var input = document.createElement('input');
    input.setAttribute('type', 'hidden');
    input.setAttribute('name', p);
    input.setAttribute('value', params[p]);
    form.appendChild(input);
  }

  // Add form to page and submit it to open the OAuth 2.0 endpoint.
  document.body.appendChild(form);
  form.submit();
}

OAuth 2.0 エンドポイント

OAuth 2.0 サーバーは、環境変数で指定された redirect_uri に応答を送信します。 リクエストできます。

ユーザーがリクエストを承認すると、レスポンスにアクセス トークンが含まれます。ユーザーが リクエストが承認しない場合、レスポンスにはエラー メッセージが含まれます。アクセス トークンまたは 次のように、リダイレクト URI のハッシュ フラグメントでエラー メッセージが返されます。

• アクセス トークンのレスポンス:

  https://oauth2.example.com/callback#access_token=4/P7q7W91&token_type=Bearer&expires_in=3600

  フラグメントの文字列は、access_token パラメータに加えて、 常に設定される token_type パラメータが含まれます。 Bearer、および expires_in パラメータ トークンの存続期間（秒単位）。state パラメータが指定されている場合 場合、その値もレスポンスに含まれます。

• エラー レスポンス:

  https://oauth2.example.com/callback#error=access_denied

OAuth 2.0 サーバー レスポンスの例

このフローをテストするには、次のサンプル URL をクリックします。 Google ドライブ内のファイルのメタデータを表示するための読み取り専用権限:

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly&
 include_granted_scopes=true&
 response_type=token&
 state=state_parameter_passthrough_value&
 redirect_uri=https%3A//oauth2.example.com/code&
 client_id=client_id

OAuth 2.0 フローを完了すると、 http://localhost/oauth2callback。この URL から 404 NOT FOUND エラー（ただし、ローカルマシンが次の場所でファイルを提供する場合を除く） 表示されます。次のステップでは、Terraform で返された情報について、 ユーザーがアプリケーションにリダイレクトされた場合の URI。

OAuth 2.0 エンドポイント

アプリケーションがアクセス トークンを取得したら、そのトークンを使用して Google Cloud API を呼び出すことができます。 API の代理操作です。 ユーザー アカウント（API に必要なアクセス スコープが付与されている場合）そのためには API へのリクエストのアクセス トークン（access_token クエリまたは パラメータまたは Authorization HTTP ヘッダー Bearer 値を指定します。可能であれば クエリ文字列はサーバーログに表示される傾向があるため、HTTP ヘッダーの使用をおすすめします。ほとんどの クライアント ライブラリを使用して Google API の呼び出しを設定できます（例: Drive Files API の呼び出しを参照）。

すべての Google API を試して、 OAuth 2.0 Playground。

HTTP GET の例

呼び出しは、 drive.files エンドポイント（Drive Files API）Authorization: Bearer HTTP を使用 次のようになります。独自のアクセス トークンを指定する必要があります。

GET /drive/v2/files HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer access_token

次に、access_token を使用して、認証されたユーザーに対して同じ API を呼び出します。 クエリ文字列パラメータ:

GET https://www.googleapis.com/drive/v2/files?access_token=access_token

curl の例

これらのコマンドは、curl コマンドライン アプリケーションを使用してテストできます。こちらが HTTP ヘッダー オプションを使用した例（推奨）:

curl -H "Authorization: Bearer access_token" https://www.googleapis.com/drive/v2/files

または、クエリ文字列パラメータ オプションを使用します。

curl https://www.googleapis.com/drive/v2/files?access_token=access_token

JavaScript サンプルコード

以下のコード スニペットは、CORS（クロスオリジン リソース シェアリング）を使用して、 Google API にリクエストできますこの例では、JavaScript 用の Google API クライアント ライブラリを使用しません。 ただし、クライアント ライブラリを使用しなくても、 そのライブラリのドキュメントにある CORS サポートガイドが リクエストをより深く理解できます

このコード スニペットでは、access_token 変数は、取得したトークンを表します。 API リクエストを認可されたユーザーの代理で行うことができます。 例は、そのトークンをブラウザのローカル ストレージに格納して取得する方法を示しています。 API リクエストの際に指定できます。

var xhr = new XMLHttpRequest();
xhr.open('GET',
    'https://www.googleapis.com/drive/v3/about?fields=user&' +
    'access_token=' + params['access_token']);
xhr.onreadystatechange = function (e) {
  console.log(xhr.response);
};
xhr.send(null);

OAuth 2.0 エンドポイント

このコードサンプルは、 JavaScript 用の Google API クライアント ライブラリ。このコードは、表示するボタンを表示する HTML ページ用です。 API リクエストをお試しください。ボタンをクリックすると、 ブラウザのローカル ストレージにある API アクセス トークン。存在する場合は、API リクエストが実行されます。それ以外の場合は OAuth 2.0 フローが開始されます。

OAuth 2.0 フローの場合、このページは次の手順を行います。

1. これにより、ユーザーは Google の OAuth 2.0 サーバーにリダイレクトされ、サーバーは https://www.googleapis.com/auth/drive.metadata.readonly スコープ。
2. リクエストされた 1 つ以上のスコープへのアクセスを許可（または拒否）すると、ユーザーは フラグメント識別子文字列からアクセス トークンが解析される元のページ。

3. このページはアクセス トークンを使用してサンプル API リクエストを行います。

   API リクエストは、Drive API の about.get メソッドを呼び出して、情報を取得します。 承認されたユーザーの Google ドライブ アカウントに関する情報が表示されます。

4. リクエストが正常に実行されると、API レスポンスがブラウザのデバッグログに記録される できます。

アプリへのアクセスを取り消すには、 [権限] ページで、 Google アカウント。アプリが「OAuth 2.0 Demo for Google API Docs」と表示されます。

このコードをローカルで実行するには、YOUR_CLIENT_ID と 対応する YOUR_REDIRECT_URI 変数 認可の認証情報。YOUR_REDIRECT_URI 変数 ページの配信先と同じ URL に設定する必要があります。値は次のいずれかと完全に一致する必要があります OAuth 2.0 クライアントの承認済みのリダイレクト URI（ API Console Credentials page。条件 この値が承認済みの URI と一致しない場合、redirect_uri_mismatch が返されます。 エラーが発生します。また、プロジェクトには、 このリクエストに適切な API が有効になっていること。

<html><head></head><body>
<script>
  var YOUR_CLIENT_ID = 'REPLACE_THIS_VALUE';
  var YOUR_REDIRECT_URI = 'REPLACE_THIS_VALUE';

  // Parse query string to see if page request is coming from OAuth 2.0 server.
  var fragmentString = location.hash.substring(1);
  var params = {};
  var regex = /([^&=]+)=([^&]*)/g, m;
  while (m = regex.exec(fragmentString)) {
    params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
  }
  if (Object.keys(params).length > 0 && params['state']) {
    if (params['state'] == localStorage.getItem('state')) {
      localStorage.setItem('oauth2-test-params', JSON.stringify(params) );

      trySampleRequest();
    } else {
      console.log('State mismatch. Possible CSRF attack');
    }
  }

  // Function to generate a random state value
  function generateCryptoRandomState() {
    const randomValues = new Uint32Array(2);
    window.crypto.getRandomValues(randomValues);

    // Encode as UTF-8
    const utf8Encoder = new TextEncoder();
    const utf8Array = utf8Encoder.encode(
      String.fromCharCode.apply(null, randomValues)
    );

    // Base64 encode the UTF-8 data
    return btoa(String.fromCharCode.apply(null, utf8Array))
      .replace(/\+/g, '-')
      .replace(/\//g, '_')
      .replace(/=+$/, '');
  }

  // If there's an access token, try an API request.
  // Otherwise, start OAuth 2.0 flow.
  function trySampleRequest() {
    var params = JSON.parse(localStorage.getItem('oauth2-test-params'));
    if (params && params['access_token']) {
      var xhr = new XMLHttpRequest();
      xhr.open('GET',
          'https://www.googleapis.com/drive/v3/about?fields=user&' +
          'access_token=' + params['access_token']);
      xhr.onreadystatechange = function (e) {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(xhr.response);
        } else if (xhr.readyState === 4 && xhr.status === 401) {
          // Token invalid, so prompt for user permission.
          oauth2SignIn();
        }
      };
      xhr.send(null);
    } else {
      oauth2SignIn();
    }
  }

  /*
   * Create form to request access token from Google's OAuth 2.0 server.
   */
  function oauth2SignIn() {
    // create random state value and store in local storage
    var state = generateCryptoRandomState();
    localStorage.setItem('state', state);

    // Google's OAuth 2.0 endpoint for requesting an access token
    var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';

    // Create element to open OAuth 2.0 endpoint in new window.
    var form = document.createElement('form');
    form.setAttribute('method', 'GET'); // Send as a GET request.
    form.setAttribute('action', oauth2Endpoint);

    // Parameters to pass to OAuth 2.0 endpoint.
    var params = {'client_id': YOUR_CLIENT_ID,
                  'redirect_uri': YOUR_REDIRECT_URI,
                  'scope': 'https://www.googleapis.com/auth/drive.metadata.readonly',
                  'state': state,
                  'include_granted_scopes': 'true',
                  'response_type': 'token'};

    // Add form parameters as hidden input values.
    for (var p in params) {
      var input = document.createElement('input');
      input.setAttribute('type', 'hidden');
      input.setAttribute('name', p);
      input.setAttribute('value', params[p]);
      form.appendChild(input);
    }

    // Add form to page and submit it to open the OAuth 2.0 endpoint.
    document.body.appendChild(form);
    form.submit();
  }
</script>

<button onclick="trySampleRequest();">Try sample request</button>
</body></html>

OAuth 2.0 エンドポイント

既存のアクセス トークンにスコープを追加するには、include_granted_scopes を含めます。 パラメータ（Google の OAuth 2.0 サーバーへのリクエスト）に追加します。

次のコード スニペットは、その方法を示しています。このスニペットは、 ブラウザのローカル ストレージ内でアクセス トークンが有効なスコープ。（ 完全なサンプルコード: アクセス トークンの対象となるスコープのリストを ブラウザのローカル プロパティで oauth2-test-params.scope プロパティを設定すると、 storage.)

スニペットでは、アクセス トークンが有効なスコープと使用するスコープが比較されます。 予測しますアクセス トークンがそのスコープをカバーしていない場合、OAuth 2.0 フローが開始されます。 ここで、oauth2SignIn 関数は、 ステップ 2 に進み、 例をご覧ください）。

var SCOPE = 'https://www.googleapis.com/auth/drive.metadata.readonly';
var params = JSON.parse(localStorage.getItem('oauth2-test-params'));

var current_scope_granted = false;
if (params.hasOwnProperty('scope')) {
  var scopes = params['scope'].split(' ');
  for (var s = 0; s < scopes.length; s++) {
    if (SCOPE == scopes[s]) {
      current_scope_granted = true;
    }
  }
}

if (!current_scope_granted) {
  oauth2SignIn(); // This function is defined elsewhere in this document.
} else {
  // Since you already have access, you can proceed with the API request.
}

OAuth 2.0 エンドポイント

プログラムでトークンを取り消すには、アプリケーションがトークンを https://oauth2.googleapis.com/revoke。トークンをパラメータとして含めます。

curl -d -X -POST --header "Content-type:application/x-www-form-urlencoded" \
        https://oauth2.googleapis.com/revoke?token={token}

トークンは、アクセス トークンまたはリフレッシュ トークンです。トークンがアクセス トークンであり、 更新すると、更新トークンも取り消されます。

取り消しが正常に処理されると、レスポンスの HTTP ステータス コードに 200。エラー状態の場合は、HTTP ステータス コード 400 が返されます。 エラーコードが表示されます

次の JavaScript スニペットは、 JavaScript 用の Google API クライアント ライブラリ。取り消しを行う Google の OAuth 2.0 エンドポイントは、 トークンはクロスオリジン リソース シェアリング（CORS）をサポートしていない場合、コードはフォームを作成して送信します。 XMLHttpRequest() メソッドを使用して送信するのではなく、フォームをエンドポイントに送信します。 リクエストできます。

function revokeAccess(accessToken) {
  // Google's OAuth 2.0 endpoint for revoking access tokens.
  var revokeTokenEndpoint = 'https://oauth2.googleapis.com/revoke';

  // Create <form> element to use to POST data to the OAuth 2.0 endpoint.
  var form = document.createElement('form');
  form.setAttribute('method', 'post');
  form.setAttribute('action', revokeTokenEndpoint);

  // Add access token to the form so it is set as value of 'token' parameter.
  // This corresponds to the sample curl request, where the URL is:
  //      https://oauth2.googleapis.com/revoke?token={token}
  var tokenField = document.createElement('input');
  tokenField.setAttribute('type', 'hidden');
  tokenField.setAttribute('name', 'token');
  tokenField.setAttribute('value', accessToken);
  form.appendChild(tokenField);

  // Add form to page and submit it to actually revoke the token.
  document.body.appendChild(form);
  form.submit();
}