Facebook ログインを連携する

自分のサービスの利用者が Facebook アカウントで登録できるようにするには、まず Facebook 側に自分のサービスを登録して、App ID と App secret を受け取る必要があります。

このページは、App ID と App secret を受け取る手順を案内します。受け取った二つの値を WEEGLOO に入れる方法はApp ID と App secret を WEEGLOO に入れるにあります。

Facebook で App ID と App secret を受け取る

Facebook アカウントでログインしたあと、以下の四つのステップを順に進めてください。ここで行う作業に費用はかかりません。

1

アプリを作る

すでに使っているアプリがあり、そのアプリの Use cases の画面に Facebook Login の項目がある場合は、新しく作らずにそのアプリをそのまま使ってもかまいません。その場合はこのステップを飛ばして、メールアドレスの権限を追加するに進んでください。

App details、Use cases、Business、Requirements、Overview という五つの画面を順に進みます。

  1. アプリ一覧の画面(https://developers.facebook.com/apps (新しいタブで開きます))を開いてください。

  2. Create App を押してください。

    アプリが一つもない Apps の画面。中央に No apps yet という案内と Create App ボタンがあります

  3. App name に、あとで見分けられる名前を入力してください(例: ぬくもりクローゼット)。

  4. App contact email に、問い合わせを受けるアドレスを入力してください。Facebook がこのアプリについて連絡するときに使うアドレスです。

  5. Next を押してください。

    手順ごとに埋めていく画面の App details の手順。App name の欄と App contact email の欄があり、右下に Next ボタンがあります

  6. Authenticate and request data from users with Facebook Login にチェックを入れてください。

  7. Next を押してください。

    手順ごとに埋めていく画面の Use cases の手順。六つの項目のうち Authenticate and request data from users with Facebook Login にチェックが入っています

  8. I don’t want to connect a business portfolio yet. の項目を選んでください。ビジネスポートフォリオは、画面の説明のとおりあとから追加できます。

  9. Next を押してください。

    手順ごとに埋めていく画面の Business の手順。I don’t want to connect a business portfolio yet. という選択肢と、ビジネスがないという案内が見えます

  10. Requirements の画面の内容を読んで Next を押してください。入力するものはありません。

    手順ごとに埋めていく画面の Requirements の手順。Publishing requirements の下に Business verification と App Review が並んでいます

  11. 最後の Overview の画面で、ここまでに選んだ内容を確認してアプリを作ってください。

2

メールアドレスの権限を追加する

WEEGLOO は、利用者が Facebook でログインするときにメールアドレスもあわせて受け取り、会員に保存します。同じ Space では、一つのメールアドレスで一度だけ登録できます。email の権限を追加しないと Facebook がメールアドレスを渡さないので、この手順を飛ばさないでください。

  1. アプリの画面が開いていない場合は、アプリ一覧の画面(https://developers.facebook.com/apps (新しいタブで開きます))で、ログインに使うアプリを押してください。

  2. 左メニューで Use cases を押してください。

  3. Facebook Login の項目の Customize を押してください。

  4. 左で Permissions and features を押してください。

  5. email の行の + Add を押してください。

    Permissions and features の一覧。email の行は Status に何も表示されず Action に + Add ボタンがあり、public_profile の行には Ready for testing が見えます

  6. email と public_profile の二つの行の Status がどちらも Ready for testing になっているか確認してください。

    同じ一覧。email と public_profile の二つの行とも Status が Ready for testing です

3

ログインのアドレスを登録する

  1. Customize use case の画面が開いていない場合は、アプリ一覧の画面(https://developers.facebook.com/apps (新しいタブで開きます))で、ログインに使うアプリを押してください。次に、左メニューの Use cases で Facebook Login の項目の Customize を押してください。

  2. 左で Settings を押してください。

  3. Valid OAuth Redirect URIs の欄に、下のアドレスを貼り付けてください。自分の Space を選ぶと、識別子が埋まります。

    Space
    https://auth.weegloo.com/v1/spaces/{spaceId}/login/oauth2/code/facebook

    自分の Space がどれか分からず、AI エージェントに連携を任せている場合は、エージェントに尋ねる方法もあります。チャットで「Facebook ログインに登録するリダイレクトのアドレスを教えて」と頼むと、完成したアドレスを受け取れます。

    同じ画面の上にある Redirect URI Validator は、アドレスを登録する場所ではありません。Redirect URI to check にアドレスを入れて Check URI を押すと、そのアドレスを確かめられます。

  4. Save Changes を押してください。

    Settings の画面。上に Redirect URI Validator が、下の Client OAuth settings に Valid OAuth Redirect URIs の欄があります

4

App ID と App secret をコピーする

App ID と App secret は、アプリの基本設定の画面にあります。

この画面の上に、赤い Currently ineligible for submission のバナーが表示されることがあります。App icon、Privacy policy URL、Category が空だという案内です。この三つの項目は審査を提出するときに必要なもので、いまログインを連携するには必要ありません。

  1. アプリの画面が開いていない場合は、アプリ一覧の画面(https://developers.facebook.com/apps (新しいタブで開きます))で、ログインに使うアプリを押してください。

  2. 左メニューで App settings を押してください。

  3. Basic を押してください。

  4. App ID に書かれている値をコピーしておいてください。

  5. App secret の右にある Show を押してください。

  6. 表示された値をコピーしておいてください。

    App settings の Basic の画面。App ID の値が見えていて、App secret は点で隠れたまま右に Show ボタンがあります

二つの値はどちらも、この画面でいつでも見直せます。App secret は Show を押せば表示されるので、書き写せないまま画面を離れても作り直す必要はありません。ただし App secret は秘密の値なので、他の人に教えたり、公開された場所に書き残したりしないでください。

試してもらう人を Tester として追加する

WEEGLOO の連携は審査を待たなくてもかまいません。App ID と App secret を WEEGLOO に入力すれば、ログインはその場で動きます。

ただし、いま作ったアプリはまだ審査を受けていないため、それまではアプリを作ったアカウントでしかログインできません。ほかの人にもログインを試してもらうには、その人をアプリに Tester として追加してください。

  1. 左メニューで App roles を開いて Roles を押してください。

  2. 右上の Add People を押してください。

    App roles の画面。All roles、Administrators、Developers、Testers、Analytics Users のタブがあり、右上に Add People ボタンがあります

  3. Tester を選んでください。

  4. 下の欄に追加する人の名前または Facebook ID を入力して Add を押してください。

    Add people to your app のウィンドウ。Administrator、Developer、Tester、Analytics User のうち Tester が選択されていて、下に人を探す入力欄があります

すぐ下にある Test users のメニューは動作しません。

すべての利用者に開くには審査を受けます

Tester として追加した人だけでなく、利用者の誰もがログインできるようにするには、Facebook の審査を通る必要があります。準備ができたら、左メニューの Review を開いて App Review を開いてください。前に追加した email と public_profile が Not submitted に並んでいます。二つの権限が合っているか確認して、右下の Next を押すと提出の手続きに進みます。

Review の下の App Review の画面。Not submitted の一覧に email と public_profile が並んでいます

Next のあとにもいくつかの手順が続きますが、このページは提出を始めるところまでを案内します。残りの手続きと審査の基準は Meta ドキュメント (新しいタブで開きます)にあります。審査を通れば、そのときから利用者の誰もがこのアプリでログインできます。

App ID と App secret を WEEGLOO に入れる

これで App ID と App secret が手元にあります。二つの値がコンテンツスタジオのどの欄に入るかは、次のとおりです。

Facebook の画面コンテンツスタジオ
App IDApp ID
App secretApp secret

ここから先は、これまでどのように作業してきたかによって分かれます。

コンテンツスタジオで直接設定していた場合は、次のように進めてください。

  1. サービス会員ログインのソーシャルログインを有効にする手順に戻ってください。
  2. Facebook を有効にしてください。
  3. Step 2 の App ID の欄に App ID を入力してください。
  4. App secret の欄に App secret を入力してください。
  5. 保存 を押してください。

AI エージェントに連携を任せていて、App ID と App secret を受け取ってくるように案内された場合は、受け取った二つの値をそのままチャットに貼り付けて、作業を続けてください。残りの設定はエージェントが引き続き処理します。

次にやること

  • サービス会員ログイン: 受け取った値をコンテンツスタジオに入力し、会員ログインの残りの設定を終えます。
  • メンバーのロールと権限: 登録した会員が何を見て使えるかを定める ServiceUserRole を作ります。
  • Auth API: ログインを自分のサイトのコードに組み込むときに必要となる、リクエスト形式などの技術仕様を扱います。