JavaScript ウェブ アプリケーションに OAuth 2.0 を使用する

OAuth 2.0 エンドポイント

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

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

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

以下のサンプル URL は、ユーザーの YouTube アカウントを表示するアクセスを許可するスコープへのオフライン アクセス（access_type=offline）をリクエストします。増分認可を使用して、ユーザーが以前にアプリケーションへのアクセスを許可したスコープを新しいアクセス トークンでカバーするようにします。この URL では、必須の redirect_uri パラメータ、response_type パラメータ、client_id パラメータと state パラメータの値も設定されます。読みやすくするために、URL には改行とスペースが含まれています。

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube.readonly&
 include_granted_scopes=true&
 state=state_parameter_passthrough_value&
 redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback&
 response_type=token&
 client_id=client_id

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

JavaScript サンプルコード

次の JavaScript スニペットは、JavaScript 用 Google API クライアント ライブラリを使用せずに、JavaScript で承認フローを開始する方法を示しています。この OAuth 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/youtube.force-ssl',
                '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 パラメータに加えて、常に Bearer に設定される token_type パラメータと、トークンの存続期間を秒単位で指定する expires_in パラメータも含まれます。アクセス トークン リクエストで state パラメータが指定されている場合、その値もレスポンスに含まれます。

• エラー レスポンス:

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

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

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

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube.readonly&
 include_granted_scopes=true&
 state=state_parameter_passthrough_value&
 redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback&
 response_type=token&
 client_id=client_id

OAuth 2.0 フローを完了すると、http://localhost/oauth2callback にリダイレクトされます。ローカルマシンがそのアドレスでファイルを提供しない限り、その URL は 404 NOT FOUND エラーになります。次のステップでは、ユーザーがアプリケーションにリダイレクトされたときに URI で返される情報の詳細を説明します。

OAuth 2.0 エンドポイント

アプリケーションがアクセス トークンを取得した後、API に必要なアクセス スコープが付与されている場合、トークンを使用して、特定のユーザー アカウントに代わって Google API を呼び出すことができます。これを行うには、access_token クエリ パラメータまたは Authorization HTTP ヘッダーの Bearer 値のいずれかを使用して、API へのリクエストにアクセス トークンを含めます。クエリ文字列はサーバーログに表示されることが多いため、可能であれば HTTP ヘッダーを使用することをおすすめします。ほとんどの場合、クライアント ライブラリを使用して Google API の呼び出しを設定できます（YouTube Data API を呼び出すなど）。

YouTube Data API は、複数の YouTube チャンネル（レコード レーベルや映画スタジオなど）を所有、管理する YouTube コンテンツ所有者向けのサービス アカウントのみをサポートしています。

OAuth 2.0 Playground ですべての Google API を試し、スコープを確認できます。

HTTP GET の例

Authorization: Bearer HTTP ヘッダーを使用した youtube.channels エンドポイント（YouTube Data API）の呼び出しは次のようになります。独自のアクセス トークンを指定する必要があります。

GET /youtube/v3/channels?part=snippet&mine=true HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer access_token

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

GET https://www.googleapis.com/youtube/v3/channels?access_token=access_token&part=snippet&mine=true

curl の例

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

curl -H "Authorization: Bearer access_token" https://www.googleapis.com/youtube/v3/channels?part=snippet&mine=true

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

curl https://www.googleapis.com/youtube/v3/channels?access_token=access_token&part=snippet&mine=true

JavaScript サンプルコード

以下のコード スニペットは、CORS（クロスオリジン リソース シェアリング）を使用して Google API にリクエストを送信する方法を示しています。この例では、JavaScript 用の Google API クライアント ライブラリを使用しません。ただし、クライアント ライブラリを使用していない場合でも、これらのリクエストについて理解を深めるには、クライアント ライブラリのドキュメントにある CORS サポートガイドをご覧ください。

このコード スニペットの access_token 変数は、承認済みユーザーの代わりに API リクエストを行うために取得したトークンを表します。完全な例は、このトークンをブラウザのローカル ストレージに格納し、API リクエストの際にトークンを取得する方法を示しています。

var xhr = new XMLHttpRequest();
xhr.open('GET',
    'https://www.googleapis.com/youtube/v3/channels?part=snippet&mine=true&' +
    'access_token=' + params['access_token']);
xhr.onreadystatechange = function (e) {
  console.log(xhr.response);
};
xhr.send(null);

OAuth 2.0 エンドポイント

このコードサンプルは、JavaScript 用 Google API クライアント ライブラリを使用せずに、JavaScript で OAuth 2.0 フローを完了する方法を示しています。このコードは、API リクエストを試すボタンを表示する HTML ページ用です。このボタンをクリックすると、API アクセス トークンがページのブラウザのローカル ストレージに保存されているかどうかがコードによってチェックされます。存在する場合は、API リクエストが実行されます。それ以外の場合は、OAuth 2.0 フローが開始されます。

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

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

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

   この API リクエストは、YouTube Data API の channels.list メソッドを呼び出して、承認されたユーザーの YouTube チャンネルに関するデータを取得します。

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

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

このコードをローカルで実行するには、認可の認証情報に対応する YOUR_CLIENT_ID 変数と YOUR_REDIRECT_URI 変数の値を設定する必要があります。YOUR_REDIRECT_URI 変数には、ページを配信する URL と同じ URL を設定する必要があります。この値は、 API Console Credentials pageで構成した OAuth 2.0 クライアントの承認済みリダイレクト URI のいずれかと完全に一致する必要があります。この値が承認済みの 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/youtube/v3/channels?part=snippet&mine=true&' +
          '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/youtube.force-ssl',
                  '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 エンドポイント

この例では、呼び出し元のアプリケーションから、ユーザーの YouTube アナリティクス データを取得するためのアクセス権に加えて、ユーザーがすでにアプリケーションに付与しているアクセス権もリクエストします。

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

次のコード スニペットは、その方法を示しています。このスニペットは、アクセス トークンが有効なスコープがブラウザのローカル ストレージに保存されていることを前提としています。（完全なサンプルコードでは、ブラウザのローカル ストレージに oauth2-test-params.scope プロパティを設定することで、アクセス トークンが有効なスコープのリストが格納されています）。

スニペットでは、アクセス トークンが有効なスコープと、特定のクエリに使用するスコープが比較されます。アクセス トークンがそのスコープをカバーしていない場合、OAuth 2.0 フローが開始されます。ここで、oauth2SignIn 関数はステップ 2 で提供された関数と同じです（これは完全な例の後半で説明します）。

var SCOPE = 'https://www.googleapis.com/auth/youtube.force-ssl';
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 クライアント ライブラリを使用せずに、JavaScript でトークンを取り消す方法を示しています。トークンを取り消すための 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();
}