OAuth 2.0 プロトコルを使用してソーシャルログインを設定する
OAuth 2.0 プロトコル用の公式 Logto コネクターです。
このガイドは、Logto コネクターについての基本的な理解があることを前提としています。未経験の方は、コネクター ガイドを参照して始めてください。
はじめに
OAuth コネクターを利用すると、OAuth 2.0 プロトコルをサポートする任意のソーシャルアイデンティティプロバイダー (IdP) へ Logto から接続できます。OAuth コネクターを使うことで、アプリケーションに次の機能を追加できます：
- ソーシャルサインインボタンの追加
- ユーザーアカウントとソーシャルアイデンティティの連携
- ソーシャルプロバイダーからのユーザープロフィール情報の同期
- Logto Secret Vault での安全なトークン保管を通じて、サードパーティ 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 フィールド | Type | Required | デフォルト値 |
|---|---|---|---|
| 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) フレームワーク