OAuth 2.0 プロトコルを使用してソーシャルログインを設定する
OAuth 2.0 プロトコル用の公式 Logto コネクターです。
このガイドは、Logto コネクターについての基本的な理解があることを前提としています。未経験の方は、コネクター ガイドを参照して始めてください。
はじめに
OAuth コネクターは、OAuth 2.0 プロトコルをサポートする任意のソーシャルアイデンティティプロバイダー (IdP) への Logto の接続を可能にします。OAuth コネクターを利用することで、アプリケーションに以下の機能を追加できます：
- ソーシャルサインインボタンの追加
- ユーザーアカウントとソーシャルアイデンティティの連携
- ソーシャルプロバイダーからユーザープロフィール情報の同期
- Logto シークレットボールトでの安全なトークン保管を通じてサードパーティ API へアクセスし、自動化タスクを実行（例：Google ドキュメントの編集、アプリ内でのカレンダーイベント管理など）
これらの認証 (Authentication) 機能を設定するには、まず Logto で OAuth 2.0 コネクターを作成してください：
-
Logto コンソール > コネクター > ソーシャルコネクター
にアクセスします。 - ソーシャルコネクターを追加 をクリックし、OAuth 2.0 を選択、次へ をクリックし、ステップバイステップのチュートリアルに従って統合を完了してください。
OAuth コネクターは Logto における特別な種類のコネクターであり、OAuth プロトコルベースのコネクターを複数追加できます。
OAuth アプリの作成
このページを開いた時点で、接続したいソーシャルアイデンティティプロバイダーが決まっていると考えています。最初に行うべきことは、そのアイデンティティプロバイダーが OAuth プロトコルをサポートしているかを確認することです。これは有効なコネクターを構成するための前提条件です。その後、アイデンティティプロバイダーの指示に従って、OAuth 認可用の関連アプリを登録・作成してください。
コネクターの構成
セキュリティ上の理由から「認可コード」グラントタイプのみをサポートしており、これは Logto のシナリオに完全に適合します。
clientId と clientSecret は OAuth アプリの詳細ページで確認できます。
clientId：クライアント ID は、認可サーバーへの登録時にクライアントアプリケーションを識別する一意の識別子です。この ID は、認可サーバーがクライアントアプリケーションのアイデンティティを確認し、発行されたアクセス トークンを特定のクライアントアプリケーションに関連付けるために使用されます。
clientSecret：クライアントシークレットは、登録時に認可サーバーからクライアントアプリケーションに発行される機密キーです。クライアントアプリケーションは、このシークレットキーを使用して、アクセス トークンをリクエストする際に認可サーバーに対して自身を認証します。クライアントシークレットは機密情報とみなされ、常に安全に保管する必要があります。
tokenEndpointAuthMethod：トークンエンドポイント認証方式は、クライアントアプリケーションがアクセス トークンをリクエストする際に認可サーバーに対して自身を認証するために使用されます。サポートされている方式を確認するには、OAuth 2.0 サービスプロバイダーの OpenID Connect ディスカバリーエンドポイントで利用可能な token_endpoint_auth_methods_supported フィールドを参照するか、OAuth 2.0 サービスプロバイダーが提供する関連ドキュメントを参照してください。
clientSecretJwtSigningAlgorithm (オプション)：tokenEndpointAuthMethod が client_secret_jwt の場合のみ必要です。クライアントシークレット JWT 署名アルゴリズムは、トークンリクエスト時にクライアントアプリケーションが認可サーバーに送信する JWT に署名するために使用されます。
scope：スコープパラメーターは、クライアントアプリケーションがアクセスを要求するリソースと権限のセットを指定するために使用されます。スコープパラメーターは通常、特定の権限を表す値をスペース区切りで並べたリストとして定義されます。例えば、スコープ値が "read write" の場合、クライアントアプリケーションがユーザーデータの読み取りおよび書き込みアクセスを要求していることを示します。
authorizationEndpoint、tokenEndpoint、userInfoEndpoint は、ソーシャルベンダーのドキュメントで確認できます。
authenticationEndpoint：このエンドポイントは認証 (Authentication) プロセスを開始するために使用されます。認証 (Authentication) プロセスは通常、ユーザーがログインし、クライアントアプリケーションにリソースへのアクセスを許可することを含みます。
tokenEndpoint：このエンドポイントは、クライアントアプリケーションがリクエストされたリソースにアクセスするために使用できるアクセス トークンを取得するために使用されます。クライアントアプリケーションは通常、グラントタイプと認可コードを含むリクエストをトークンエンドポイントに送信し、アクセス トークンを受け取ります。
userInfoEndpoint：このエンドポイントは、クライアントアプリケーションがユーザーのフルネーム、メールアドレス、プロフィール画像などの追加情報を取得するために使用されます。ユーザー情報エンドポイントは、クライアントアプリケーションがトークンエンドポイントからアクセス トークンを取得した後にアクセスされるのが一般的です。
Logto では、profileMap フィールドも提供しており、ソーシャルベンダーのプロフィール情報（通常は標準化されていない）からのマッピングをカスタマイズできます。キーは Logto の標準ユーザープロフィールフィールド名で、対応する値はソーシャルプロフィールのフィールド名です。現時点では、Logto はソーシャルプロフィールから 'id'、'name'、'avatar'、'email'、'phone' のみを対象とし、'id' のみ必須で他はオプションです。
responseType と grantType は認可コードグラントタイプでのみ固定値となるため、オプション扱いとし、デフォルト値が自動的に入力されます。
例えば、Google ユーザープロフィールレスポンス を参照でき、その profileMap は次のようになります：
{
"id": "sub",
"avatar": "picture"
}
カスタマイズパラメーターを格納するためのオプションの customConfig キーを用意しています。
各ソーシャルアイデンティティプロバイダーは、OAuth 標準プロトコルに独自のバリエーションを持つ場合があります。ご利用のソーシャルアイデンティティプロバイダーが OAuth 標準プロトコルに厳密に準拠している場合は、customConfig を気にする必要はありません。
設定タイプ
| Name | Type | Required |
|---|---|---|
| authorizationEndpoint | string | true |
| userInfoEndpoint | string | true |
| clientId | string | true |
| clientSecret | string | true |
| tokenEndpointResponseType | enum | false |
| responseType | string | false |
| grantType | string | false |
| tokenEndpoint | string | false |
| scope | string | false |
| customConfig | Record<string, string> | false |
| profileMap | ProfileMap | false |
| ProfileMap fields | Type | Required | Default value |
|---|---|---|---|
| id | string | false | id |
| name | string | false | name |
| avatar | string | false | avatar |
| string | false | ||
| phone | string | false | phone |
一般設定
ここでは、アイデンティティプロバイダーへの接続を妨げることはありませんが、エンドユーザーの認証 (Authentication) 体験に影響を与える可能性のある一般的な設定を紹介します。
ソーシャルボタン名とロゴ
ログインページにソーシャルボタンを表示したい場合は、ソーシャルアイデンティティプロバイダーの 名前 と ロゴ（ダークモード・ライトモード）を設定できます。これにより、ユーザーがソーシャルログインオプションを認識しやすくなります。
アイデンティティプロバイダー名
各ソーシャルコネクターには、ユーザーアイデンティティを区別するための一意のアイデンティティプロバイダー (IdP) 名があります。一般的なコネクターは固定の IdP 名を使用しますが、カスタムコネクターは一意の値が必要です。詳細は IdP 名について をご覧ください。
プロフィール情報の同期
OAuth コネクターでは、ユーザー名やアバターなどのプロフィール情報の同期ポリシーを設定できます。以下から選択可能です：
- サインアップ時のみ同期：ユーザーが初めてサインインしたときにプロフィール情報を一度だけ取得します。
- サインイン時に常に同期：ユーザーがサインインするたびにプロフィール情報を更新します。
サードパーティ API へのトークン保存（オプション）
アイデンティティプロバイダーの API にアクセスし、ユーザーの認可で操作を行いたい場合（ソーシャルサインインまたはアカウント連携経由）、Logto は特定の API スコープを取得し、トークンを保存する必要があります。
- 上記の手順に従い、scope フィールドに必要なスコープを追加します
- Logto OAuth コネクターで API への永続的なアクセスのためにトークンを保存 を有効にします。Logto はアクセス トークンを Secret Vault に安全に保存します。
- 標準 の OAuth/OIDC アイデンティティプロバイダーの場合、リフレッシュ トークンを取得するには
offline_accessスコープを含める必要があり、これによりユーザーの同意プロンプトの繰り返しを防ぎます。
クライアントシークレットは安全に保管し、クライアントサイドのコードで絶対に公開しないでください。漏洩した場合は、アイデンティティプロバイダーのアプリ設定で直ちに新しいものを発行してください。
OAuth コネクターの活用
OAuth コネクターを作成し、アイデンティティプロバイダーと接続したら、エンドユーザーフローに組み込むことができます。ニーズに合ったオプションを選択してください：
ソーシャルサインインボタンの有効化
- Logto コンソールで サインイン体験 > サインアップとサインイン に移動します。
- ソーシャルサインイン セクションで OAuth コネクターを追加し、ユーザーがアイデンティティプロバイダーで認証 (Authentication) できるようにします。
ソーシャルサインイン体験 について詳しく学ぶ。
ソーシャルアカウントの連携・解除
Account API を利用して、アプリ内でサインイン済みユーザーがソーシャルアカウントを連携・解除できるカスタムアカウントセンターを構築できます。Account API チュートリアルを参照
OAuth コネクターは、ソーシャルサインインを有効にせず、アカウント連携や API アクセスのみに利用することも可能です。
アイデンティティプロバイダー API へのアクセスと操作
アプリケーションは Secret Vault から保存されたアクセス トークンを取得し、アイデンティティプロバイダーの API を呼び出してバックエンドタスクを自動化できます。具体的な機能は、アイデンティティプロバイダーとリクエストしたスコープによって異なります。API アクセス用の保存トークン取得ガイドを参照してください。
ユーザーのソーシャルアイデンティティ管理
ユーザーがソーシャルアカウントを連携した後、管理者は Logto コンソールでその接続を管理できます：
- Logto コンソール > ユーザー管理 に移動し、ユーザープロフィールを開きます。
- ソーシャル接続 セクションでアイデンティティプロバイダー項目を見つけ、管理 をクリックします。
- このページで管理者は、ユーザーのソーシャル接続を管理し、ソーシャルアカウントから付与・同期されたすべてのプロフィール情報を確認し、アクセス トークンの状態をチェックできます。
一部のアイデンティティプロバイダーのアクセス トークンレスポンスには、特定のスコープ情報が含まれていない場合があります。そのため、Logto ではユーザーが付与した権限リストを直接表示できません。ただし、ユーザーが認可時にリクエストされたスコープに同意していれば、アプリケーションは OAuth API へアクセスする際に対応する権限を持ちます。
参考資料
OAuth 2.0 認可 (Authorization) フレームワーク