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

コードモデルの使用

Google Identity Services ライブラリを使用すると、ユーザーは Google Cloud のブラウザベースのポップアップまたはリダイレクトの UX フローを使用して Google からコードを作成できます。この安全な OAuth 2.0 フローが開始され、呼び出しに使用されるアクセストークンが生成されます。ユーザーの代わりに Google API を使用します。

OAuth 2.0 認可コードフローの概要:

ブラウザで、ボタンのクリックなどの操作を使用して、所有者が Google に認証コードをリクエストした場合。
Google が応答し、一意の認証コードをユーザーのブラウザで実行されている JavaScript ウェブアプリから送信するか、認証コードエンドポイントに送信します。
バックエンドプラットフォームは認証コードエンドポイントをホストし、できます。検証後、このコードがユーザーごとのアクセス権と交換され、 Google のトークンエンドポイントへのリクエストを使用してトークンを更新することもできます。
Google が認証コードを検証し、リクエストが発信されたことを確認するアクセストークンと更新トークンを発行し、プラットフォームでホストされているログインエンドポイントを呼び出して、トークンとトークンを収集します。
ログインエンドポイントがアクセストークンと更新トークンを受け取り、更新トークンを後で使用するために使用できます。

で確認できます。

コードクライアントを初期化する

google.accounts.oauth2.initCodeClient() メソッドはコードクライアントを初期化します。

ポップアップモードまたはリダイレクトモード

認証コードを共有するには、Redirect または ポップアップ モードのユーザーフローリダイレクトモードでは、ユーザーに代わって OAuth2 認証がエンドポイント上のすべてのエンドポイントが使用され、Google が user-agent をこのエンドポイントにリダイレクトします。認証コードを URL パラメータとして共有することもできます。ポップアップモードでは、JavaScript を定義するサーバーに認証コードを送信するコールバックハンドラ。ポップアップモードサイト訪問者が何もしなくても、シームレスなユーザーエクスペリエンスを提供できます。ユーザーが離脱するのを防ぎます

クライアントを初期化するには:

UX フローをリダイレクトし、ux_mode を redirect に設定し、 redirect_uri をプラットフォームの認可コードエンドポイントに追加します。この値 OAuth 2.0 の承認済みリダイレクト URI のいずれかと完全に一致する必要があります。クライアントライブラリを使用できます。また、Google のリダイレクト URI の検証ルール。
ポップアップ UX フローで、ux_mode を popup に、callback の値を認証コードを認証コードに送信するために使用する関数の名前説明します。

で確認できます。

CSRF 攻撃の防止

クロスサイトリクエストフォージェリ（CSRF）攻撃を防ぐために、リダイレクトモードとポップアップモードの UX フローで採用されている手法です。リダイレクト用 OAuth 2.0 の state パラメータが使用されます。RFC6749 セクション 10.12 を参照クロスサイトリクエストフォージェリ state パラメータの生成と検証に関する詳細をご覧ください。ポップアップモードではリクエストにカスタム HTTP ヘッダーを追加してから、サーバー上で期待値とオリジンに一致する。

UX モードを選択すると、認証コードと CSRF 処理を示すコードスニペットが表示されます。

リダイレクトモード

Google がユーザーのブラウザを URL パラメータとして認証コードを共有します。

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'redirect',
  redirect_uri: "https://your.domain/code_callback_endpoint",
  state: "YOUR_BINDING_VALUE"
});

ユーザーのブラウザが認証コードを受け取るクライアントを初期化するサーバーに送信されます。

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'popup',
  callback: (response) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', code_receiver_uri, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // Set custom header for CRSF
    xhr.setRequestHeader('X-Requested-With', 'XmlHttpRequest');
    xhr.onload = function() {
      console.log('Auth code response: ' + xhr.responseText);
    };
    xhr.send('code=' + response.code);
  },
});

OAuth 2.0 コードフローをトリガーする

コードクライアントの requestCode() メソッドを呼び出して、ユーザーフローをトリガーします。

<button onclick="client.requestCode();">Authorize with Google</button>

ユーザーが Google アカウントにログインし、データを共有することに同意する必要があります認証コードを認証コードに返す前に、コールバックハンドラを指定できます。

認証コードの処理

Google がユーザーごとに一意の認証コードを生成します。このコードは、Google が受け取る確認します。

ポップアップモードの場合、callback で指定されたハンドラは、ユーザーのプラットフォームがホストするエンドポイントに認証コードをリレーします。

リダイレクトモードでは、GET リクエストは redirect_url。URL code パラメータで認証コードを共有します。宛先認証コードを受け取ります。

既存の認証エンドポイントがない場合は、新しい認可エンドポイントを作成します実装
既存のエンドポイントを更新して、GET リクエストと URL を受け入れるあります。以前は、認証コードの値を含む PUT リクエストは、ペイロードが使用されました。

承認エンドポイント

認証コードエンドポイントは、これらの URL クエリを使用して GET リクエストを処理する必要があります。文字列パラメータ:

名前	値
authuser	ユーザーのログイン認証のリクエスト
コード	Google が生成した OAuth2 認証コード
HD	ユーザーアカウントのホストドメイン
prompt	ユーザーの同意ダイアログ
スコープ	承認する 1 つ以上の OAuth2 スコープをスペースで区切ったリスト
state	CRSF 状態変数

URL パラメータを使用した GET リクエストの例: auth-code という名前のエンドポイントと example.com でホストされている:

Request URL: https://www.example.com/auth-code?state=42a7bd822fe32cc56&code=4/0AX4XfWiAvnXLqxlckFUVao8j0zvZUJ06AMgr-n0vSPotHWcn9p-zHCjqwr47KHS_vDvu8w&scope=email%20profile%20https://www.googleapis.com/auth/calendar.readonly%20https://www.googleapis.com/auth/photoslibrary.readonly%20https://www.googleapis.com/auth/contacts.readonly%20openid%20https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile&authuser=0&hd=example.com&prompt=consent

認可コードフローが以前の JavaScript ライブラリによって開始される場合、または Google OAuth 2.0 エンドポイントの直接呼び出しでは、POST リクエストが使用されます。

ペイロードとして認証コードを含む POST リクエストの例 HTTP リクエスト本文:

Request URL: https://www.example.com/auth-code
Request Payload: 4/0AX4XfWhll-BMV82wi4YwbrSaTPaRpUGpKqJ4zBxQldU\_70cnIdh-GJOBZlyHU3MNcz4qaw

リクエストを検証します

CSRF 攻撃を回避するために、サーバーで次のことを行います。

リダイレクトモードの state パラメータの値を確認します。

X-Requested-With: XmlHttpRequest ヘッダーがポップアップモードに設定されていることを確認します。

その後、Google から更新トークンとアクセストークンを取得してください。認証コードリクエストの確認に成功した場合のみ可能です。

アクセストークンと更新トークンを取得する

バックエンドプラットフォームが Google から認証コードを受け取り、リクエストを検証し、認証コードを使用して、API アクセストークンと更新トークンを API 呼び出しを行います。

手順 5: ステップ 5: 認証コードを交換します更新トークンとアクセストークンについて詳しくは、ウェブサーバー向け OAuth 2.0 の使用に関する記事 アプリケーション ガイドをご覧ください。

トークンの管理

プラットフォームが更新トークンを安全に保存している。次の場合に、保存された更新トークンを削除するユーザーアカウントが削除されたり、ユーザーの同意が google.accounts.oauth2.revoke、または直接 https://myaccount.google.com/permissions.

必要に応じて、RISC を使用して、クロスアカウントでユーザーアカウントを保護することを検討できます。保護。

通常、バックエンドプラットフォームはアクセストークンを使用して Google API を呼び出します。条件ウェブアプリもユーザーのブラウザから Google API を直接呼び出します。アクセストークンをウェブアプリケーションと共有する方法を実装する必要があります。本ガイドでは扱いませんこの方法に従い、 JavaScript の Google API クライアントライブラリ gapi.client.SetToken() を使用してブラウザにアクセストークンを一時的に保存するライブラリが Google API を呼び出せるようにします。

コードモデルの使用

コード クライアントを初期化する

ポップアップ モードまたはリダイレクト モード