Facebook の設定

Meta（Facebook の運営会社）の開発者向けサイトでアプリを1つ作り、戻り先 URL を登録して、識別子と合鍵を受け取ります 終わると、利用者が [Facebook でログイン] を押したときに Facebook が本人確認に応じるようになります

このページだけで Facebook の設定が終わります 全体像や他の提供元は入口のページ（README.md）を参照してください

---

0. 読む前に（このページの前提）

使うアカウント

• Meta の開発者サイトは、個人の Facebook アカウントでログインして使う作りです
• その場合も、アプリの管理者に法人の担当者を複数人登録して、1人に依存しない形にしてください

登録する戻り先 URL

戻り先 URL（リダイレクト URI＝本人確認が済んだあとブラウザが戻ってくる先の住所）は、環境ごとに違います

• 環境ごとに別のアプリを作り、そのアプリに対応する住所だけを登録します
• 本番の会員画面の住所は 2026-08-16 時点でまだ確定していません（https://tolandsalon.com は予定）

鍵の受け渡し

• 画面に出た値をチャットやメールに貼らない
• 開発の担当が用意する保管場所へ直接入れてください
• この文書に値そのものは書きません

画面の表示について

提供元の画面の名前・並びは 2026-08 時点のものです

---

1. 何のために作るアプリか

利用者の Facebook アカウントで本人確認をして、名前とメールアドレスを受け取るためのアプリです 投稿や友だちの一覧には触れません

---

2. アカウントの用意

• Meta の開発者サイトは、個人の Facebook アカウントでログインして使う作りです
• アプリの管理者に、法人の担当者を複数人登録してください（1人だけだと、その人が抜けたときに触れなくなります）
• 本番の公開時にビジネス認証（法人であることの確認）を求められる場合があります——要否と所要日数は未確認です

---

3. アプリの作り方

1. https://developers.facebook.com/ を開く

2. 右上の [マイアプリ] → [アプリを作成] を押す

3. ユースケース（アプリの用途）で [Facebook ログインで認証とアカウント作成を行う] を選ぶ

4. 次の2つを入れて [アプリを作成]

   欄	入れるもの
   アプリ名	利用者の同意画面に出る名前
   連絡先メールアドレス	運営の連絡先

---

4. 戻り先 URL の登録

5. 左のメニューから [Facebookログイン] → [設定] を開く

URL は1文字も変えずに入れてください 提供元は文字列をそのまま照合するため、末尾のスラッシュ（/）を付けるだけでも弾かれます

手元のパソコン（localhost）の住所は、保存できなくて正常です [HTTPSを強制] の設定が入っていると http:// で始まる戻り先は保存できません

6. [有効なOAuthリダイレクトURI] に §0 の表の URL を入れて [変更を保存]
   • 本番用のアプリ：https://tolandsalon.com/auth/social/facebook/callback

手元のパソコン（localhost）で試すときの補足

• 開発モードのアプリでは、localhost の戻り先を登録する必要がありません（自動で許可されます）
• 保存できなくてもそのまま先へ進んで構いません
• 2026-08-15 に、この画面の但し書きから判明しました

---

5. 鍵の取得場所

7. 左のメニューから [アプリの設定] → [ベーシック] を開く

8. 次の2つを控える

   表示される名前	何にあたるか
   [アプリID]	識別子
   [app secret]	合鍵（[表示] を押すと出ます）

---

6. 開発モードでは、登録した人しかログインできない

アプリが [開発中]（公開前）の間、ログインできるのは次の3種類の人だけです

• アプリの管理者
• 開発者として登録された人
• テスターとして登録された人

動作確認をする人を、[アプリの役割] のメニューから追加してください

---

7. テスト用のアカウントを作れる

Facebook は検証専用の偽アカウントを公式に作れます（本物のアカウントを使わずに試せます）

作成のときは、アプリの利用を許可する側を選んでください 検証にはメールアドレスが要ります

1. 左のメニューの [アプリの役割] → [テストユーザー] を開く
2. [テストユーザーを追加] を押す
3. 人数・ログイン権限の有無・アプリの利用許可の有無を選んで [テストユーザーを作成]
4. 一覧の行の [編集] → [このテストユーザーのパスワードを変更] で自分の決めたパスワードにする
5. [編集] → [このテストユーザーとしてログイン] で、そのアカウントとして操作できる

---

8. 本番の公開時にアプリレビューが要る

• 誰でもログインできるようにするには、アプリを公開してレビュー（審査）を受けます
• 所要日数は未確認です（本番の申請時に実測して、このページへ追記してください）

---

9. 見つからないときの検索語

Meta for Developers アプリ作成 Facebookログイン 設定 ／ Facebook テストユーザー 作成

---

10. このページで撮る写真（4枚）

本番の設定作業のとき、この一覧を見ながら撮影してください 撮った画像は images/ へ、下のファイル名で保存します（本文の <!-- 写真: ... --> の位置に差し込まれます）

• images/facebook-01-アプリ作成.png … [マイアプリ] → [アプリを作成] の画面（ユースケースの選択）
• images/facebook-02-リダイレクトURI.png … [Facebookログイン] → [設定] の有効なOAuthリダイレクトURIの欄
• images/facebook-03-ベーシックの鍵.png … [アプリの設定] → [ベーシック] のアプリIDと app secret（値は隠す）
• images/facebook-04-テストユーザー.png … [アプリの役割] → [テストユーザー] の一覧

撮り方の共通の注意

• 識別子と合鍵が写った写真は、値の部分を隠してから貼る（黒く塗りつぶす）
• 画面の全体ではなく、操作する箇所が分かる範囲を切り取る
• 押すボタンには印（囲み）を付けると迷いません

---

11. このページでまだ確かめられていないこと