跳转到主要内容
本教程旨在指导你使用 Facebook 和 HTML5/JavaScript 进行 PlayFab 身份验证。

要求

如果你不确定是否具备此活动的适当要求,请参阅为测试运行 HTTP 服务器教程。

服务器和域名

作为设置 PlayFab 身份验证要求的一部分,你必须有一个具有有效域名的服务器才能跟随。如果你还没有注册域名和远程 Web 服务器,请按照我们的为测试运行 HTTP 服务器教程,运行一个具有有效域名的本地 Web 服务器。 在本指南中,我们假设你的域名是 ['http://playfab.example'](http://playfab.example)。

注册 Facebook 应用程序

首先导航到 Facebook Developer Portal。
  1. 选择 My Apps 按钮。
Facebook add a new app
  1. 选择 Create App 创建新应用。
Facebook create a new app 一个新的 Application 弹窗打开。
  1. 在 Add an app name 下的字段中输入你的应用程序的名称。
  2. 在 App contact email 下的字段中输入联系人电子邮件地址。
  3. 选择 Create app 按钮以保存。
请务必设计你自己的唯一应用程序名称和电子邮件,如下面提供的示例所示。
Facebook new app ID
  1. 导航到 Settings 选项卡。
  2. 选择 Basic 子选项卡。
  3. 找到你的 App ID。
将 App ID 复制到安全的位置,我们稍后将使用它设置 Facebook SDK。
Facebook save app ID
  1. 转到屏幕左侧的菜单并选择 Products 项。
  2. 在 Facebook Login 区域找到 Configure 并从下拉菜单中选择 Settings。
Facebook login get started 该页面应打开并显示下面所示的示例。
  1. 验证 Client OAuth 和 Web OAuth 都已开启(标记为 Yes)。
  2. 将 Valid OAuth redirect URIs 设置为你自己的 auth 页面 URI。
在你的情况下,这将是 playfab.example。
Facebook login product settings 在 Client OAuth Settings 屏幕中:
  1. 验证 Login with the JavaScript SDK 已开启(标记为 Yes)
  2. 将 Valid OAuth redirect URIs 设置为你自己的 auth 页面 URI。
在你的情况下,这将是 playfab.example。
  1. 选择 Save Changes 提交。
Facebook set OAuth redirect URI 在 Application Manager 页面上:
  • 在你的菜单中打开 Settings/Basic (1)。
  • 选择 Add Platform (2) 按钮。
Facebook Application Manager Add Platform 一个弹窗出现在你的屏幕上:
  1. 选择 Website 图标。
  2. 然后选择 Next。
Facebook Select Platform Website options Website 配置面板现在应该出现。
  1. 在 Site URL 字段中,输入你的 auth 页面 URL(在你的情况下这是 playfab.example)。
  2. 选择 Save changes 以提交。
Facebook website configuration panel

测试

使用以下 HTML 文件测试使用 Facebook 的 PlayFab 身份验证。
请务必用你自己的替换 YOUR-APPLICATION-ID 和 YOUR-PLAYFAB-TITLE。
使用你在 Facebook Application 配置期间设置的域名(在我们的情况下是 playfab.example)从你的服务器请求以下文件。
  1. Facebook Auth Example 页面打开后,选择 Log In with Facebook 按钮。
  2. 按照弹窗中的任何 Facebook 说明操作。
观察输出。 Facebook Auth Example 你将获得一个 PlayFab 会话票据。至此,你已成功使用 HTML5 和 JavaScript 配置 PlayFab 和 Facebook 身份验证。
最后修改于 2026年10月20日