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 は、認可サーバーがクライアントアプリケーションのアイデンティティを確認し、認可されたアクセス トークン (Access token) を特定のクライアントアプリケーションに関連付けるために使用されます。
clientSecret：クライアントシークレットは、登録時に認可サーバーからクライアントアプリケーションに発行される秘密鍵です。クライアントアプリケーションは、この秘密鍵を使用して、アクセス トークン (Access token) を要求する際に認可サーバーに対して自身を認証します。クライアントシークレットは機密情報と見なされ、常に安全に保管する必要があります。
tokenEndpointAuthMethod：トークンエンドポイント認証方式は、クライアントアプリケーションがアクセス トークン (Access token) を要求する際に認可サーバーに対して自身を認証するために使用されます。サポートされている方式を確認するには、OAuth 2.0 サービスプロバイダーの OpenID Connect ディスカバリエンドポイントで利用可能な token_endpoint_auth_methods_supported フィールドを参照するか、OAuth 2.0 サービスプロバイダーが提供する関連ドキュメントを参照してください。
clientSecretJwtSigningAlgorithm (オプション)：tokenEndpointAuthMethod が client_secret_jwt の場合のみ必要です。クライアントシークレット JWT 署名アルゴリズムは、トークンリクエスト時にクライアントアプリケーションが認可サーバーに送信する JWT に署名するために使用されます。
scope：スコープ (Scope) パラメーターは、クライアントアプリケーションがアクセスを要求するリソースや権限 (Permissions) のセットを指定するために使用されます。スコープ (Scope) パラメーターは通常、特定の権限 (Permissions) を表す値をスペース区切りで列挙したリストとして定義されます。たとえば、"read write" というスコープ (Scope) 値は、クライアントアプリケーションがユーザーデータの読み取りおよび書き込みアクセスを要求していることを示します。
authorizationEndpoint、tokenEndpoint、userInfoEndpoint は、ソーシャルベンダーのドキュメントで確認できます。
authenticationEndpoint：このエンドポイントは認証 (Authentication) プロセスを開始するために使用されます。認証 (Authentication) プロセスは通常、ユーザーがログインし、クライアントアプリケーションにリソースへのアクセスを許可することを含みます。
tokenEndpoint：このエンドポイントは、クライアントアプリケーションが要求されたリソースにアクセスするために使用できるアクセス トークン (Access token) を取得するために使用されます。クライアントアプリケーションは通常、グラントタイプと認可コードを含むリクエストをトークンエンドポイントに送信し、アクセス トークン (Access token) を受け取ります。
userInfoEndpoint：このエンドポイントは、クライアントアプリケーションがユーザーのフルネーム、メールアドレス、プロフィール画像などの追加情報を取得するために使用されます。ユーザー情報エンドポイントは、通常、クライアントアプリケーションがトークンエンドポイントからアクセス トークン (Access token) を取得した後にアクセスされます。
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) を取得し、トークンを保存する必要があります。
- 上記の手順に従い、scope フィールドに必要なスコープ (Scope) を追加します
- Logto OAuth コネクターで API への永続的なトークン保存 を有効にします。Logto はアクセス トークン (Access token) を Secret Vault に安全に保存します。
- 標準 の OAuth/OIDC アイデンティティプロバイダーの場合、リフレッシュ トークン (Refresh token) を取得するために
offline_accessスコープ (Scope) を含める必要があります。これにより、ユーザーの同意を繰り返し求めることを防ぎます。
クライアントシークレットは安全に保管し、クライアントサイドのコードで絶対に公開しないでください。漏洩した場合は、アイデンティティプロバイダーのアプリ設定で直ちに新しいものを発行してください。
OAuth コネクターの活用
OAuth コネクターを作成し、アイデンティティプロバイダーと接続したら、エンドユーザーフローに組み込むことができます。ニーズに合ったオプションを選択してください：
ソーシャルサインインボタンの有効化
- Logto コンソールで サインイン & アカウント > サインアップとサインイン に移動します。
- ソーシャルサインイン セクションで OAuth コネクターを追加し、ユーザーがアイデンティティプロバイダーで認証 (Authentication) できるようにします。
ソーシャルサインイン体験 について詳しく学べます。
ソーシャルアカウントの連携・解除
Account API を利用して、サインイン済みユーザーがソーシャルアカウントを連携・解除できるカスタムアカウントセンターをアプリ内に構築できます。Account API チュートリアルを参照
OAuth コネクターは、ソーシャルサインインを有効にせず、アカウント連携や API アクセス専用として有効化することも可能です。
アイデンティティプロバイダー API へのアクセスと操作
アプリケーションは Secret Vault から保存されたアクセス トークン (Access token) を取得し、アイデンティティプロバイダーの API を呼び出してバックエンドタスクを自動化できます。具体的な機能は、アイデンティティプロバイダーと要求したスコープ (Scope) に依存します。API アクセス用の保存トークン取得ガイドを参照してください。
ユーザーのソーシャルアイデンティティ管理
ユーザーがソーシャルアカウントを連携した後、管理者は Logto コンソールでその接続を管理できます：
- Logto コンソール > ユーザー管理 に移動し、ユーザープロフィールを開きます。
- ソーシャル接続 セクションでアイデンティティプロバイダー項目を見つけ、管理 をクリックします。
- このページで、管理者はユーザーのソーシャル接続を管理し、ソーシャルアカウントから付与・同期されたすべてのプロフィール情報や、アクセス トークン (Access token) の状態を確認できます。
一部のアイデンティティプロバイダーのアクセス トークン (Access token) レスポンスには、特定のスコープ (Scope) 情報が含まれていないため、Logto でユーザーが付与した権限 (Permissions) の一覧を直接表示できません。ただし、認可時にユーザーが要求されたスコープ (Scope) に同意していれば、アプリケーションは OAuth API へアクセスする際に対応する権限 (Permissions) を持ちます。
参考資料
OAuth 2.0 認可 (Authorization) フレームワーク