トークンモデルの使用

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

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