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 を有効にするには:

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

承認認証情報を作成する

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

  1. Go to the Credentials page.
  2. [認証情報を作成] > [OAuth クライアント ID] をクリックします。
  3. アプリケーションの種類として [ウェブ アプリケーション] を選択します。
  4. フォームに入力します。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 type="x-smartling-placeholder">
include_granted_scopes 省略可

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

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_uriresponse_typeclient_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 サーバーは、環境変数で指定された 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 フローの場合、このページは次の手順を行います。

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

    この API リクエストは、YouTube Analytics API の reports.query を呼び出します。 メソッドを使用して、承認されたユーザーの YouTube チャンネルの視聴回数を取得します。

  4. リクエストが正常に実行されると、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> クロスアカウント保護ページでユーザー アカウントを保護する をご覧ください。