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

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

このドキュメントでは、OAuth 2.0 認証を実装して、JavaScript ウェブアプリケーションから YouTube Data API にアクセスできるようにする方法を説明します。OAuth 2.0 では、ユーザー名やパスワードなどの情報を秘密にしたまま、ユーザーが特定のデータをアプリケーションと共有できます。たとえば、アプリケーションは OAuth 2.0 を使用して、ユーザーの YouTube チャンネルに動画をアップロードするための権限を取得できます。

この OAuth 2.0 フローは、暗黙的な権限付与フローと呼ばれます。ユーザーがアプリケーションを使用しているときにのみ API にアクセスするアプリのために設計されています。これらのアプリケーションは機密情報を保存できません。

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

Google API クライアントライブラリと Google Identity サービス

JavaScript 用 Google API クライアントライブラリを使用して Google に承認済みの呼び出しを行う場合は、 Google Identity Services の JavaScript ライブラリを使用して OAuth 2.0 フローを処理する必要があります。OAuth 2.0 の暗黙的付与フローに基づく Google ID サービスのトークンモデルをご覧ください。

Prerequisites

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

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

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

Google API ConsoleのOpen the API Library 。
If prompted, select a project, or create a new one.
[ライブラリ] ページで、YouTube Data API を探して有効にします。アプリケーションで使用するその他の API を探して、それも有効にします。

承認認証情報を作成する

OAuth 2.0 を使用して Google API にアクセスするアプリケーションには、Google の OAuth 2.0 サーバーにアプリケーションを識別するための認証情報が必要です。次の手順では、プロジェクトの認証情報を作成する方法について説明します。これにより、アプリケーションはその認証情報を使用して、そのプロジェクトで有効にした API にアクセスできます。

Go to the Credentials page.
[認証情報を作成] > [OAuth クライアント ID] をクリックします。
アプリケーションの種類として [ウェブアプリケーション] を選択します。
フォームに入力します。JavaScript を使用して承認済みの Google API リクエストを実行するアプリケーションでは、承認済みの JavaScript 生成元を指定する必要があります。生成元は、アプリケーションが OAuth 2.0 サーバーにリクエストを送信できるドメインを識別します。これらのオリジンは、Google の検証ルールを遵守している必要があります。

アクセススコープを特定する

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

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

YouTube Data API v3 では、次のスコープが使用されます。

スコープ
https://www.googleapis.com/auth/youtube	YouTube アカウントの管理
https://www.googleapis.com/auth/youtube.channel-memberships.creator	現在アクティブなチャンネルメンバー、メンバーの現在のレベル、いつメンバーになったかをリストで確認する
https://www.googleapis.com/auth/youtube.force-ssl	YouTube 動画、評価、コメント、字幕の表示、編集、完全削除
https://www.googleapis.com/auth/youtube.readonly	YouTube アカウントの表示
https://www.googleapis.com/auth/youtube.upload	YouTube 動画の管理
https://www.googleapis.com/auth/youtubepartner	YouTube のアセットや関連するコンテンツの表示と管理
https://www.googleapis.com/auth/youtubepartner-channel-audit	YouTube パートナーの監査プロセス時に関連する YouTube チャンネルの個人情報の表示

OAuth 2.0 API スコープのドキュメントに、Google API へのアクセスに使用できるすべてのスコープが記載されています。

OAuth 2.0 アクセストークンの取得

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

ステップ 1: Google の OAuth 2.0 サーバーにリダイレクトする

ユーザーのデータにアクセスする権限をリクエストするには、Google の OAuth 2.0 サーバーにユーザーをリダイレクトします。

OAuth 2.0 エンドポイント

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

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

パラメータ

client_id

必須

アプリケーションのクライアント ID。この値は API Console Credentials pageにあります。

redirect_uri

必須

ユーザーが認証フローを完了した後に API サーバーがユーザーをリダイレクトする場所を決定します。この値は、クライアントの API Consoleの Credentials pageで構成した OAuth 2.0 クライアントの承認済みリダイレクト URI のいずれかと完全に一致する必要があります。この値が、指定した client_id の承認済みリダイレクト URI と一致しない場合は、redirect_uri_mismatch エラーが発生します。

http または https のスキーム、大文字、末尾のスラッシュ（「/」）はすべて一致している必要があります。

response_type

必須

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

scope

必須

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

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

YouTube Data API v3 では、次のスコープが使用されます。

スコープ
https://www.googleapis.com/auth/youtube	YouTube アカウントの管理
https://www.googleapis.com/auth/youtube.channel-memberships.creator	現在アクティブなチャンネルメンバー、メンバーの現在のレベル、いつメンバーになったかをリストで確認する
https://www.googleapis.com/auth/youtube.force-ssl	YouTube 動画、評価、コメント、字幕の表示、編集、完全削除
https://www.googleapis.com/auth/youtube.readonly	YouTube アカウントの表示
https://www.googleapis.com/auth/youtube.upload	YouTube 動画の管理
https://www.googleapis.com/auth/youtubepartner	YouTube のアセットや関連するコンテンツの表示と管理
https://www.googleapis.com/auth/youtubepartner-channel-audit	YouTube パートナーの監査プロセス時に関連する YouTube チャンネルの個人情報の表示

Google API へのアクセスに使用できるスコープの一覧については、OAuth 2.0 API スコープをご覧ください。

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

state

推奨

アプリケーションが認証リクエストと認可サーバーのレスポンスとの間の状態を維持するために使用する文字列値を指定します。ユーザーがアプリのアクセスリクエストを承認または拒否した後、サーバーは redirect_uri の URL フラグメント識別子（#）で、name=value ペアとして送信した正確な値を返します。

このパラメータは、アプリ内の適切なリソースにユーザーを誘導する、ノンスを送信する、クロスサイトリクエストフォージェリを軽減するなど、複数の目的で使用できます。redirect_uri は推測可能なため、state 値を使用すると、受信接続が認証リクエストの結果であるという保証を増やすことができます。ランダムな文字列を生成するか、Cookie や、クライアントの状態をキャプチャする別の値のハッシュをエンコードする場合は、レスポンスを検証することで、リクエストとレスポンスが同じブラウザから送信されるようになります。これにより、クロスサイトリクエストフォージェリなどの攻撃を防ぐことができます。state トークンを作成して確認する方法の例については、OpenID Connect のドキュメントをご覧ください。

include_granted_scopes

省略可

アプリケーションが増分認可を使用して、コンテキスト内で追加スコープへのアクセスをリクエストできるようにします。このパラメータの値を true に設定し、認証リクエストが付与されている場合、ユーザーが以前にアプリケーションへのアクセスを許可したスコープも新しいアクセストークンでカバーされます。例については、増分承認のセクションをご覧ください。

login_hint

省略可

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

パラメータ値をメールアドレスまたは sub ID に設定します。これは、ユーザーの Google ID と同じです。

prompt

省略可

スペース区切りのプロンプトで、ユーザーに提示するプロンプトのリスト。このパラメータを指定しない場合、プロジェクトへのアクセスがリクエストされたときに初めてメッセージが表示されます。詳しくは、再同意プロンプトをご覧ください。

表示される値は次のとおりです。

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

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 を作成したら、ユーザーをリダイレクトします。

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

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

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

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

エラー

Google の OAuth 2.0 認可エンドポイントへのリクエストには、想定される認証と認可のフローではなく、ユーザー向けのエラーメッセージが表示されることがあります。一般的なエラーコードとおすすめの解決方法を以下に示します。

`admin_policy_enforced`

Google Workspace 管理者のポリシーにより、リクエストされた 1 つ以上のスコープを Google アカウントで承認できません。管理者が OAuth クライアント ID に明示的にアクセス権が付与されるまで、すべてのスコープまたは機密性の高いスコープと制限付きスコープへのアクセスを制限する方法については、Google Workspace 管理者用ヘルプ記事の Google Workspace のデータにアクセスできるサードパーティ製アプリと内部アプリを制御するをご覧ください。

`disallowed_useragent`

認可エンドポイントは、Google の OAuth 2.0 ポリシーで許可されていない埋め込みユーザーエージェント内に表示されます。

Android

Android デベロッパーが android.webkit.WebView で承認リクエストを開いたときに、このエラーメッセージが表示されることがあります。代わりに Android 向け Google ログインや、OpenID Foundation の AppAuth for Android などの Android ライブラリを使用する必要があります。

このエラーは、Android アプリが埋め込みユーザーエージェントで一般的なウェブリンクを開き、ユーザーがサイトから Google の OAuth 2.0 認可エンドポイントに移動したときに、このエラーが発生することがあります。デベロッパーは、一般的なリンクをオペレーティングシステムのデフォルトリンクハンドラで開く必要があります。オペレーティングシステムのデフォルトハンドラは、Android アプリリンクハンドラとデフォルトのブラウザアプリの両方を含みます。Android カスタムタブライブラリもサポートされています。

iOS

iOS や macOS のデベロッパーが WKWebView で承認リクエストを開くと、このエラーが発生することがあります。代わりに iOS 向け Google ログインや、OpenID Foundation の AppAuth for iOS などの iOS ライブラリを使用する必要があります。

このエラーは、iOS または macOS アプリが埋め込みユーザーエージェントで一般的なウェブリンクを開き、ユーザーがサイトから Google の OAuth 2.0 認可エンドポイントに移動したときに、このエラーが発生することがあります。デベロッパーは、一般的なリンクがオペレーティングシステムのデフォルトリンクハンドラ（Universal Links ハンドラまたはデフォルトのブラウザアプリの両方を含む）で開かれるようにする必要があります。SFSafariViewController ライブラリもサポートされています。

`org_internal`

リクエストの OAuth クライアント ID は、特定の Google Cloud 組織の Google アカウントへのアクセスを制限するプロジェクトの一部です。この構成オプションの詳細については、OAuth 同意画面の設定ヘルプ記事のユーザータイプのセクションをご覧ください。

`invalid_client`

リクエストの発信元が、このクライアントに対して承認されていません。origin_mismatch をご覧ください。

`invalid_grant`

増分承認を使用している場合、トークンが期限切れになっているか、無効になっている可能性があります。ユーザーを再度認証し、新しいトークンの取得についてユーザーの同意を得ます。このエラーが引き続き表示される場合は、アプリケーションが正しく構成されていることと、リクエスト内で正しいトークンとパラメータを使用していることを確認してください。それ以外の場合は、ユーザーアカウントが削除または無効化されている可能性があります。

`origin_mismatch`

認可リクエスト元の JavaScript スキーム、ドメイン、ポートは、OAuth クライアント ID に登録された承認済み JavaScript 生成元 URI と一致しない場合があります。 Google API Console Credentials pageで、承認済みの JavaScript 生成元を確認します。

`redirect_uri_mismatch`

承認リクエストで渡された redirect_uri が、OAuth クライアント ID の承認済みのリダイレクト URI と一致しません。 Google API Console Credentials pageで、承認済みのリダイレクト URI を確認します。

redirect_uri パラメータは、サポートが終了し、サポートされなくなった OAuth 帯域外（OOB）フローを参照する場合があります。統合を更新するには、移行ガイドをご覧ください。

ステップ 3: OAuth 2.0 サーバーレスポンスを処理する

Google API の呼び出し

OAuth 2.0 エンドポイント

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

YouTube Data API では、レコードレーベルや映画制作会社など、複数の YouTube チャンネルを所有および管理する YouTube コンテンツ所有者のみがサービスアカウントをサポートしています。

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

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 フローの場合、このページで説明する手順は次のとおりです。

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

この API リクエストは、YouTube Data API の channels.list メソッドを呼び出して、承認されたユーザーの YouTube チャンネルに関するデータを取得します。
リクエストが正常に実行されると、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/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() {
    // 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': '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（localhost IP アドレス URI を含む）は、このルールから除外されます。
ホスト	ホストに未加工の IP アドレスを指定することはできません。ローカルホストの IP アドレスはこのルールから除外されます。
ドメイン	ホスト TLD（トップレベルドメイン）は、パブリックサフィックスリストに属している必要があります。ホストドメインを `“googleusercontent.com”` にすることはできません。 JavaScript 生成元には、アプリがそのドメインを所有している場合を除き、URL 短縮ドメイン（`goo.gl` など）を含めることはできません。
ユーザー情報	JavaScript 生成元に userinfo サブコンポーネントを含めることはできません。
[Path]	JavaScript 生成元にパスコンポーネントを含めることはできません。
クエリ	JavaScript 生成元にクエリコンポーネントを含めることはできません。
Fragment	JavaScript オリジンにフラグメントコンポーネントを含めることはできません。
キャラクター	JavaScript 生成元には、次のような特定の文字を含めることはできません。ワイルドカード文字（`'*'`）印刷できない ASCII 文字パーセントエンコードが無効です（パーセント記号で 2 桁の 16 進数を続けて URL エンコードを行わない形式） null 文字（エンコードされた NULL 文字、例:`%00`、`%C0%80`）

段階的な承認

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

たとえば、アプリが興味深いローカルイベントの特定をサポートするとします。ユーザーは、イベントに関する動画の視聴、動画の評価、再生リストへの動画の追加を行うことができます。ユーザーは、このアプリを使用して Google カレンダーに予定を追加することもできます。

この場合、ログイン時に、アプリがスコープにアクセスする必要がないか、アクセスをリクエストする必要がない場合があります。ただし、ユーザーが動画を評価しようとした場合、動画を再生リストに追加した場合、または別の YouTube 操作を実行した場合、アプリは https://www.googleapis.com/auth/youtube.force-ssl スコープへのアクセスをリクエストできます。同様に、ユーザーがカレンダーの予定を追加しようとした場合、アプリは https://www.googleapis.com/auth/calendar スコープへのアクセスをリクエストできます。

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

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

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

トークンの取り消し

ユーザーは、アプリケーションに付与されたアクセス権を取り消すことを希望する場合もあります。ユーザーはアカウント設定にアクセスして、アクセス権を取り消すことができます。詳しくは、アカウントにアクセスできるサードパーティのサイトやアプリのアクセス権を削除するをご覧ください。

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

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

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

Google API クライアント ライブラリと Google Identity サービス

Prerequisites

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

承認認証情報を作成する

アクセス スコープを特定する

OAuth 2.0 アクセス トークンの取得

ステップ 1: Google の OAuth 2.0 サーバーにリダイレクトする

OAuth 2.0 エンドポイント

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

JavaScript サンプルコード

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

エラー

admin_policy_enforced

disallowed_useragent

Android

iOS

org_internal

invalid_client

invalid_grant

origin_mismatch

redirect_uri_mismatch

ステップ 3: OAuth 2.0 サーバー レスポンスを処理する

OAuth 2.0 エンドポイント

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

Google API の呼び出し

OAuth 2.0 エンドポイント

HTTP GET の例

curl の例

JavaScript サンプルコード

完全な例

OAuth 2.0 エンドポイント

JavaScript オリジン検証ルール

段階的な承認

OAuth 2.0 エンドポイント

トークンの取り消し

OAuth 2.0 エンドポイント

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

Google API クライアントライブラリと Google Identity サービス

アクセススコープを特定する

OAuth 2.0 アクセストークンの取得

`admin_policy_enforced`

`disallowed_useragent`

`org_internal`

`invalid_client`

`invalid_grant`

`origin_mismatch`

`redirect_uri_mismatch`

ステップ 3: OAuth 2.0 サーバーレスポンスを処理する

`curl` の例