使用 Facebook 和 HTML5 设置 PlayFab 身份验证 - XBOX Game Development Documentation

本教程旨在指导你使用 Facebook 和 HTML5/JavaScript 进行 PlayFab 身份验证。

要求

一个用于测试的 Facebook 账户。
已注册的 PlayFab title。
熟悉登录基础和最佳实践。
最小服务器，具有有效的域名以提供静态 HTML 文件。

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

服务器和域名

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

注册 Facebook 应用程序

首先导航到 Facebook Developer Portal。

选择 My Apps 按钮。

选择 Create App 创建新应用。

一个新的 Application 弹窗打开。

在 Add an app name 下的字段中输入你的应用程序的名称。
在 App contact email 下的字段中输入联系人电子邮件地址。
选择 Create app 按钮以保存。

请务必设计你自己的唯一应用程序名称和电子邮件，如下面提供的示例所示。

导航到 Settings 选项卡。
选择 Basic 子选项卡。
找到你的 App ID。

将 App ID 复制到安全的位置，我们稍后将使用它设置 Facebook SDK。

转到屏幕左侧的菜单并选择 Products 项。
在 Facebook Login 区域找到 Configure 并从下拉菜单中选择 Settings。

该页面应打开并显示下面所示的示例。

验证 Client OAuth 和 Web OAuth 都已开启（标记为 Yes）。
将 Valid OAuth redirect URIs 设置为你自己的 auth 页面 URI。

在你的情况下，这将是 playfab.example。

在 Client OAuth Settings 屏幕中：

验证 Login with the JavaScript SDK 已开启（标记为 Yes）
将 Valid OAuth redirect URIs 设置为你自己的 auth 页面 URI。

在你的情况下，这将是 playfab.example。

选择 Save Changes 提交。

在 Application Manager 页面上：

在你的菜单中打开 Settings/Basic (1)。
选择 Add Platform (2) 按钮。

一个弹窗出现在你的屏幕上：

选择 Website 图标。
然后选择 Next。

Website 配置面板现在应该出现。

在 Site URL 字段中，输入你的 auth 页面 URL（在你的情况下这是 playfab.example）。
选择 Save changes 以提交。

测试

使用以下 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 身份验证。

​要求

​服务器和域名

​注册 Facebook 应用程序

​测试

要求

服务器和域名

注册 Facebook 应用程序

测试