設定

Google Identity Services JavaScript ライブラリ（google.accounts.oauth2）を使用してウェブアプリで Google API へのアクセスを承認するには、まず次のことを行う必要があります。

  1. OAuth 2.0 クライアント ID を取得します。
  2. OAuth 同意画面とスコープを構成します。
  3. クライアント ライブラリを読み込みます。
  4. 必要に応じて、コンテンツ セキュリティ ポリシー（CSP）とクロスオリジン オープナー ポリシー（COOP）を設定します。

Google API クライアント ID を取得する

ウェブサイトで Google アカウント認証を有効にするには、まず Google API クライアント ID を設定する必要があります。次の手順を行います。

  1. Google Cloud コンソールの [クライアント] ページを開きます。
  2. Cloud コンソール プロジェクトを作成または選択します。本番環境アプリケーションを作成する場合は、複数のプロジェクトが必要になることがあります。管理するプロジェクトごとに、このセクションの残りの手順を繰り返します。
  3. [クライアントを作成] をクリックし、[アプリケーションの種類] で [ウェブ アプリケーション] を選択して、新しいクライアント ID を作成します。既存のクライアント ID を使用するには、[ウェブ アプリケーション] タイプのいずれかを選択します。

  4. ウェブサイトの URI を [承認済みの JavaScript 生成元] に追加します。URI には、スキームと完全修飾ホスト名のみが含まれます。例: https://www.example.com

  5. ux_mode: 'redirect' で認証コードモデルを使用する場合（またはバックエンド エンドポイントで認証コードを交換する場合）、リダイレクト URI を [承認済みのリダイレクト URI] に追加します。リダイレクト URI には、スキーム、完全修飾ホスト名、パスが含まれます。また、リダイレクト URI の検証ルールに準拠している必要があります。例: https://www.example.com/oauth2callback。

構成が完了したら、作成されたクライアント ID をメモします。この値は、initCodeClient() または initTokenClient() を初期化するときに client_id プロパティで渡します。（クライアント シークレットも作成されます。これは機密情報として扱い、サーバーサイドのトークン交換オペレーションにのみ使用する必要があります）。

ウェブアプリが OAuth 2.0 スコープを使用してユーザーデータへのアクセスをリクエストすると、Google は同意画面を表示して、アクセスをリクエストしているアプリケーション、リクエストされているデータスコープ、適用される利用規約をユーザーに示します。

  1. Cloud コンソールの Google Auth Platform セクションの [ブランディング ページ] を開きます。
  2. プロンプトが表示されたら、構成したプロジェクトを選択します。
  3. ブランディング フォーム（アプリケーション名、アプリケーション ロゴ、サポートメール、承認済みドメイン、アプリケーション ホームページ リンク、プライバシー ポリシー リンク）に入力し、[保存] をクリックします。
  4. [データアクセス] ページに移動して、アプリケーションに必要な Google API スコープを構成します。ベスト プラクティスは、アクセスが必要になった時点でスコープを段階的にリクエストすることです。
  5. 適格性確認のステータスを確認します。アプリケーションが機密性の高いスコープや制限付きスコープをリクエストする場合は、アプリケーションを提出して検証作業を受ける必要があります。詳細については、OAuth の確認要件をご覧ください。

コンテンツ セキュリティ ポリシーと COOP

ウェブ アプリケーションでコンテンツ セキュリティ ポリシー（CSP）を適用している場合は、次の Google Identity Services のオリジンを許可します。

  • script-src: https://accounts.google.com/gsi/client
  • frame-src: https://accounts.google.com/gsi/
  • connect-src: https://accounts.google.com/gsi/

ポップアップ認証フロー（ux_mode: 'popup' を使用する initTokenClient または initCodeClient）の場合、ダイアログ ウィンドウが認証レスポンスをページに返すことができるように、Cross-Origin-Opener-Policy（COOP）HTTP レスポンス ヘッダーを same-origin-allow-popups に構成します。

次のステップ

次に、ウェブページにクライアント ライブラリを読み込み、認可クライアントの初期化を開始します。