使用 Facebook 和 HTML5 设置 PlayFab 身份验证
本教程旨在指导您完成使用 Facebook 和 HTML5/JavaScript 进行 PlayFab 身份验证的过程。
要求
- 用于测试的 Facebook 帐户
- 已注册的 PlayFab 游戏。
- 熟悉 登录基础知识和最佳做法。
- 一个最精简的服务器，具有用于提供静态 HTML 文件的有效域名。
注意
如果您不确定是否满足此活动的要求，请参阅运行 HTTP 服务器进行测试教程。
服务器和域
作为设置 PlayFab 身份验证的要求的一部分，你必须拥有一个具有有效域的服务器。 如果还没有已注册的域和远程 Web 服务器，请按照运行 HTTP 服务器进行测试教程来运行具有有效域名的本地 Web 服务器。
在本指南中，我们假设你的的域为 ['http://playfab.example'](http://playfab.example)。
注册 Facebook 应用程序
首先导航到 Facebook Developer Portal。
- 选择 我的应用 按钮。
- 选择 创建应用 以创建新应用。
将打开新的 应用程序 弹出窗口。
- 在“添加应用名称”下的字段中输入应用程序的名称。
- 在“应用联系人电子邮件”下的字段中输入联系人电子邮件地址。
- 选择要保存的“创建应用”按钮。
注意
确保提供您自己的唯一应用程序名称和电子邮件，如下面提供的示例所示。
- 导航至 Settings 选项卡。
- 选择 Basic 子选项卡。
- 找到你的 应用 ID。
注意
将 应用 ID 复制到安全的位置，稍后我们将使用它设置 Facebook SDK。
- 转到屏幕左侧的菜单，然后选择 产品项。
- 在 Facebook 登录 区域中找到 配置，然后从下拉菜单中选择 设置。
页面应打开并显示以下示例。
- 确认已打开 Client OAuth 和 Web OAuth(标记为 Yes)。
- 将 Valid OAuth redirect URIs 设置为您自己的身份验证页面 URI。
注意
对于您来说，这将是 playfab.example。
在 Client OAuth Settings 屏幕中:
- 验证 JavaScript SDK 登录是否已打开（标记为“是”）
- 将 Valid OAuth redirect URIs 设置为您自己的身份验证页面 URI。
注意
对于您来说，这将是 playfab.example。
3.选择“保存更改”进行提交。
在 Application Manager 页面上:
- 在菜单中打开 Settings/Basic (1)。
- 选择 Add Platform (2) 按钮。
屏幕上会显示一个弹出窗口：
- 选择 Website icon。
- 然后，选择“下一步”。
此时应显示 Website 配置面板。
- 在 网站 URL 字段中，输入身份验证页面 URL（在本例中为
playfab.example）。 - 选择“保存更改”进行提交。
测试
使用以下 HTML 文件测试您使用 Facebook 进行 PlayFab 身份验证的配置。
注意
请确保将 YOUR-APPLICATION-ID 和 YOUR-PLAYFAB-TITLE 替换为自己的。
<!DOCTYPE html>
<html>
<head>
<script>
// This function will be called when Facebook SDK is loaded
window.fbAsyncInit = function() {
// Make sure to use your own App ID for the configuration
FB.init({
appId : 'YOUR-APPLICATION-ID',
xfbml : true,
version : 'v2.9'
});
// Record PageView event for analytics
FB.AppEvents.logPageView();
};
// Facebook SDK loader. Creates a script entry to load the SDK
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script src="https://download.playfab.com/PlayFabClientApi.js"></script>
</head>
<body>
<p>Facebook Auth Example</p>
<button onclick="loginWithFacebook()">Log In with Facebook</button>
<script>
// This method is invoked when you press the button
function loginWithFacebook() {
logLine("Logging in via Facebook...");
// Standard practice: make call to FB.login.
// This will show Facebook popup window. To prevent browsers from locking it,
// always make sure to call it from Button click event
FB.login(function(response){
if(!response.authResponse){
logLine("Problem authenticating via Facebook!");
} else {
loginWithPlayfab(response.authResponse.accessToken);
}
});
}
function loginWithPlayfab(accessToken){
logLine("Logging in via PlayFab...");
// When given accessToken, make call to LoginWithFacebook API Call
// Make sure to use your own PlayFab Title ID
PlayFabClientSDK.LoginWithFacebook({
AccessToken: accessToken,
TitleId: "YOUR-PLAYFAB-TITLE",
CreateAccount: true
}, onPlayFabResponse);
}
// Handles response from playfab.
function onPlayFabResponse(response, error) {
if (response)
logLine("Response: " + JSON.stringify(response));
if (error)
logLine("Error: " + JSON.stringify(error));
}
function logLine(message) {
var textnode = document.createTextNode(message);
document.body.appendChild(textnode);
var br = document.createElement("br");
document.body.appendChild(br);
}
</script>
</body>
</html>
使用您在 Facebook Application 配置期间设置的域（在我们的示例中为 playfab.example）从服务器请求以下文件。
- 当 Facebook Auth Example 页面打开后，选择 Log In with Facebook 按钮。
- 按照弹出窗口中的 Facebook 说明进行操作。
查看输出。
您将获得 PlayFab 会话票证。 至此，您已成功完成使用 HTML5 和 JavaScript 进行 PlayFab 和 Facebook 身份验证的配置。