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

トークンモデルの使用

google.accounts.oauth2 JavaScript ライブラリは、ユーザー入力プロンプトの作成に役立つユーザーデータを操作するためのアクセストークンを取得する必要があります。これは、 OAuth 2.0 の暗黙的な付与フローでは、OAuth 2.0 から Google API を呼び出すか、 REST と CORS を直接使用するか、Google の Google API クライアントライブラリを JavaScript（gapi.client とも呼ばれる）を使用して、Google Cloud の API を使用します。

保護されたユーザーデータにブラウザからアクセスする前に、サイトにアクセスしたユーザーは Google のウェブベースの Account Chooser、ログイン、同意プロセス、 Google の OAuth サーバーが発行し、ウェブアプリにアクセストークンを返します。

トークンベースの認可モデルでは、ユーザーごとのトークンをバックエンドサーバーに格納されます。

推奨される方法ではなく、ここで説明する方法クライアントサイドウェブアプリケーション用の OAuth 2.0 で規定されていた手法ご覧ください

セットアップ

クライアント ID を確認または作成するには、 Google API クライアント ID ガイドをご覧ください。次に、ページにクライアントライブラリを追加します。 Google API を呼び出すサイトのすべてのバックエンドが確立されます最後に、トークンを初期化します。できます。これは通常、クライアントライブラリの onload ハンドラ内で行います。

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

initTokenClient() を呼び出して、ウェブアプリのトークンで新しいトークンクライアントを初期化します。クライアント ID です。必要に応じて、ユーザーが使用する 1 つ以上のスコープのリストを指定できます。以下にアクセスする必要があります。

const client = google.accounts.oauth2.initTokenClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  callback: (response) => {
    ...
  },
});

OAuth 2.0 トークンフローをトリガーする

requestAccessToken() メソッドを使用してトークン UX フローをトリガーし、できます。Google はユーザーに次の手順を求めます。

アカウントを選択します。
Google アカウントにログインしていない場合はログインします。
リクエストされた各スコープにウェブアプリがアクセスすることに同意します。

ユーザー操作により、トークンフロー <button onclick="client.requestAccessToken();">Authorize me</button> がトリガーされます。

Google は、アクセストークンとトークンのリストを含む TokenResponse を返します。ユーザーがアクセスを許可したスコープ、またはコールバックハンドラにエラーが発生しているスコープです。

ユーザーが Account Chooser やログインウィンドウを閉じることがあります。その場合、コールバック関数は呼び出されません。

同意の処理方法

アプリのデザインとユーザーエクスペリエンスは、 Google の OAuth 2.0 ポリシーを徹底的に確認する。これらのポリシーが適用されるのは複数のスコープの使用、ユーザーの同意をいつどのように処理するかなどについて学びます。

段階的な承認とは、ポリシーおよびアプリの設計手法です。事前にではなく、必要な場合にのみスコープを使用してリソースへのアクセスをリクエストできます。ユーザーは個々のリソースの共有を承認または拒否できるこれは、きめ細かい権限と呼ばれます。

このプロセスで Google がユーザーの同意を求め、各プロンプトを個々にリストアップするユーザーは、アプリと共有するリソースを選択します。最後に、Google がコールバック関数を呼び出してアクセストークンとユーザーをあります。その後、アプリはさまざまな結果を安全に処理しますきめ細かく権限を設定できます。

段階的な認可

ウェブアプリの場合、次の 2 つの大まかなシナリオで次を使用した認証:

単一ページの Ajax アプリ。多くの場合、XMLHttpRequest を使用して動的にアクセスします。説明します。
複数のウェブページがある場合、リソースはページごとに分離され、管理されます。

これら 2 つのシナリオは、設計上の考慮事項と包括的な推奨事項を提供するものではありません。同意をアプリに組み込みます実際のアプリでは、バリエーションまたは組み合わせることもできます

Ajax

複数回の呼び出しによる段階的な承認のサポートをアプリに追加する requestAccessToken() に追加し、OverridableTokenClientConfig オブジェクトの scope パラメータを使用して、必要に応じて個々のスコープをリクエストします。できます。この例では、リソースがリクエストされて表示され、折りたたまれたコンテンツセクションが展開されたときのみ可能です。

Ajax アプリ
ページ読み込み時にトークンクライアントを初期化します。 const client = google.accounts.oauth2.initTokenClient({ client_id: 'YOUR_GOOGLE_CLIENT_ID', callback: "onTokenResponse", }); ユーザージェスチャーによる同意のリクエストとアクセストークンの取得 [+] をクリックして開きます。読むドキュメント最近のドキュメントを表示 client.requestAccessToken( overrideConfig = ({ scope = 'https://www.googleapis.com/auth/documents.readonly' }) ); 近日中のイベントカレンダー情報を表示 client.requestAccessToken( overrideConfig = ({ scope = 'https://www.googleapis.com/auth/calendar.readonly' }) ); 写真カルーセル写真を表示する client.requestAccessToken( overrideConfig = ({ scope = 'https://www.googleapis.com/auth/photoslibrary.readonly' }) );

Ajax アプリ

ページ読み込み時にトークンクライアントを初期化します。

        const client = google.accounts.oauth2.initTokenClient({
          client_id: 'YOUR_GOOGLE_CLIENT_ID',
          callback: "onTokenResponse",
        });

ユーザージェスチャーによる同意のリクエストとアクセストークンの取得 [+] をクリックして開きます。

読むドキュメント

最近のドキュメントを表示

          client.requestAccessToken(
            overrideConfig = ({
               scope = 'https://www.googleapis.com/auth/documents.readonly'
             })
           );

近日中のイベント

カレンダー情報を表示

          client.requestAccessToken(
            overrideConfig = ({
               scope = 'https://www.googleapis.com/auth/calendar.readonly'
             })
           );

写真カルーセル

写真を表示する

          client.requestAccessToken(
            overrideConfig = ({
               scope = 'https://www.googleapis.com/auth/photoslibrary.readonly'
             })
           );

requestAccessToken が呼び出されるたびに、ユーザーの同意を求めるメッセージが表示されます。アプリはユーザーが選択したセクションで必要なリソースにのみユーザー選択によるリソース共有が制限されます。

複数のウェブページ

段階的な承認のための設計では、複数のページを使用してリクエストを行うページの読み込みに必要なスコープのみに絞り込めるため、複雑さが軽減され、ユーザーの同意を取得してアクセストークンを取得するために、複数の呼び出しを行います。

マルチページアプリ

ウェブページ

コード

P.1.読むドキュメント

  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/documents.readonly',
  });
  client.requestAccessToken();

P.2.今後のイベント

  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/calendar.readonly',
  });
  client.requestAccessToken();

P.3.写真カルーセル

  const client = google.accounts.oauth2.initTokenClient({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: "onTokenResponse",
    scope: 'https://www.googleapis.com/auth/photoslibrary.readonly',
  });
  client.requestAccessToken();

各ページは必要なスコープをリクエストし、次を呼び出してアクセストークンを取得します。読み込み時の initTokenClient() と requestAccessToken()。このシナリオでは個々のウェブページを使用して、ユーザーの機能とリソースを定義できます。実際には個々のページから複数の関連スコープを指定できます。

きめ細かい権限

きめ細かな権限は、すべてのシナリオで同じように処理されます。以降 requestAccessToken() がコールバック関数とアクセストークンを呼び出すリクエストされたスコープをユーザーが承認したことを確認します。 hasGrantedAllScopes() または hasGrantedAnyScope()。例:

const client = google.accounts.oauth2.initTokenClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly \
          https://www.googleapis.com/auth/documents.readonly \
          https://www.googleapis.com/auth/photoslibrary.readonly',
  callback: (tokenResponse) => {
    if (tokenResponse && tokenResponse.access_token) {
      if (google.accounts.oauth2.hasGrantedAnyScope(tokenResponse,
          'https://www.googleapis.com/auth/photoslibrary.readonly')) {
        // Look at pictures
        ...
      }
      if (google.accounts.oauth2.hasGrantedAllScopes(tokenResponse,
          'https://www.googleapis.com/auth/calendar.readonly',
          'https://www.googleapis.com/auth/documents.readonly')) {
        // Meeting planning and review documents
        ...
      }
    }
  },
});

以前のセッションまたはリクエストで以前に承認された権限付与もすべて含まれるようになります。ユーザーの同意の記録がユーザーごとに維持され、 Client-ID。initTokenClient() または requestAccessToken()。デフォルトでは、ユーザーの同意が必要になるのはユーザーがウェブサイトを訪問して新しいスコープをリクエストした日 Token Client 構成オブジェクトの prompt=consent を使用して、ページが読み込まれるたびに行われます。

トークンの操作

トークンモデルでは、アクセストークンは OS やブラウザではなく、新しいトークンは、最初にページの読み込み時に取得されるか、ボタンを押すなどのユーザー操作で requestAccessToken() を呼び出します。

Google API での REST と CORS の使用

アクセストークンを使用すると、Google API に対して認証済みのリクエストを送信できます。 REST と CORS です。これにより、ユーザーはログインして同意し、Google が新しいトークンを発行してアクセストークンとサイトがユーザーのデータを操作できるようにします。

この例では、ログインユーザーのカレンダーの予定を、 tokenRequest() から返されるアクセストークン:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.googleapis.com/calendar/v3/calendars/primary/events');
xhr.setRequestHeader('Authorization', 'Bearer ' + tokenResponse.access_token);
xhr.send();

詳細については、CORS を使用して Google API にアクセスする方法をご覧ください。

次のセクションでは、より複雑な API と簡単に統合する方法について説明します。

Google API JavaScript ライブラリの操作

トークンクライアントは、JavaScript 用 Google API クライアントライブラリと連携します。以下のコードスニペットをご覧ください。

const client = google.accounts.oauth2.initTokenClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  callback: (tokenResponse) => {
    if (tokenResponse && tokenResponse.access_token) {
      gapi.client.setApiKey('YOUR_API_KEY');
      gapi.client.load('calendar', 'v3', listUpcomingEvents);
    }
  },
});

function listUpcomingEvents() {
  gapi.client.calendar.events.list(...);
}

トークンの有効期限

設計上、アクセストークンの有効期間は短くなります。アクセストークンの有効期限が切れた場合ユーザーのセッションが終了する前に、ボタンの押下などのユーザー主導イベントからの requestAccessToken()。

アクセストークンを使用した同意の取り消し

google.accounts.oauth2.revoke メソッドを呼び出して、ユーザーの同意ステータスを削除するアプリに付与されているすべてのスコープのリソースに対するアクセス権を付与します。有効なアクセス権この権限を取り消すには、次のトークンが必要です。

google.accounts.oauth2.revoke('414a76cb127a7ece7ee4bf287602ca2b56f8fcbf7fcecc2cd4e0509268120bd7', done => {
    console.log(done);
    console.log(done.successful);
    console.log(done.error);
    console.log(done.error_description);
  });