Facebook ログインを連携する

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

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

先にコピーしておくアドレス

お客さまが Facebook でログインを終えると、Facebook はその結果を決まったアドレスへ返します。このアドレスを Facebook に登録する必要があるので、先にコピーしておいてください。3 番目のステップで貼り付けます。

下で自分の Space を選ぶと、識別子が埋まったアドレスになります。

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

自分で埋めたい場合は、{spaceId} のところに自分の Space の識別子を入れてください。コンテンツスタジオでその Space を開いてブラウザのアドレスバーを見ると、/spaces/ の次に来る値が識別子です。

このアドレスは自分のサイトのアドレスではなく、WEEGLOO がログイン結果を受け取る場所です。ですから、自分のサイトをまだ作っていなくても今の時点で決まります。コンテンツスタジオで Facebook を有効にしていれば、Step 1 に同じアドレスが表示されるので、そこからコピーしてもかまいません。

Facebook で二つの値を受け取る

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

1

アプリを作る

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 に、問い合わせを受けるアドレスを入力してください。

  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 の画面で、ここまでに選んだ内容を確認してアプリを作ってください。

App contact email は、Facebook がアプリについて連絡するときに使うアドレスです。ビジネスポートフォリオは、画面の説明のとおりあとから追加できます。

2

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

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

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

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

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

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

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

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

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

同じ Space では一つのメールアドレスで一度だけ登録できます。

3

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

画面に出てくる OAuth は、Facebook アカウントでログインできるようにする仕組みの名前です。

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

  2. Valid OAuth Redirect URIs の欄に、先にコピーしておくアドレスでコピーしたアドレスを貼り付けてください。

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

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

ここに入れるのは、上でコピーしたアドレス一つだけです。同じ画面の上にある Redirect URI Validator では、Redirect URI to check にアドレスを入れて Check URI を押すと、そのアドレスを確かめられます。

4

App ID と App secret をコピーする

二つの値は、アプリの基本設定の画面にあります。

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

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

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

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

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

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

App ID はこの画面にそのまま残り、App secret は Show を押すたびに見直せます。値を控えないまま画面を離れても、作り直す必要はありません。ただし App secret は秘密の値なので、他の人に教えたり、公開された場所に書き残したりしないでください。

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

審査を通ってはじめてお客さま全体がログインできます

いま作ったアプリは、まだ審査を受けていません。審査を通るまでは、アプリを作ったアカウントでのみログインできます。

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

お客さまの立場で試すには、左メニューの App roles を開いて Test users を押し、Create test users でテスト用のアカウントを作ってください。

Test users の画面。Facebook Accounts のアカウント数の横に Create test users ボタンがあります

お客さま全体に開く準備ができたら、Review の App Review で提出します。この画面には、前に扱った email と public_profile が Not submitted として並んでいます。

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

必要な資料と審査の基準は Meta ドキュメントにあります。

受け取った値を WEEGLOO に入れる

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

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

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

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

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

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

次にやること

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