メインコンテンツまでスキップ

Google を使用してソーシャルログインを設定する

Google OAuth 2.0 認証 (Authentication) システムを統合し、「Google でサインイン」、アカウント連携、Google API への安全なアクセスを実現します。

ヒント:

このガイドは、Logto コネクターについての基本的な理解があることを前提としています。未経験の方は、コネクター ガイドを参照して始めてください。

はじめに​

Google コネクターを利用すると、OAuth 2.0 統合によりアプリケーションで次のことが可能になります：

  • 「Google でサインイン」認証 (Authentication) の追加
  • ユーザーアカウントを Google アイデンティティに連携
  • Google からユーザープロフィール情報を同期
  • Logto Secret Vault に安全にトークンを保存し、Google API へのアクセスや自動化タスク（例：Google ドキュメントの編集、アプリ内でのカレンダーイベント管理）を実現

これらの認証 (Authentication) 機能を設定するには、まず Logto で Google コネクターを作成してください：

  1. Logto コンソール > コネクター > ソーシャルコネクター

     にアクセスします。
  2. ソーシャルコネクターを追加 をクリックし、Google を選択、次へ をクリックし、チュートリアルに従って統合を完了します。

ステップ 1: Google Auth Platform でプロジェクトを作成する​

Google を認証 (Authentication) プロバイダーとして利用する前に、Google Cloud Console でプロジェクトを作成し、OAuth 2.0 認証情報を取得する必要があります。すでにプロジェクトがある場合は、このステップをスキップできます。

  1. Google Cloud Console にアクセスし、Google アカウントでサインインします。
  2. 上部メニューバーの プロジェクトを選択 ボタンをクリックし、新しいプロジェクト ボタンをクリックしてプロジェクトを作成します。
  3. 作成したプロジェクトで、API とサービス > OAuth 同意画面 に移動し、アプリを設定します：
    • アプリ情報：同意画面に表示される アプリケーション名 と サポートメール を入力します
    • オーディエンス (Audience)：希望するオーディエンスタイプを選択します：
      • 内部 - 組織内の Google Workspace ユーザーのみ
      • 外部 - すべての Google ユーザー向け（本番利用には検証が必要）
    • 連絡先情報：Google からプロジェクトの変更通知を受け取るためのメールアドレスを入力します
    • Google のポリシーに同意します にチェックを入れて基本設定を完了します
  4. 必要に応じて ブランディング セクションで製品情報を編集し、アプリロゴ をアップロードできます。OAuth 同意画面に表示され、ユーザーがアプリを認識しやすくなります。
ヒント:

外部 オーディエンスタイプを選択した場合、開発中はテストユーザーを追加し、本番利用時にはアプリを公開する必要があります。

ステップ 2: OAuth 2.0 認証情報を作成する​

Google Cloud Console の 認証情報 ページに移動し、アプリケーション用の OAuth 認証情報を作成します。

  1. 認証情報を作成 > OAuth クライアント ID をクリックします。
  2. アプリケーションの種類として ウェブアプリケーション を選択します。
  3. OAuth クライアントの 名前 を入力します。これは認証情報の識別用で、エンドユーザーには表示されません。
  4. 許可済み URI を設定します：
    • 許可済み JavaScript オリジン：Logto インスタンスのオリジン（例：https://your-logto-domain.com）を追加します
    • 許可済みリダイレクト URI：Logto の Callback URI を追加します（Logto Google コネクターからコピー）
  5. 作成 をクリックして OAuth クライアントを生成します。

ステップ 3: Logto コネクターに認証情報を設定する​

OAuth クライアント作成後、Google から認証情報が表示されます：

  1. クライアント ID をコピーし、Logto の clientId フィールドに貼り付けます
  2. クライアントシークレット をコピーし、Logto の clientSecret フィールドに貼り付けます
  3. Logto で 保存して完了 をクリックし、アイデンティティシステムと Google を接続します
警告:

クライアントシークレットは安全に保管し、クライアントサイドのコードで絶対に公開しないでください。漏洩した場合は直ちに新しいものを発行してください。

ステップ 4: スコープを設定する​

スコープ (Scope) は、アプリがユーザーから要求する権限を定義し、Google アカウントからどのデータにアクセスできるかを制御します。

Google Cloud Console でスコープを設定する​

  1. API とサービス > OAuth 同意画面 > スコープ に移動します。
  2. スコープを追加または削除 をクリックし、アプリに必要なスコープのみを選択します：
    • 認証 (Authentication)（必須）：
      • https://www.googleapis.com/auth/userinfo.email
      • https://www.googleapis.com/auth/userinfo.profile
      • openid
    • API アクセス（任意）：アプリに必要な追加スコープを追加します（例：Drive、Calendar、YouTube）。利用可能なサービスは Google API ライブラリ で確認できます。基本権限以外の Google API へアクセスする場合は、まず Google API ライブラリで該当 API（例：Google Drive API、Gmail API、Calendar API）を有効化してください。
  3. 更新 をクリックして選択を確定します。
  4. 保存して続行 をクリックして変更を適用します。

Logto でスコープを設定する​

ニーズに応じて、以下のいずれかの方法を選択してください：

オプション 1: 追加の API スコープが不要な場合

  • Logto Google コネクターの Scopes フィールドは空欄のままにします。
  • デフォルトで openid profile email スコープがリクエストされ、Logto が基本的なユーザー情報を正しく取得できます。

オプション 2: サインイン時に追加スコープをリクエストする場合

  • 必要なすべてのスコープを Scopes フィールドにスペース区切りで入力します。
  • ここに記載したスコープがデフォルトを上書きするため、必ず認証 (Authentication) 用スコープ（https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile openid）を含めてください。
  • スコープはフル URL で記載します。例：https://www.googleapis.com/auth/calendar.readonly

オプション 3: 後からインクリメンタルにスコープをリクエストする場合

  • ユーザーがサインインした後、必要に応じてフェデレーテッドソーシャル認可 (Authorization) フローを再実行し、ユーザーのトークンセットを更新することで追加スコープをリクエストできます。
  • これらの追加スコープは Logto Google コネクターの Scopes フィールドに記載する必要はなく、Logto の Social Verification API を通じて実現できます。

これらの手順に従うことで、Logto Google コネクターはアプリに必要な権限だけをリクエストします。

ヒント:

アプリがこれらのスコープをリクエストして Google API へアクセス・操作する場合は、Logto Google コネクターで 永続的な API アクセス用にトークンを保存 を有効にしてください。詳細は次のセクションを参照してください。

ステップ 5: 認証 (Authentication) プロンプトをカスタマイズする​

Logto で Prompts を設定し、ユーザー認証 (Authentication) 体験を制御できます。Prompts は、必要なユーザーインタラクションの種類を指定する文字列配列です：

  • none - 認可 (Authorization) サーバーは認証 (Authentication) や同意画面を表示しません。ユーザーがすでに認証 (Authentication) 済みかつ要求されたスコープに事前同意していない場合はエラーを返します。既存の認証 (Authentication) や同意の有無を確認する用途です。
  • consent - 認可 (Authorization) サーバーはクライアントに情報を返す前にユーザーに同意を求めます。Google API への オフラインアクセス を有効にするには必須です。
  • select_account - 認可 (Authorization) サーバーはユーザーにアカウント選択を促します。複数の Google アカウントを持つユーザーが認証 (Authentication) に使用するアカウントを選択できます。

ステップ 6: 一般設定​

Google への接続自体には影響しませんが、エンドユーザーの認証 (Authentication) 体験に関わる一般的な設定です。

プロフィール情報の同期​

Google コネクターでは、ユーザー名やアバターなどのプロフィール情報の同期ポリシーを設定できます。選択肢は以下の通りです：

  • サインアップ時のみ同期：ユーザーが初回サインインしたときにプロフィール情報を取得します。
  • サインイン時に常に同期：ユーザーがサインインするたびにプロフィール情報を更新します。

Google API へのトークン保存（任意）​

Google API へアクセスし、ユーザーの認可 (Authorization) のもとで操作を行いたい場合（ソーシャルサインインやアカウント連携経由）、Logto は特定の API スコープを取得し、トークンを保存する必要があります。

  1. 必要なスコープを Google Cloud Console の OAuth 同意画面設定と Logto Google コネクターに追加します。
  2. Logto Google コネクターで 永続的な API アクセス用にトークンを保存 を有効にします。Logto は Google のアクセス トークン (Access token) およびリフレッシュ トークン (Refresh token) を Secret Vault に安全に保存します。
  3. リフレッシュ トークン (Refresh token) を確実に取得するため、Logto Google コネクターの設定を以下のようにします：
    • Prompts に consent を含める
    • オフラインアクセス を有効にする
警告:

Logto の Scope フィールドに offline_access を追加する必要はありません。追加するとエラーになる場合があります。Google ではオフラインアクセスが有効な場合、自動的に access_type=offline が使用されます。

ステップ 7: Google One Tap を有効にする（任意）​

Google One Tap は、ユーザーが Google アカウントでポップアップインターフェースを使ってウェブサイトにサインインできる安全かつシームレスな方法です。

Google コネクターのセットアップが完了すると、コネクター詳細ページに Google One Tap 用のカードが表示されます。スイッチを切り替えて Google One Tap を有効にします。

Google One Tap の設定オプション​

  • 条件を満たせば自動で認証情報を選択 - 特定条件 を満たす場合、Google アカウントで自動的にサインインします
  • ユーザーが外側をクリック／タップしたらプロンプトをキャンセル - ユーザーがプロンプト外をクリックまたはタップした場合、Google One Tap プロンプトを閉じます。無効の場合、ユーザーは閉じるボタンをクリックしてプロンプトを閉じる必要があります。
  • ITP ブラウザでアップグレードされた One Tap UX を有効化 - Intelligent Tracking Prevention (ITP) ブラウザでアップグレードされた Google One Tap ユーザー体験を有効にします。詳細は こちらのドキュメント を参照してください。
警告:

OAuth クライアント設定の 許可済み JavaScript オリジン セクションにドメインを追加してください。追加しないと Google One Tap は表示できません。

Google One Tap の重要な制限事項​

永続的な API アクセス用にトークンを保存 と Google One Tap の両方を有効にしても、アクセス トークン (Access token) やリクエストしたスコープは自動的には取得できません。

Google One Tap サインイン（標準の「Google でサインイン」ボタンとは異なり）は、OAuth アクセス トークン (Access token) を発行しません。ID トークン (ID token)（署名付き JWT）だけが返され、ユーザーのアイデンティティは検証できますが、API アクセス権は付与されません。

Google One Tap ユーザーで Google API へアクセスするには、Logto の Social Verification API を使って、ユーザーが Google One Tap でサインインした後にフェデレーテッドソーシャル認可 (Authorization) フローを再実行してください。これにより、必要な追加スコープをリクエストし、ユーザーのトークンセットを更新できます。Logto Google コネクターのスコープ事前設定は不要です。この方法によりインクリメンタル認可 (Authorization) が可能となり、アプリが実際に必要とするタイミングでのみ追加権限の同意をユーザーに求められます。

Google One Tap の制限事項 については公式ドキュメントもご参照ください。

ステップ 8: アプリのテストと公開​

内部アプリの場合​

Google の オーディエンス (Audience) タイプが 内部 の場合、アプリは組織内の Google Workspace ユーザーのみ利用可能です。組織の任意のアカウントでテストできます。

外部アプリの場合​

オーディエンス (Audience) タイプが 外部 の場合：

  1. 開発中：OAuth 同意画面 > テストユーザー に移動し、テストユーザーのメールアドレスを追加します。これらのユーザーのみがアプリでサインインできます。
  2. 本番利用時：OAuth 同意画面セクションで アプリを公開 をクリックし、すべての Google アカウントユーザーが利用できるようにします。
注記:

センシティブまたは制限付きスコープを持つアプリは、公開前に Google の検証が必要な場合があります。このプロセスには数週間かかることがあります。

Google コネクターの活用​

Google コネクターを作成し、Google と接続したら、エンドユーザーフローに組み込むことができます。ニーズに合ったオプションを選択してください：

「Google でサインイン」を有効化​

  1. Logto コンソールで サインイン & アカウント > サインアップとサインイン に移動します。
  2. ソーシャルサインイン セクションで Google コネクターを追加し、ユーザーが Google で認証 (Authentication) できるようにします。
  3. 必要に応じて、サインイン・サインアップページで Google One Tap を有効化し、スムーズな認証 (Authentication) 体験を提供できます。

ソーシャルサインイン体験 について詳しくはこちら。

Account API を利用して、サインイン済みユーザーが Google アカウントを連携・解除できるカスタムアカウントセンターをアプリ内に構築できます。Account API チュートリアル をご参照ください。

ヒント:

Google コネクターは、ソーシャルサインインを有効化せず、アカウント連携や API アクセス専用として有効化することも可能です。

Google API へのアクセスとアクションの実行​

アプリケーションは Secret Vault から保存された Google アクセストークンを取得し、Google API を呼び出してバックエンドタスクを自動化できます（例：Google ドライブファイルの管理、カレンダーイベントの作成、Gmail 経由でのメール送信など）。API アクセス用の保存トークン取得ガイドを参照してください。

ユーザーの Google アイデンティティ管理​

ユーザーが Google アカウントを連携した後、管理者は Logto コンソールでその接続を管理できます：

  1. Logto コンソール > ユーザー管理 に移動し、ユーザープロフィールを開きます。
  2. ソーシャル接続 セクションで Google 項目を見つけ、管理 をクリックします。
  3. このページで管理者は、ユーザーの Google 接続を管理し、Google アカウントから付与・同期されたすべてのプロフィール情報やアクセストークンの状態を確認できます。

参考情報​

Google Identity: OAuth 2.0 のセットアップ

Google Identity Services (One Tap)

 Google Cloud Console