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

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

このドキュメントでは、アクセスに対する OAuth 2.0 認可を実装する方法について説明します。 JavaScript ウェブアプリケーションから YouTube Analytics API または YouTube Reporting API にリクエストを送信できます。OAuth 2.0 を使用すると、特定のデータをアプリケーションと共有しつつ、ユーザー名、パスワード、保護します。たとえば、アプリケーションは OAuth 2.0 を使用して権限を取得できます。を使用してチャンネルの YouTube アナリティクスのデータを取得できます。

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

このフローでは、アプリは、クエリパラメータを使用してアプリを識別する Google URL を開きますアプリが必要とする API アクセスのタイプなどです。現在のブラウザで URL を開くことができます表示することもできます。ユーザーは Google で認証を行い、必要な権限を付与できます。その後、Google はユーザーをアプリにリダイレクトします。リダイレクトに含まれるアクセストークン。アプリが検証し、それを使用して API リクエストを行います。

Google API クライアントライブラリと Google Identity Services

JavaScript 用 Google API クライアントライブラリを使用する場合 Google に対して承認された呼び出しを行うには、 OAuth 2.0 フローを処理するための Google Identity Services JavaScript ライブラリ。詳しくは、 Identity Services でトークンモデル。 OAuth 2.0 の「暗黙的な付与」フローに基づいて自動的に付与されるようになります。

前提条件

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

Google API を呼び出すアプリケーションでは、 API Console。

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

Open the API Library Google API Console。
If prompted, select a project, or create a new one.
[ライブラリ] ページで YouTube Analytics API と YouTube Reporting API を見つけて有効にします。YouTube アナリティクスのデータを取得する多くのアプリケーションも、YouTube Data API とやり取りします。アプリケーションで使用する他の API を見つけて、それらも有効にします。

承認認証情報を作成する

OAuth 2.0 を使用して Google API にアクセスするアプリケーションには、認証情報が必要です。アプリケーションを識別する 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 Analytics API では、次のスコープを使用します。

スコープ
https://www.googleapis.com/auth/youtube	YouTubeアカウントを管理する
https://www.googleapis.com/auth/youtube.readonly	YouTubeアカウントを表示する
https://www.googleapis.com/auth/youtubepartner	YouTubeでアセットと関連コンテンツを表示および管理する
https://www.googleapis.com/auth/yt-analytics-monetary.readonly	YouTubeコンテンツの金銭的および非金銭的なYouTubeAnalyticsレポートを表示する
https://www.googleapis.com/auth/yt-analytics.readonly	YouTubeコンテンツのYouTubeAnalyticsレポートを表示する

YouTube Reporting API では次のスコープを使用します。

スコープ
https://www.googleapis.com/auth/yt-analytics-monetary.readonly	YouTubeコンテンツの金銭的および非金銭的なYouTubeAnalyticsレポートを表示する
https://www.googleapis.com/auth/yt-analytics.readonly	YouTubeコンテンツのYouTubeAnalyticsレポートを表示する

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 エンドポイント

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

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

パラメータ

client_id

必須

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

redirect_uri

必須

ユーザーが次の操作を完了したら、API サーバーがユーザーをリダイレクトする場所を指定します。承認フローを実行しますこの値は、サービスに対して承認されたリダイレクト URI のいずれかと完全に一致する必要があります。 OAuth 2.0 クライアント（クライアントの API Console Credentials page。この値が一致する指定された client_id の承認済みのリダイレクト URI を取得すると、 redirect_uri_mismatch エラー。

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

response_type

必須

JavaScript アプリケーションでは、このパラメータの値を token に設定する必要があります。この value は、アクセストークンを送信先の URI（#）のフラグメント識別子内の name=value ペア認証プロセスの完了後にユーザーがリダイレクトされる。

scope

必須

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

スコープを使用すると、アプリケーションは必要なリソースへのアクセスのみをリクエストできるようになります。付与するアクセス権のレベルも制御できます説明します。したがって、リクエストされるスコープの数には逆相関があります。ユーザーの同意を得る可能性などです。

YouTube Analytics API では、次のスコープを使用します。

スコープ
https://www.googleapis.com/auth/youtube	YouTubeアカウントを管理する
https://www.googleapis.com/auth/youtube.readonly	YouTubeアカウントを表示する
https://www.googleapis.com/auth/youtubepartner	YouTubeでアセットと関連コンテンツを表示および管理する
https://www.googleapis.com/auth/yt-analytics-monetary.readonly	YouTubeコンテンツの金銭的および非金銭的なYouTubeAnalyticsレポートを表示する
https://www.googleapis.com/auth/yt-analytics.readonly	YouTubeコンテンツのYouTubeAnalyticsレポートを表示する

YouTube Reporting API では次のスコープを使用します。

スコープ
https://www.googleapis.com/auth/yt-analytics-monetary.readonly	YouTubeコンテンツの金銭的および非金銭的なYouTubeAnalyticsレポートを表示する
https://www.googleapis.com/auth/yt-analytics.readonly	YouTubeコンテンツのYouTubeAnalyticsレポートを表示する

OAuth 2.0 API スコープのドキュメントでは、 Google API へのアクセスに使用できるスコープの完全なリスト。

状況に応じて、認可スコープへのアクセスをアプリケーションでリクエストすることをおすすめします。可能な限り避けてください。コンテキスト内で、以下を使用してユーザーデータへのアクセスをリクエストする段階的な承認により、ユーザーがより簡単にアプリケーションがリクエストしているアクセスを必要とする理由を理解する。

state

推奨

アプリケーション間で状態を維持するために、アプリケーションが使用する文字列値認可リクエストと認可サーバーのレスポンスで構成されます。サーバーは、送信したコードを name=value ペアとして URL フラグメント識別子（#） redirect_uri ユーザーがアプリケーションのアクセスリクエストだけです。

このパラメータは、ユーザーをアプリケーション内の適切なリソースの確認、ノンスの送信、クロスサイトリクエストの軽減できます。redirect_uri は推測できるため、state を使用します。値を使用すると、受信接続が特定のサーバーに対する構成されます。ユーザーがランダムな文字列を生成したり、Cookie や Cookie のハッシュをエンコードしたりした場合、クライアントの状態を取得する別の値が必要な場合は、さらに、リクエストとレスポンスが同じブラウザから発信されたこと、次のような攻撃から保護します。クロスサイトリクエスト偽造。詳しくは、 OpenID Connect state トークンを作成して確認する方法の例をご覧ください。

</ph> 重要: OAuth クライアントでは、 OAuth2 仕様。これを実現する 1 つの方法は、state パラメータを使用して、認可リクエストと認可サーバーのレスポンスの間で、状態がどのように異なるのかを明らかにします。

include_granted_scopes

省略可

アプリケーションが増分認可を使用して、追加リソースへのアクセスをリクエストできるようにするスコープです。このパラメータの値を true に設定し、アクセストークンを取得した場合、その新しいアクセストークンは、ユーザーが以前にアプリケーションへのアクセスを許可した場所。詳しくは、段階的承認のセクションをご覧ください。

enable_granular_consent

省略可

デフォルトは true です。false に設定した場合、その他件 Google アカウントのきめ細かい権限は、2019 年より前に作成された OAuth クライアント ID に対して無効になります。新しいバージョンには効果なし OAuth クライアント ID。よりきめ細かい権限が常に有効になるためです。

Google がアプリケーションに対してきめ細かいアクセス許可を有効にしている場合、このパラメータは効果はなくなります。

login_hint

省略可

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

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

prompt

省略可

ユーザーに表示するプロンプトのリスト。スペースで区切られ、大文字と小文字が区別されます。この操作をこのパラメータを指定すると、プロジェクトが初めて作成されたときにのみアクセスをリクエストします。<ph type="x-smartling-placeholder"></ph>をご覧ください。再同意を求めるで詳細をご確認ください。

指定できる値は次のとおりです。

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

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

以下のサンプル URL は、オフラインアクセスをリクエストします（access_type=offline）を、リソースの取得のためのアクセスを許可するスコープにユーザーの YouTube アナリティクスレポート。段階的承認を使用して新しいアクセストークンで、ユーザーがアクセスできるすべてのスコープが付与されていることがわかります。この 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%2Fyt-analytics.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 クライアントライブラリを使用しない。この 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/yt-analytics.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();
}

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

このステップでは、要求されたアクセス権をアプリケーションに付与するかどうかをユーザーが決定します。このアプリケーションの名前と Google API を示す同意ウィンドウがユーザーの認証情報を使ってアクセス権限をリクエストしている付与するアクセススコープの概要。「ユーザーは、アプリケーションによって要求された 1 つ以上のスコープへのアクセス権の付与に同意できます。拒否されます。

この段階でアプリケーションは、アクセス権が付与されたかどうかを示す Google の OAuth 2.0 サーバー。レスポンスの説明については、行います。

エラー

Google の OAuth 2.0 認可エンドポイントへのリクエストで、ユーザー向けのエラーメッセージが表示されることがある認証と認可のフローの代わりに使用されます。一般的なエラーコードと推奨以下を参照してください。

`admin_policy_enforced`

次のポリシーにより、Google アカウントはリクエストされた 1 つ以上のスコープを承認できません Google Workspace 管理者が手動で行う必要はありませんGoogle Workspace 管理者用ヘルプ記事をご覧ください <ph type="x-smartling-placeholder"></ph> どの第三者と内部アプリが Google Workspace データにアクセスする管理者がすべてのスコープまたは機密 / 機密情報へのアクセスを制限する方法について詳しくは、 OAuth クライアント ID にアクセスが明示的に付与されるまで、制限付きのスコープを設定できます。

`disallowed_useragent`

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

Android

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

このエラーは、Android アプリがユーザーが Google の OAuth 2.0 認可エンドポイントに移動すると、できます。デベロッパーは、一般的なリンクをオペレーティングシステムには、 Android アプリリンクデフォルトのブラウザアプリを使用できます。「 Android カスタムタブライブラリもサポートされています。

iOS

iOS および macOS のデベロッパーにおいて、承認リクエストを Google 管理コンソールで開くと、このエラーが発生する場合があります WKWebView。代わりに、次のような iOS ライブラリを使用する必要があります。 iOS 向け Google ログインまたは OpenID Foundation iOS 用の AppAuth。

このエラーは、iOS アプリまたは macOS アプリで一般的なウェブリンクがユーザーが埋め込みユーザーエージェントを作成し、ユーザーが Google の OAuth 2.0 認可エンドポイントにできます。デベロッパーは、一般的なリンクをオペレーティングシステムには、ユニバーサルリンクデフォルトのブラウザアプリを使用できます。「 SFSafariViewController ライブラリもサポートされています。

`org_internal`

リクエストの OAuth クライアント ID は、プロジェクト内の Google アカウントへのアクセスを制限する <ph type="x-smartling-placeholder"></ph> Google Cloud 組織。この設定オプションの詳細については、ユーザーの種類（OAuth 同意画面の設定に関するヘルプ記事）をご覧ください。

`invalid_client`

リクエストの送信元がこのクライアントで承認されていません。詳しくは、 origin_mismatch。

`invalid_grant`

段階的な承認を使用している場合は、トークンの有効期限が切れている可能性があります。無効になっている可能性がありますユーザーを再度認証し、新しいトークンを取得するためのユーザーの同意を求めます。続行する場合このエラーを表示するには、アプリケーションが正しく構成されていて、正しいトークンとパラメータを使用して検証する必要があります。それ以外の場合、ユーザーアカウントに削除されたか無効になっています

`origin_mismatch`

認可リクエストを発生させた JavaScript のスキーム、ドメイン、ポートは、 OAuth クライアント ID に登録されている承認済みの JavaScript 生成元 URI と一致するかどうか。レビューが承認されました Google API Consoleの JavaScript 生成元 Credentials page。

`redirect_uri_mismatch`

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

認可リクエストを発生させた JavaScript のスキーム、ドメイン、ポートは、 OAuth クライアント ID に登録されている承認済みの JavaScript 生成元 URI と一致するかどうか。確認 JavaScript オリジンの承認済み JavaScript 生成元 Google API Console Credentials page。

redirect_uri パラメータは、以下を含む OAuth 帯域外（OOB）フローを指すことがあります。非推奨となり、サポートされなくなりました。詳しくは、移行ガイドを参照し、統合されています

`invalid_request`

リクエストになんらかの問題がありました。これには、いくつかの理由が考えられます。

リクエストの形式が正しくありません
リクエストに必須パラメータが含まれていませんでした
リクエストで、Google でサポートされていない認証方法が使用されています。OAuth を確認する推奨される統合方法が使用されています

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

OAuth 2.0 エンドポイント

重要: OAuth 2.0 レスポンスを処理する前に、 state Google から受け取ったメールの内容が、state 認可リクエストだけです。この検証により、ユーザーが悪意のあるものではなく、リクエストを実行して、インフラストラクチャが CSRF 攻撃。

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%2F%2Fwww.googleapis.com%2Fauth%2Fyt-analytics.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 エラー（ただし、ローカルマシンが次の場所でファイルを提供する場合を除く）表示されます。次のステップでは、Terraform で返された情報について、ユーザーがアプリケーションにリダイレクトされた場合の URI。

Google API の呼び出し

OAuth 2.0 エンドポイント

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

YouTube Analytics API では、このサービスアカウントはサポートされていません。できます。YouTube Reporting API は、複数の YouTube チャンネルを所有、管理している YouTube コンテンツ所有者レコード会社や映画会社です

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

HTTP GET の例

呼び出しは、 <ph type="x-smartling-placeholder"></ph> reports.query エンドポイント（YouTube Analytics API）に Authorization: Bearer HTTP を使用次のようになります。独自のアクセストークンを指定する必要があります。

GET /youtube/analytics/v1/reports?ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer access_token

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

GET https://www.googleapis.com/youtube/analytics/v1/reports?access_token=access_token&ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views

`curl` の例

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

curl -H "Authorization: Bearer access_token" https://www.googleapis.com/youtube/analytics/v1/reports?ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views

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

curl https://www.googleapis.com/youtube/analytics/v1/reports?access_token=access_token&ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views

JavaScript サンプルコード

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

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

var xhr = new XMLHttpRequest();
xhr.open('GET',
    'https://www.googleapis.com/youtube/analytics/v1/reports?ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views&' +
    '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 フローの場合、このページは次の手順を行います。

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

この API リクエストは、YouTube Analytics API の reports.query を呼び出します。メソッドを使用して、承認されたユーザーの YouTube チャンネルの視聴回数を取得します。
リクエストが正常に実行されると、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/youtube/analytics/v1/reports?ids=channel%3D%3DMINE&start-date=2016-05-01&end-date=2016-06-30&metrics=views&' +
          '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/yt-analytics.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>

JavaScript 生成元の検証ルール

Google は、JavaScript のオリジンに次の検証ルールを適用してセキュリティを確保できます。JavaScript 生成元は、これらのルールに準拠している必要があります。詳しくは、RFC 3986 セクション 3 下記のドメイン、ホスト、スキームの定義を参照してください。

検証規則
スキーム	JavaScript 生成元では、単純な HTTP ではなく HTTPS スキームを使用する必要があります。ローカルホストの URI （localhost IP アドレス URI を含む）は、このルールから除外されます。
ホスト	ホストを未加工の IP アドレスにすることはできません。ローカルホストの IP アドレスはこのルールから除外されます。
ドメイン	ホスト TLD （トップレベルドメイン） public サフィックスリストに属している必要があります。ホストドメインを `“googleusercontent.com”` にすることはできません。 JavaScript のオリジンに短縮 URL のドメイン（`goo.gl` など）を含めることはできませんアプリがドメインを所有している場合を除きます。
ユーザー情報	JavaScript のオリジンに userinfo サブコンポーネントを含めることはできません。
[Path]	JavaScript 生成元にパスコンポーネントを含めることはできません。
クエリ	JavaScript 生成元にクエリコンポーネントを含めることはできません。
Fragment	JavaScript オリジンにフラグメントコンポーネントを含めることはできません。
文字数	JavaScript 生成元に次のような特定の文字を含めることはできません。 <ph type="x-smartling-placeholder"> </ph> ワイルドカード文字（`'*'`）印刷できない ASCII 文字無効なパーセントエンコード（URL エンコードに従っていないパーセントエンコード）パーセント記号の後に 2 桁の 16 進数） null 文字（エンコードされた NULL 文字（例:`%00`, `%C0%80`)

段階的な認可

OAuth 2.0 プロトコルでは、アプリからリソースへのアクセス承認がリクエストされます。スコープによって識別されます。承認のリクエストは、ユーザーエクスペリエンスの観点からベストプラクティスと考えられています。リソースにアクセスできます。そのために Google の認可サーバーは段階的承認をサポートしていますこの機能を使用すると、必要に応じてスコープをリクエストできます。ユーザーが新しいスコープの権限を付与した場合、認可コードが返されます。これは、ユーザーがプロジェクトに付与したすべてのスコープを含むトークンと交換されます。

たとえば、アプリが YouTube アナリティクスのレポートを取得するとします。これは財務レポートであり必要があります。この場合、ログイン時に、アプリはアクセス権をリクエスト https://www.googleapis.com/auth/yt-analytics.readonly スコープ。ただし、ユーザーが売上レポートを取得しようとすると、アプリはアクセス権をリクエスト https://www.googleapis.com/auth/yt-analytics-monetary.readonly あります。

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

このトークンを使用して、サービスアカウントにロールされているスコープに対応するリソースにアクセスできます。組み合わせて使用します。
複合認証の更新トークンを使用してアクセストークンを取得すると、アクセストークンは、結合された承認を表し、任意のトークンにレスポンスには scope 値が含まれています。
統合された承認には、ユーザーが API プロジェクトに付与したすべてのスコープが含まれます。異なるクライアントからリクエストされた場合。たとえば、ユーザーがサービスアカウントにアプリケーションのデスクトップクライアントを使用して別のスコープを付与し、認証には両方のスコープが含まれることになります。
結合された認可を表すトークンを取り消すと、そのトークンのすべてにアクセスできるようになります。関連するユーザーの代理承認のスコープが同時に取り消されます。

で確認できます。

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

OAuth 2.0 エンドポイント

この例では、呼び出し元のアプリケーションがそのユーザーの YouTube アナリティクスのデータに加えて、そのユーザーが付与されていることがわかります。

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

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

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

var SCOPE = 'https://www.googleapis.com/auth/yt-analytics.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.
}

トークンの取り消し

アプリケーションに付与したアクセス権の取り消しをユーザーが希望する場合があります。ユーザーはアクセス権を取り消すことができます <ph type="x-smartling-placeholder"></ph>にアクセスアカウント設定。詳しくは、削除第三者のサイトやアプリの [サイトまたはアプリのアクセス] セクションでアカウントにアクセスできるアプリサポートドキュメントをご覧ください。

また、アプリケーションに付与されているアクセス権をプログラムで取り消すこともできます。プログラムによる取り消しは、ユーザーが登録解除を行ったり、 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 クライアントライブラリ。取り消しを行う 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();
}

クロスアカウント保護機能の実装

ユーザーのプライバシー保護のためにクロスアカウントの実装が Google のクロスアカウント保護サービスを利用して保護します。このサービスを使用すると、セキュリティ・イベント通知をサブスクライブして、ユーザーアカウントに大幅な変更が加えられる可能性があります。その後、状況に応じて、この情報を使用して決める方法を決めることです。

Google のクロスアカウント保護サービスからアプリに送信されるイベントタイプの例を以下に示します。

https://schemas.openid.net/secevent/risc/event-type/sessions-revoked
https://schemas.openid.net/secevent/oauth/event-type/token-revoked
https://schemas.openid.net/secevent/risc/event-type/account-disabled

詳しくは、 <ph type="x-smartling-placeholder"></ph> クロスアカウント保護ページでユーザーアカウントを保護するをご覧ください。

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

Google API クライアント ライブラリと Google Identity Services

前提条件

プロジェクトで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

invalid_request

ステップ 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 Services

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

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

`admin_policy_enforced`

`disallowed_useragent`

`org_internal`

`invalid_client`

`invalid_grant`

`origin_mismatch`

`redirect_uri_mismatch`

`invalid_request`

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

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

`curl` の例