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

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

ヒント:

このガイドでは、Logto コネクターに関する基本的な知識を持っていることを前提としています。もし持っていない場合は、コネクターの設定 ガイドを参照して始めてください。

はじめに

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

Facebook 開発者アカウントを登録する

まだ持っていない場合は、Facebook 開発者として登録 してください。

Facebook アプリを設定する

1. アプリ ページにアクセスします。
2. 既存のアプリをクリックするか、必要に応じて 新しいアプリを作成 します。
   • 選択した アプリタイプ は任意ですが、Facebook Login 製品を持っている必要があります。
3. アプリダッシュボードページで、「製品を追加」セクションまでスクロールし、「Facebook Login」カードの「セットアップ」ボタンをクリックします。
4. Facebook Login クイックスタートページをスキップし、サイドバー -> 「製品」 -> 「Facebook Login」 -> 「設定」をクリックします。
5. Facebook Login 設定ページで、「有効な OAuth リダイレクト URI」フィールドに ${your_logto_origin}/callback/${connector_id} を入力します。connector_id は Logto 管理コンソールのコネクター詳細ページの上部バーにあります。例：
   • 本番環境の場合は https://logto.dev/callback/${connector_id}
   • ローカル環境でのテストの場合は https://localhost:3001/callback/${connector_id}
6. 右下隅の「変更を保存」ボタンをクリックします。

コネクター JSON を作成する

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

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

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

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

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

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

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

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

1. Facebook アプリダッシュボードページで、サイドバー -> 「設定」 -> 「基本」をクリックします。
2. 必要に応じて、パネルの「プライバシーポリシー URL」と「ユーザーデータ削除」フィールドを入力します。
3. 右下隅の「変更を保存」ボタンをクリックします。
4. アプリのトップバーで「ライブ」スイッチボタンをクリックします。

設定タイプ

名前	タイプ
clientId	string
clientSecret	string
scope	string

参考文献

• Facebook Login - Documentation - Facebook for Developers
  • 手動でログインフローを構築する
  • 権限ガイド