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

JS クライアント ライブラリ

JavaScript クライアント ライブラリは、承認プロセスのさまざまな面を簡素化します。

1. Google の承認サーバーのリダイレクト URL を作成し、その URL にユーザーを誘導する方法を提供します。
2. そのサーバーからアプリケーションへのリダイレクトを処理します。
3. 承認サーバーから返されたアクセス トークンを検証します。
4. 認可サーバーがアプリケーションに送信するアクセス トークンを保存し、その後アプリが認証 API 呼び出しを行ったときに取得します。

以下のコード スニペットは、このドキュメントで後述する完全な例からの抜粋です。このコードは、後でアプリケーションで API 呼び出しを行うために使用する gapi.client オブジェクトを初期化します。そのオブジェクトが作成されると、アプリケーションでユーザーの承認ステータスの確認とモニタリングに使用される gapi.auth2 オブジェクトも初期化されます。

gapi.client.init の呼び出しでは、次のフィールドを指定します。

• apiKey と clientId の値は、アプリケーションの認証情報を指定します。これらの値は、 認証情報の作成セクションで説明したように、 API Consoleで取得できます。アプリケーションで承認済みの API リクエストを行う場合は、clientId が必要です。未承認のリクエストのみを行うアプリケーションは、API キーを指定するだけで済みます。

• scope フィールドには、アプリケーションがユーザーに代わってアクセスできるリソースに対応するアクセス スコープのスペース区切りリストを指定します。これらの値により、Google がユーザーに表示する同意画面が決まります。

  可能であれば、アプリケーションは状況に応じた認可スコープへのアクセスをリクエストすることをおすすめします。状況に応じてユーザーデータへのアクセスをリクエストすることで、 段階的な認可によって、アプリケーションがリクエストするアクセス権が必要な理由をユーザーが簡単に理解できるようになります。

• discoveryDocs フィールドは、アプリケーションが使用する API Discovery ドキュメントのリストを識別します。Discovery ドキュメントには API のサーフェス（リソース スキーマなど）が記述され、JavaScript クライアント ライブラリはその情報を使用してアプリケーションで使用できるメソッドを生成します。この例のコードは、Google Drive API バージョン 3 のディスカバリ ドキュメントを取得します。

gapi.client.init 呼び出しが完了すると、Google Auth オブジェクトを識別するように GoogleAuth 変数が設定されます。最後に、ユーザーのログイン ステータスが変更されたときに関数を呼び出すリスナーをコードで設定します。（この関数はスニペットで定義されていません）。

var GoogleAuth; // Google Auth object.
function initClient() {
  gapi.client.init({
      'apiKey': 'YOUR_API_KEY',
      'clientId': 'YOUR_CLIENT_ID',
      'scope': 'https://www.googleapis.com/auth/drive.metadata.readonly',
      'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest']
  }).then(function () {
      GoogleAuth = gapi.auth2.getAuthInstance();

      // Listen for sign-in state changes.
      GoogleAuth.isSignedIn.listen(updateSigninStatus);
  });
}

OAuth 2.0 エンドポイント

OAuth 2.0 エンドポイントに直接アクセスしている場合は、次のステップに進みます。

JS クライアント ライブラリ

GoogleAuth.signIn() メソッドを呼び出して、Google の承認サーバーにユーザーを誘導します。

GoogleAuth.signIn();

実際には、API 呼び出しの前に signIn() メソッドを呼び出すかどうかを決めるブール値を設定することがあります。

次のコード スニペットは、ユーザー認証フローを開始する方法を示しています。スニペットについては、以下の点に注意してください。

• コードで参照される GoogleAuth オブジェクトは、ステップ 1 のコード スニペットで定義されているグローバル変数と同じです。

• updateSigninStatus 関数は、ユーザーの承認ステータスの変更をリッスンするリスナーです。リスナーとしての役割も、ステップ 1 のコード スニペットで定義されています。

  GoogleAuth.isSignedIn.listen(updateSigninStatus);

• 上のスニペットでは、さらに 2 つのグローバル変数を定義しています。

  • isAuthorized は、ユーザーがすでにログインしているかどうかを示すブール値変数です。この値は、ユーザーがアプリの読み込み時またはログアウト時に、アプリの読み込み時と更新時に設定できます。

    上のスニペットでは、sendAuthorizedApiRequest 関数が変数の値をチェックし、承認を必要とする API リクエストをアプリが試行するか、ユーザーにアプリの承認を求めるかを判定します。

  • currentApiRequest は、ユーザーが最後に行った API リクエストの詳細を格納するオブジェクトです。オブジェクトの値は、アプリが sendAuthorizedApiRequest 関数を呼び出すときに設定されます。

    ユーザーがアプリを承認した場合、リクエストはすぐに実行されます。それ以外の場合、関数はユーザーをログインにリダイレクトします。ユーザーがログインすると、updateSignInStatus 関数は sendAuthorizedApiRequest を呼び出し、認証フローが開始する前に試みられたのと同じリクエストを渡します。

var isAuthorized;
var currentApiRequest;

/**
 * Store the request details. Then check to determine whether the user
 * has authorized the application.
 *   - If the user has granted access, make the API request.
 *   - If the user has not granted access, initiate the sign-in flow.
 */
function sendAuthorizedApiRequest(requestDetails) {
  currentApiRequest = requestDetails;
  if (isAuthorized) {
    // Make API request
    // gapi.client.request(requestDetails)

    // Reset currentApiRequest variable.
    currentApiRequest = {};
  } else {
    GoogleAuth.signIn();
  }
}

/**
 * Listener called when user completes auth flow. If the currentApiRequest
 * variable is set, then the user was prompted to authorize the application
 * before the request executed. In that case, proceed with that API request.
 */
function updateSigninStatus(isSignedIn) {
  if (isSignedIn) {
    isAuthorized = true;
    if (currentApiRequest) {
      sendAuthorizedApiRequest(currentApiRequest);
    }
  } else {
    isAuthorized = false;
  }
}

OAuth 2.0 エンドポイント

https://accounts.google.com/o/oauth2/v2/auth で、Google の OAuth 2.0 エンドポイントからのアクセスをリクエストする URL を生成します。このエンドポイントは 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 クライアント ライブラリを使用せずに 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/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();
}

JS クライアント ライブラリ

JavaScript クライアント ライブラリは、Google の承認サーバーからのレスポンスを処理します。現在のユーザーのログイン状態の変化をモニタリングするようにリスナーを設定すると、ユーザーがアプリケーションに対して必要なアクセス権を付与したときにその関数が呼び出されます。

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 をクリックすると、このフローをテストできます。サンプルでは、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 エラーが返されます。次のステップでは、ユーザーがアプリケーションにリダイレクトされたときに URI で返される情報について詳しく説明します。

JS クライアント ライブラリ

アプリケーションがアクセス トークンを取得したら、JavaScript クライアント ライブラリを使用してユーザーに代わって API リクエストを行うことができます。クライアント ライブラリによってアクセス トークンが管理されるため、リクエストで送信するために特別な操作を行う必要はありません。

クライアント ライブラリは、API メソッドを呼び出す 2 つの方法をサポートしています。ディスカバリ ドキュメントを読み込むと、API によってメソッド固有の関数が定義されます。gapi.client.request 関数を使用して API メソッドを呼び出すこともできます。次の 2 つのスニペットは、Drive API の about.get メソッドについて、これらのオプションを示しています。

// Example 1: Use method-specific function
var request = gapi.client.drive.about.get({'fields': 'user'});

// Execute the API request.
request.execute(function(response) {
  console.log(response);
});


// Example 2: Use gapi.client.request(args) function
var request = gapi.client.request({
  'method': 'GET',
  'path': '/drive/v3/about',
  'params': {'fields': 'user'}
});
// Execute the API request.
request.execute(function(response) {
  console.log(response);
});

OAuth 2.0 エンドポイント

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

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

HTTP GET の例

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

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);

JS クライアント ライブラリ

サンプルコードのデモ

このセクションでは、実際のアプリにおけるコードの動作を示すコードサンプルのデモを行います。アプリを承認すると、Google アカウントに接続されているアプリの一覧に表示されます。アプリの名称は「OAuth 2.0 Demo for Google API Docs」です。同様に、そのページへのアクセスを取り消してページを更新すると、そのアプリは表示されなくなります。

このアプリは https://www.googleapis.com/auth/drive.metadata.readonly スコープへのアクセスをリクエストします。このアクセス権は、JavaScript アプリケーションで OAuth 2.0 のフローを開始する方法を示すためにのみリクエストされます。このアプリは API リクエストを行いません。

JavaScript サンプルコード

上記のコードサンプルは、JavaScript 用の Google API クライアント ライブラリを読み込み、OAuth 2.0 フローを開始するページ（アプリ）用です。このページには、次のいずれかが表示されます。

• ユーザーがアプリにログインするための 1 つのボタン。ユーザーがまだアプリを認証していない場合は、OAuth 2.0 フローを起動します。
• ユーザーがアプリからログアウトすること、またはアプリに以前付与されたアクセス権を取り消すことが可能な 2 つのボタン。アプリからログアウトした場合、アプリに付与されたアクセス権は取り消されません。アプリがお客様に代わって他の承認済みリクエストを送信する前に、再度ログインする必要があります。ただし、次回アプリにアクセスする際にアクセス権を再度付与する場合は、アクセス権を再度付与する必要があります。

Google アカウントの [権限] ページでアプリへのアクセスを取り消すこともできます。アプリが Google API Docs の OAuth 2.0 デモとしてリストされている。

<script>
  var GoogleAuth;
  var SCOPE = 'https://www.googleapis.com/auth/drive.metadata.readonly';
  function handleClientLoad() {
    // Load the API's client and auth2 modules.
    // Call the initClient function after the modules load.
    gapi.load('client:auth2', initClient);
  }

  function initClient() {
    // In practice, your app can retrieve one or more discovery documents.
    var discoveryUrl = 'https://www.googleapis.com/discovery/v1/apis/drive/v3/rest';

    // Initialize the gapi.client object, which app uses to make API requests.
    // Get API key and client ID from API Console.
    // 'scope' field specifies space-delimited list of access scopes.
    gapi.client.init({
        'apiKey': 'YOUR_API_KEY',
        'clientId': 'YOUR_CLIENT_ID',
        'discoveryDocs': [discoveryUrl],
        'scope': SCOPE
    }).then(function () {
      GoogleAuth = gapi.auth2.getAuthInstance();

      // Listen for sign-in state changes.
      GoogleAuth.isSignedIn.listen(updateSigninStatus);

      // Handle initial sign-in state. (Determine if user is already signed in.)
      var user = GoogleAuth.currentUser.get();
      setSigninStatus();

      // Call handleAuthClick function when user clicks on
      //      "Sign In/Authorize" button.
      $('#sign-in-or-out-button').click(function() {
        handleAuthClick();
      });
      $('#revoke-access-button').click(function() {
        revokeAccess();
      });
    });
  }

  function handleAuthClick() {
    if (GoogleAuth.isSignedIn.get()) {
      // User is authorized and has clicked "Sign out" button.
      GoogleAuth.signOut();
    } else {
      // User is not signed in. Start Google auth flow.
      GoogleAuth.signIn();
    }
  }

  function revokeAccess() {
    GoogleAuth.disconnect();
  }

  function setSigninStatus() {
    var user = GoogleAuth.currentUser.get();
    var isAuthorized = user.hasGrantedScopes(SCOPE);
    if (isAuthorized) {
      $('#sign-in-or-out-button').html('Sign out');
      $('#revoke-access-button').css('display', 'inline-block');
      $('#auth-status').html('You are currently signed in and have granted ' +
          'access to this app.');
    } else {
      $('#sign-in-or-out-button').html('Sign In/Authorize');
      $('#revoke-access-button').css('display', 'none');
      $('#auth-status').html('You have not authorized this app or you are ' +
          'signed out.');
    }
  }

  function updateSigninStatus() {
    setSigninStatus();
  }
</script>

<button id="sign-in-or-out-button"
        style="margin-left: 25px">Sign In/Authorize</button>
<button id="revoke-access-button"
        style="display: none; margin-left: 25px">Revoke access</button>

<div id="auth-status" style="display: inline; padding-left: 25px"></div><hr>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></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>

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/drive.metadata.readonly スコープへのアクセスがリクエストされます。
2. リクエストされた 1 つ以上のスコープへのアクセス権を付与（または拒否）すると、ユーザーは元のページにリダイレクトされ、フラグメント識別子文字列からアクセス トークンが解析されます。

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

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

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

アプリのアクセス権は、Google アカウントの [権限] ページで取り消すことができます。アプリは Google API Docs の OAuth 2.0 デモとして表示されます。

このコードをローカルで実行するには、認証情報に対応する YOUR_CLIENT_ID 変数と YOUR_REDIRECT_URI 変数の値を設定する必要があります。YOUR_REDIRECT_URI 変数には、ページが提供される 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';
  var fragmentString = location.hash.substring(1);

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

  // 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() {
    // 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': 'try_sample_request',
                  '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>

JS クライアント ライブラリ

既存のアクセス トークンにスコープを追加するには、GoogleUser.grant(options) メソッドを呼び出します。options オブジェクトは、アクセス権を付与する追加のスコープを識別します。

// Space-separated list of additional scope(s) you are requesting access to.
// This code adds read-only access to the user's calendars via the Calendar API.
var NEW_SCOPES = 'https://www.googleapis.com/auth/calendar.readonly';

// Retrieve the GoogleUser object for the current user.
var GoogleUser = GoogleAuth.currentUser.get();
GoogleUser.grant({'scope': NEW_SCOPES});

OAuth 2.0 エンドポイント

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

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

スニペットは、アクセス トークンが有効なスコープを、特定のクエリに使用するスコープと比較します。アクセス トークンがスコープに含まれない場合、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.
}

JS クライアント ライブラリ

プログラムでトークンを取り消すには、 GoogleAuth.disconnect() を呼び出します。

GoogleAuth.disconnect();

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();
}