クライアント側のWebアプリケーション用のOAuth2.0

このドキュメントでは、JavaScriptWebアプリケーションからGoogleAPIにアクセスするためのOAuth2.0認証を実装する方法について説明します。 OAuth 2.0を使用すると、ユーザーはユーザー名、パスワード、その他の情報を非公開にしたまま、特定のデータをアプリケーションと共有できます。たとえば、アプリケーションはOAuth 2.0を使用して、ユーザーからGoogleドライブにファイルを保存する許可を取得できます。

このOAuth 2.0のフローは、暗黙の補助金の流れと呼ばれています。これは、ユーザーがアプリケーションにいるときにのみAPIにアクセスするアプリケーション向けに設計されています。これらのアプリケーションは機密情報を保存できません。

このフローでは、アプリはクエリパラメータを使用してアプリとアプリに必要なAPIアクセスのタイプを識別するGoogleURLを開きます。現在のブラウザウィンドウまたはポップアップでURLを開くことができます。ユーザーはGoogleで認証し、要求された権限を付与できます。次に、Googleはユーザーをアプリにリダイレクトします。リダイレクトにはアクセストークンが含まれています。アクセストークンは、アプリが検証してからAPIリクエストを行うために使用します。

前提条件

プロジェクトのAPIを有効にする

GoogleのAPIを呼び出す任意のアプリケーションがでこれらのAPIを有効にする必要があります API Console。

プロジェクトのAPIを有効にするには:

  1. Open the API Library で Google API Console。
  2. If prompted, select a project, or create a new one.
  3. API Library 製品ファミリと人気によってグループ化されたリストのすべての利用可能なAPI、。有効にするAPIが一覧で表示されていない場合は、使用した検索は、それを見つけるか、それが属する製品ファミリですべて表示をクリックします。
  4. 有効にするAPIを選択して、[有効]ボタンをクリックしてください。
  5. If prompted, enable billing.
  6. If prompted, read and accept the API's Terms of Service.

承認資格情報を作成する

OAuth2.0を使用してGoogleAPIにアクセスするアプリケーションには、GoogleのOAuth2.0サーバーに対してアプリケーションを識別する認証資格情報が必要です。次の手順では、プロジェクトのクレデンシャルを作成する方法について説明します。その後、アプリケーションは資格情報を使用して、そのプロジェクトで有効にしたAPIにアクセスできます。

  1. Go to the Credentials page.
  2. >のOAuthクライアントIDを認証情報を作成]をクリックします。
  3. Webアプリケーションのアプリケーションの種類を選択します。
  4. フォームに記入します。認可のGoogle APIリクエストを作成するためにJavaScriptを使用するアプリケーションは、許可JavaScriptの起源を指定する必要があります。オリジンは、アプリケーションがOAuth2.0サーバーにリクエストを送信できるドメインを識別します。これらの起源はに準拠している必要があり、Googleの検証ルール

アクセス範囲を特定する

スコープを使用すると、アプリケーションは必要なリソースへのアクセスのみを要求でき、ユーザーはアプリケーションに付与するアクセスの量を制御することもできます。したがって、要求されたスコープの数とユーザーの同意を得る可能性の間には反比例の関係がある可能性があります。

OAuth 2.0承認の実装を開始する前に、アプリがアクセスするためにアクセス許可を必要とするスコープを特定することをお勧めします。

OAuth 2.0のAPIスコープのドキュメントは、Google APIのアクセスに使用する可能性のあるスコープの完全なリストが含まれています。

OAuth2.0アクセストークンの取得

次の手順は、アプリケーションがGoogleのOAuth 2.0サーバーと対話して、ユーザーに代わってAPIリクエストを実行するというユーザーの同意を取得する方法を示しています。アプリケーションは、ユーザー認証を必要とするGoogle APIリクエストを実行する前に、その同意を得る必要があります。

手順1:クライアントオブジェクトを構成する

あなたが使用している場合はJavaScript用Google APIクライアントライブラリをOAuth 2.0のフローを処理するために、あなたの最初のステップは、設定することですgapi.auth2gapi.clientオブジェクトを。これらのオブジェクトを使用すると、アプリケーションでユーザー承認を取得し、承認されたAPIリクエストを行うことができます。

クライアントオブジェクトは、アプリケーションがアクセス許可を要求しているスコープを識別します。これらの値は、Googleがユーザーに表示する同意画面に通知します。

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

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

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

以下のコードは、からの抜粋である完全な例本書で後に示します。このコードは、初期化gapi.clientアプリケーションが後でAPI呼び出しを行うために使用するオブジェクトを、。そのオブジェクトが作成されると、 gapi.auth2アプリケーションがチェックし、ユーザーの認証ステータスを監視するために使用するオブジェクトも、初期化されます。

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

  • apiKeyclientIdの値は、アプリケーションの認証資格情報を指定します。で論じたように作成許可証明書のセクションは、これらの値を得ることができる API Console。注意clientIdアプリケーションが承認されたAPIリクエストを行う場合に必要です。許可されていないリクエストのみを行うアプリケーションは、APIキーを指定するだけです。
  • scopeフィールドはスペースで区切られたリストを指定するスコープのアクセスをアプリケーションがユーザーに代わってアクセスすることができましたことをリソースにその対応を。これらの値は、Googleがユーザーに表示する同意画面に通知します。

    可能な限り、アプリケーションがコンテキスト内の承認スコープへのアクセスを要求することをお勧めします。経由して、コンテキスト内のユーザーデータへのアクセスを要求することにより、増分承認、あなたはあなたのアプリケーションが要求しているのアクセスを必要とする理由より簡単に、ユーザーが理解するのに役立ち。

  • discoveryDocsフィールドには、リストを識別するAPIディスカバリー文書をアプリケーションが使用すること。 Discoveryドキュメントは、リソーススキーマを含むAPIの表面を記述し、JavaScriptクライアントライブラリはその情報を使用して、アプリケーションが使用できるメソッドを生成します。この例では、コードはGoogle DriveAPIのバージョン3の検出ドキュメントを取得します。

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

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

OAuth2.0エンドポイント

OAuth 2.0エンドポイントに直接アクセスしている場合は、次の手順に進むことができます。

ステップ2:GoogleのOAuth2.0サーバーにリダイレクトする

ユーザーのデータにアクセスする許可をリクエストするには、ユーザーをGoogleのOAuth2.0サーバーにリダイレクトします。

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

コールGoogleAuth.signIn() Googleの承認サーバーにユーザーを誘導する方法を。

GoogleAuth.signIn();

実際には、あなたのアプリケーションが呼び出すかどうかを判断するためにブール値を設定できますsignIn() API呼び出しを作るしようとする前に方法を。

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

  • 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;
  }
}

OAuth2.0エンドポイント

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

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

パラメーター
client_id必須

アプリケーションのクライアントID。あなたには、この値を見つけることができ API ConsoleCredentials page

redirect_uri必須

ユーザーが承認フローを完了した後、APIサーバーがユーザーをリダイレクトする場所を決定します。値は正確にあなたのクライアントの中に構成されたOAuth 2.0のクライアントのための認可リダイレクトURIの1と一致しなければなりません API ConsoleCredentials page。この値は、提供するために許可されたリダイレクトURIと一致しない場合client_idあなたが得るでしょうredirect_uri_mismatchエラーを。

なお、 httpまたはhttpsスキーム、ケース、および後続のスラッシュ(「 / 」)がすべて一致しなければなりません。

response_type必須

JavaScriptアプリケーションはにパラメータの値を設定する必要がありますtoken 。この値は、としてアクセストークンを返すためにGoogle認証サーバーに指示name=value URI(のフラグメント識別子でペア#ユーザーが認証プロセスを完了した後にリダイレクトされているが)。

scope必須

アプリケーションがユーザーに代わってアクセスできるリソースを識別する、スペースで区切られたスコープのリスト。これらの値は、Googleがユーザーに表示する同意画面に通知します。

スコープを使用すると、アプリケーションは必要なリソースへのアクセスのみを要求でき、ユーザーはアプリケーションに付与するアクセスの量を制御することもできます。したがって、要求されたスコープの数とユーザーの同意を得る可能性の間には反比例の関係があります。

可能な限り、アプリケーションがコンテキスト内の承認スコープへのアクセスを要求することをお勧めします。経由して、コンテキスト内のユーザーデータへのアクセスを要求することにより、増分承認、あなたはあなたのアプリケーションが要求しているのアクセスを必要とする理由より簡単に、ユーザーが理解するのに役立ち。

stateおすすめされた

アプリケーションが承認要求と承認サーバーの応答の間の状態を維持するために使用する文字列値を指定します。サーバーは、あなたのように送ることを正確な値を返しますname=value URLのフラグメント識別子でペア( #の) redirect_uriするユーザーが同意した後、またはアプリケーションのアクセス要求を拒否します。

このパラメーターは、アプリケーション内の正しいリソースへのユーザーの誘導、ナンスの送信、クロスサイトリクエストフォージェリの軽減など、いくつかの目的に使用できます。あなた以来redirect_uri推測することができ、使用state値は、着信接続が認証要求の結果であることを、あなたの保証を増やすことができます。ランダムな文字列を生成するか、Cookieのハッシュまたはクライアントの状態をキャプチャする別の値をエンコードする場合、応答を検証して、要求と応答が同じブラウザから発信されたことをさらに確認し、クロスサイトなどの攻撃から保護することができます。偽造を要求します。参照してくださいOpenIDの接続の作成と確認する方法の例のドキュメントstateトークンを。

include_granted_scopesオプション

アプリケーションが増分承認を使用して、コンテキスト内の追加のスコープへのアクセスを要求できるようにします。あなたはこのパラメータの値を設定した場合trueと認証要求が許可され、その後、新しいアクセストークンは、ユーザーが以前にアプリケーションへのアクセスを許可されたすべてのスコープをカバーします。参照増分承認例のセクションを。

login_hintオプション

アプリケーションは、どのユーザーが認証を試みているかを知っている場合、このパラメーターを使用して、Google認証サーバーにヒントを提供できます。サーバーはヒントを使用して、サインインフォームの電子メールフィールドに事前に入力するか、適切なマルチログインセッションを選択することにより、ログインフローを簡素化します。

電子メールアドレスまたはにパラメータ値を設定しsubユーザーのGoogle IDに相当する、識別子。

promptオプション

ユーザーに表示するプロンプトのスペース区切りの大文字と小文字を区別するリスト。このパラメーターを指定しない場合、プロジェクトが最初にアクセスを要求したときにのみユーザーにプロンプ​​トが表示されます。参照の再同意をプロンプトの詳細については。

可能な値は次のとおりです。

none認証画面や同意画面を表示しないでください。他の値と一緒に指定してはなりません。
consentユーザーに同意を求めます。
select_accountアカウントを選択するようにユーザーに促します。

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用のGoogleAPIクライアントライブラリを使用せずにJavaScriptで承認フローを開始する方法を示しています。このOAuth2.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();
}

ステップ3:Googleはユーザーに同意を求める

このステップでは、ユーザーはアプリケーションに要求されたアクセスを許可するかどうかを決定します。この段階で、Googleは、アプリケーションの名前と、ユーザーの認証資格情報を使用してアクセスの許可を要求しているGoogle APIサービスと、付与されるアクセス範囲の概要を示す同意ウィンドウを表示します。その後、ユーザーは、アプリケーションによって要求された1つ以上のスコープへのアクセスを許可するか、要求を拒否することに同意できます。

アプリケーションは、アクセスが許可されたかどうかを示すGoogleのOAuth 2.0サーバーからの応答を待つため、この段階では何​​もする必要はありません。その応答については、次の手順で説明します。

エラー

GoogleのOAuth2.0承認エンドポイントへのリクエストでは、予想される認証と承認のフローではなく、ユーザー向けのエラーメッセージが表示される場合があります。一般的なエラーコードと推奨される解決策を以下に示します。

admin_policy_enforced

Googleワークスペース管理者のポリシーにより、Googleアカウントは要求された1つ以上のスコープを承認できません。 Googleのワークスペース管理のヘルプ記事を参照してください。サードパーティ&内部アプリはGoogleのワークスペースのデータにアクセスコントロールアクセスを明示的にあなたのOAuthクライアントIDに付与されるまで、管理者はすべてのスコープまたは機密と制限されたスコープへのアクセスを制限する方法の詳細については、を。

disallowed_useragent

認可エンドポイントは、Googleのことで許可されていない組み込みユーザーエージェント内で表示されるOAuth 2.0のポリシー

アンドロイド

で承認リクエストを開くときにAndroidの開発者は、このエラーメッセージが発生することがありandroid.webkit.WebView 。開発者は、代わりのようなアンドロイドのライブラリを使用する必要があり、GoogleのAndroidのためのサインインまたはのOpenID FoundationのAndroid向けAppAuthを

Androidアプリが埋め込みユーザーエージェントで一般的なウェブリンクを開き、ユーザーがサイトからGoogleのOAuth 2.0認証エンドポイントに移動すると、ウェブ開発者がこのエラーに遭遇する可能性があります。開発者は、一般的なリンクが両方含まれるオペレーティングシステムのデフォルトのリンクハンドラで開くことができるようにすべきであるAndroidのアプリのリンクハンドラまたはデフォルトのブラウザアプリを。 Androidのカスタムタブのライブラリもサポートオプションです。

iOS

で承認リクエストを開くときにiOSとMacOSの開発者は、このエラーが発生することがありWKWebView 。開発者は、代わりのようなiOSのライブラリを使用する必要がありますGoogleのiOS用のサインインやOpenIDの財団のiOS用AppAuth

iOSまたはmacOSアプリが埋め込みユーザーエージェントで一般的なWebリンクを開き、ユーザーがサイトからGoogleのOAuth 2.0認証エンドポイントに移動すると、Web開発者がこのエラーに遭遇する可能性があります。開発者は、一般的なリンクが両方含まれるオペレーティングシステムのデフォルトのリンクハンドラで開くことができるようにすべきであるユニバーサル・リンク・ハンドラまたはデフォルトのブラウザアプリを。SFSafariViewControllerライブラリもサポートオプションです。

org_internal

リクエストでのOAuthクライアントIDを特定してGoogleアカウントへのアクセスを制限するプロジェクトの一部であるGoogleクラウド組織。この設定オプションの詳細については参照のユーザータイプのあなたのOAuth同意画面のヘルプ記事の設定でセクションを。

origin_mismatch

承認リクエストを発信するJavaScriptのスキーム、ドメイン、ポートが、OAuthクライアントIDに登録されている承認済みのJavaScriptオリジンURIと一致しない場合があります。レビューはでJavaScriptの起源を許可 Google API ConsoleCredentials page

redirect_uri_mismatch

redirect_uri認可要求に渡されたのOAuthクライアントIDのために認可されたリダイレクトURIと一致していません。レビューはでリダイレクトURIを許可 Google API Console Credentials page

承認リクエストを発信するJavaScriptのスキーム、ドメイン、ポートが、OAuthクライアントIDに登録されている承認済みのJavaScriptオリジンURIと一致しない場合があります。レビューはでJavaScriptの起源を許可 Google API Console Credentials page

ステップ4:OAuth2.0サーバーの応答を処理する

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

JavaScriptクライアントライブラリは、Googleの認証サーバーからの応答を処理します。現在のユーザーのサインイン状態の変化を監視するようにリスナーを設定した場合、その関数は、ユーザーが要求されたアプリケーションへのアクセスを許可したときに呼び出されます。

OAuth2.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

サンプルのOAuth2.0サーバーの応答

このフローをテストするには、次のサンプルURLをクリックします。このサンプル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で返される情報について詳しく説明します。

GoogleAPIの呼び出し

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

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

クライアントライブラリは、APIメソッドを呼び出す2つの方法をサポートしています。検出ドキュメントをロードした場合、APIはメソッド固有の関数を定義します。また、使用することができますgapi.client.request APIメソッドを呼び出すための関数を。次の二つのスニペットは、ドライブの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);
});

OAuth2.0エンドポイント

アプリケーションがアクセストークンを取得した後、APIに必要なアクセス範囲が付与されている場合は、トークンを使用して、特定のユーザーアカウントに代わってGoogleAPIを呼び出すことができます。これを行うには、いずれかを含むことにより、APIへのリクエストにアクセストークン含むaccess_token 、クエリパラメータまたはAuthorization HTTPヘッダーBearer値。クエリ文字列はサーバーログに表示される傾向があるため、可能な場合はHTTPヘッダーを使用することをお勧めします。ほとんどの場合、あなたは、GoogleのAPIへのあなたの通話を設定するには、クライアントライブラリを使用することができます(例えば、時にドライブのファイルAPIを呼び出します)。

あなたはすべてのGoogleのAPIを試してみるとで彼らのスコープを表示することができOAuth 2.0の遊び場

HTTPGETの例

呼び出しdrive.filesエンドポイント(ドライブファイルのAPI)を使用してAuthorization: Bearer HTTPヘッダーには、次のようになります。独自のアクセストークンを指定する必要があることに注意してください。

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

ここで使用して認証されたユーザーのために、同じAPIの呼び出しですaccess_token 、クエリ文字列パラメータは:

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(クロスオリジンリソースシェアリング)を使用してGoogleAPIにリクエストを送信する方法を示しています。この例では、JavaScript用のGoogleAPIクライアントライブラリを使用していません。ただし、クライアントライブラリを使用していない場合でも、 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アカウントに接続されたアプリ。アプリはGoogleのAPIドキュメントのためのOAuth 2.0のデモと命名されます。同様に、アクセスを取り消してそのページを更新すると、そのアプリは表示されなくなります。

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

JavaScriptサンプルコード

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

  • ユーザーがアプリにサインインできるようにする1つのボタン。ユーザーが以前にアプリを承認していない場合、アプリはOAuth2.0フローを起動します。
  • ユーザーがアプリからサインアウトするか、以前にアプリに付与されていたアクセスを取り消すことができる2つのボタン。アプリからサインアウトしても、アプリに付与されているアクセスは取り消されていません。アプリがあなたに代わって他の承認されたリクエストを行う前に、再度サインインする必要がありますが、次にアプリを使用するときに再度アクセスを許可する必要はありません。ただし、アクセスを取り消す場合は、再度アクセスを許可する必要があります。

あなたはまたを通じてアプリへのアクセス権を取り消すことができる権限のGoogleアカウントのためのページ。アプリはGoogleのAPIドキュメントのための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>

OAuth2.0エンドポイント

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

OAuth 2.0フローの場合、ページは次の手順に従います。

  1. それはへのアクセス要求、GoogleのOAuth 2.0のサーバーにユーザーに指示https://www.googleapis.com/auth/drive.metadata.readonlyスコープを。
  2. 1つ以上の要求されたスコープへのアクセスを許可(または拒否)した後、ユーザーは元のページにリダイレクトされ、フラグメント識別子文字列からアクセストークンが解析されます。
  3. このページは、アクセストークンを使用してサンプルAPIリクエストを作成します。

    APIリクエストは、ドライブのAPIの呼び出しをabout.get権限のユーザーのGoogleドライブのアカウントに関する情報を取得する方法を。

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

あなたはを通してアプリへのアクセスを取り消すことができる権限のGoogleアカウントのためのページ。アプリはGoogleのAPIドキュメントのためのOAuth 2.0のデモとして表示されます。

ローカルにこのコードを実行するには、の値を設定する必要がYOUR_CLIENT_IDYOUR_REDIRECT_URIそのあなたに相当する変数の認可資格YOUR_REDIRECT_URI変数は、ページが提供されているのと同じURLに設定する必要があります。値は正確にあなたが設定さOAuth 2.0のクライアントのための認可リダイレクトURIの1と一致しなければなりません 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';
  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>

JavaScriptオリジン検証ルール

Googleは、開発者がアプリケーションを安全に保つのを支援するために、JavaScriptオリジンに次の検証ルールを適用します。 JavaScriptのオリジンは、これらのルールに準拠している必要があります。参照してくださいRFC 3986のセクション3の下に言及したドメイン、ホストおよびスキームの定義については、。

検証ルール
図式

JavaScriptオリジンは、プレーンHTTPではなくHTTPSスキームを使用する必要があります。ローカルホストURI(ローカルホストIPアドレスURIを含む)はこのルールから除外されます。

ホスト

ホストを生のIPアドレスにすることはできません。ローカルホストのIPアドレスはこのルールから除外されます。

ドメイン
  • ホストのTLD(トップレベルドメインは)に属している必要があり、公共のサフィックスリスト
  • ホストドメインにすることはできません“googleusercontent.com”
  • JavaScriptの起源は(例えばURL短縮サービスドメインを含めることはできませんgoo.glアプリは、ドメインを所有していない限り)。
  • ユーザー情報

    JavaScriptオリジンにuserinfoサブコンポーネントを含めることはできません。

    JavaScriptオリジンにパスコンポーネントを含めることはできません。

    クエリ

    JavaScriptオリジンにクエリコンポーネントを含めることはできません。

    断片

    JavaScriptオリジンにフラグメントコンポーネントを含めることはできません。

    キャラクターJavaScriptオリジンには、次のような特定の文字を含めることはできません。
    • ワイルドカード文字( '*'
    • 印刷不可能なASCII文字
    • 無効なパーセントエンコーディング(パーセント記号の後に2桁の16進数が続くURLエンコード形式に従わないパーセントエンコーディング)
    • ヌル文字(エンコードされたNULL文字、例えば、 %00%C0%80

    増分承認

    OAuth 2.0プロトコルでは、アプリは、スコープによって識別されるリソースにアクセスするための承認を要求します。リソースが必要になったときにリソースの承認を要求することは、ユーザーエクスペリエンスのベストプラクティスと見なされています。その慣行を可能にするために、Googleの認証サーバーは増分認証をサポートしています。この機能を使用すると、必要に応じてスコープをリクエストできます。ユーザーが新しいスコープの権限を付与すると、ユーザーがプロジェクトに付与したすべてのスコープを含むトークンと交換できる認証コードが返されます。

    たとえば、ユーザーが音楽トラックをサンプリングしてミックスを作成できるアプリでは、サインイン時に必要なリソースはごくわずかで、おそらくサインインする人の名前だけです。ただし、完成したミックスを保存するには、Googleドライブにアクセスする必要があります。 。ほとんどの人は、アプリが実際に必要なときにGoogleドライブへのアクセスを求められただけで自然だと思うでしょう。

    この場合、サインイン時にアプリが要求するかもしれないopenid及びprofileの基本的なサインインを実行するスコープを、そしてその後要求https://www.googleapis.com/auth/drive.file時の範囲をミックスを保存する最初のリクエスト。

    増分認証から取得したアクセストークンには、次のルールが適用されます。

    • トークンを使用して、新しい結合された承認にロールインされたスコープのいずれかに対応するリソースにアクセスできます。
    • あなたがアクセストークンを取得するために複合認証にリフレッシュトークンを使用すると、アクセストークンは、結合承認を表し、のいずれかのために使用することができるscope応答に含まれる値。
    • 結合された承認には、付与が異なるクライアントから要求された場合でも、ユーザーがAPIプロジェクトに付与したすべてのスコープが含まれます。たとえば、ユーザーがアプリケーションのデスクトップクライアントを使用して1つのスコープへのアクセスを許可し、次にモバイルクライアントを介して同じアプリケーションに別のスコープを許可した場合、結合された承認には両方のスコープが含まれます。
    • 結合された承認を表すトークンを取り消すと、関連付けられたユーザーに代わってその承認のすべてのスコープへのアクセスが同時に取り消されます。

    以下のコードサンプルは、既存のアクセストークンにスコープを追加する方法を示しています。このアプローチにより、アプリは複数のアクセストークンを管理する必要がなくなります。

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

    OAuth2.0エンドポイント

    既存のアクセストークンにスコープを追加するには、含まれinclude_granted_scopesあなたのパラメータを、GoogleのOAuth 2.0のサーバーに要求

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

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

    トークンを取り消す

    場合によっては、ユーザーはアプリケーションに与えられたアクセスを取り消すことができます。ユーザーが訪問してアクセスを取り消すことができるアカウント設定を。参照してください。アカウントへのアクセス権を持つサードパーティのサイト&アプリを削除サイトやアプリのアクセスセクションを詳細については、サポートドキュメント。

    アプリケーションが、与えられたアクセスをプログラムで取り消すことも可能です。プログラムによる失効は、ユーザーが登録を解除したり、アプリケーションを削除したり、アプリに必要なAPIリソースが大幅に変更されたりした場合に重要です。つまり、削除プロセスの一部にAPIリクエストを含めて、以前にアプリケーションに付与された権限が確実に削除されるようにすることができます。

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

    プログラムでトークン、コール取り消すにGoogleAuth.disconnect()

    GoogleAuth.disconnect();

    OAuth2.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}

    The token can be an access token or a refresh token. If the token is an access token and it has a corresponding refresh token, the refresh token will also be revoked.

    If the revocation is successfully processed, then the HTTP status code of the response is 200 . For error conditions, an HTTP status code 400 is returned along with an error code.

    The following JavaScript snippet shows how to revoke a token in JavaScript without using the Google APIs Client Library for JavaScript. Since the Google's OAuth 2.0 endpoint for revoking tokens does not support Cross-origin Resource Sharing (CORS), the code creates a form and submits the form to the endpoint rather than using the XMLHttpRequest() method to post the request.

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