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

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

Google OAuth 2.0 認証システムを統合し、「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: スコープを設定する​

スコープ (Scopes) は、アプリがユーザーから要求する権限を定義し、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