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

Facebook ソーシャルサインインのための公式 Logto コネクター。

ヒント:

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

はじめに

Facebook コネクターは、あなたのアプリケーションが Facebook の OAuth 2.0 認証 (Authentication) システムを使用するための簡潔な方法を提供します。

Facebook デベロッパーアカウントを登録する

まだアカウントを持っていない場合は、Facebook デベロッパーとして登録 してください。

Facebook アプリを設定する

1. Apps ページにアクセスします。
2. 既存のアプリをクリックするか、必要に応じて新しいアプリを作成 します。
   • 選択する アプリタイプ は任意ですが、Facebook Login プロダクトを含んでいる必要があります。
3. アプリダッシュボードページで、「Add a product」セクションまでスクロールし、「Facebook Login」カードの「Set up」ボタンをクリックします。
4. Facebook Login クイックスタートページをスキップし、サイドバー -> 「Products」 -> 「Facebook Login」 -> 「Settings」をクリックします。
5. Facebook Login 設定ページで、「Valid OAuth Redirect URIs」フィールドに ${your_logto_origin}/callback/${connector_id} を入力します。connector_id は Logto 管理コンソールのコネクター詳細ページの上部バーにあります。例：
   • 本番環境の場合：https://logto.dev/callback/${connector_id}
   • ローカル環境でのテストの場合：https://localhost:3001/callback/${connector_id}
6. 右下隅の「Save changes」ボタンをクリックします。

コネクター JSON を作成する

1. Facebook アプリダッシュボードページで、サイドバー -> 「Settings」 -> 「Basic」をクリックします。
2. パネルに「App ID」と「App secret」が表示されます。
3. App secret 入力ボックスの「Show」ボタンをクリックして、その内容をコピーします。
4. Logto コネクター設定を入力します：
   • clientId フィールドに App ID の文字列を入力します。
   • clientSecret フィールドに App secret の文字列を入力します。
   • scope フィールドに、カンマまたはスペースで区切られた 権限 のリストを文字列で入力します。スコープを指定しない場合、デフォルトのスコープは email,public_profile です。

Facebook のテストユーザーでサインインをテストする

開発およびライブの アプリモード の両方で、関連するアプリでのサインインをテストするために、テスト、開発者、および管理者ユーザーのアカウントを使用できます。

また、アプリを直接 ライブにする ことで、任意の Facebook ユーザーがアプリでサインインできるようにすることもできます。

• アプリダッシュボードページで、サイドバー -> 「Roles」 -> 「Test Users」をクリックします。
• 「Create test users」ボタンをクリックしてテストユーザーを作成します。
• 既存のテストユーザーの「Options」ボタンをクリックすると、「名前とパスワードの変更」などの操作が表示されます。

Facebook サインイン設定を公開する

通常、開発モード では、テスト、管理者、および開発者ユーザーのみが関連するアプリでサインインできます。

本番環境で通常の Facebook ユーザーがアプリでサインインできるようにするには、アプリタイプに応じて、Facebook アプリを ライブモード に切り替える必要があるかもしれません。例えば、純粋な ビジネスタイプ のアプリには「ライブ」スイッチボタンがありませんが、使用を妨げることはありません。

1. Facebook アプリダッシュボードページで、サイドバー -> 「Settings」 -> 「Basic」をクリックします。
2. 必要に応じて、パネルの「Privacy Policy URL」と「User data deletion」フィールドを入力します。
3. 右下隅の「Save changes」ボタンをクリックします。
4. アプリのトップバーで「Live」スイッチボタンをクリックします。

設定タイプ

名前	タイプ
clientId	string
clientSecret	string
scope	string

参考文献

• Facebook Login - Documentation - Facebook for Developers
  • Manually Build a Login Flow
  • Permissions Guide