连接 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 接收登录结果的位置。所以即使你还没有做好自己的网站,它现在也已经确定。如果你在内容工作室中打开了 FacebookStep 1 中会显示同样的地址,也可以从那里复制。

从 Facebook 取得两个值

用 Facebook 账号登录后,请依次进行下面四个步骤。这里所做的事不产生费用。

1

创建应用

依次经过 App detailsUse casesBusinessRequirementsOverview 五个界面。

  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. 确认 emailpublic_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 iconPrivacy policy URLCategory 还空着。这三项是提交审核时需要的,现在连接登录并不需要。

通过审核后全部顾客才能登录

刚创建的这个应用还没有经过审核。通过审核之前,只有创建应用的那个账号能登录。

WEEGLOO 的连接不用等审核。填入两个值后,登录当场就能用。

想站在顾客的角度试一试,就在左侧菜单中展开 App roles,点击 Test users,再用 Create test users 创建测试用的账号。

Test users 界面。Facebook Accounts 的账号数量旁边是 Create test users 按钮

准备好向全部顾客开放时,在 ReviewApp Review 中提交。这个界面上,前面处理过的 emailpublic_profileNot submitted 的状态列在那里。

Review 下的 App Review 界面。Not submitted 列表中有 email 和 public_profile

所需材料和审核标准在 Meta 文档中。

把取得的值填入 WEEGLOO

现在你手里有两个值了。这两个值分别填入内容工作室的哪个框,如下所示。

Facebook 界面内容工作室
App IDApp ID
App secretApp secret

从这里开始,会根据你此前是怎么操作的而分成两条路。

如果你一直在内容工作室中直接配置,请按下面的步骤进行。

  1. 回到服务会员登录的打开社交登录。
  2. 打开 Facebook
  3. Step 2App ID 框中填入 App ID。
  4. App secret 框中填入 App secret。
  5. 点击 保存

如果你把接入工作交给了 AI 智能体,并被告知去取这两个值,就把取得的两个值原样粘贴到对话框中,继续之前的工作。剩下的配置由智能体接着处理。

接下来要做的事

  • 服务会员登录:把取得的值填入内容工作室,完成会员登录的其余配置。
  • 会员角色与权限:创建规定已注册会员能看什么、能用什么的 ServiceUserRole
  • Auth API:介绍把登录接入自己网站代码时所需的请求格式等技术规范。