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

本教程旨在指导你完成使用 Twitch 和 HTML5/JavaScript 进行 PlayFab 身份验证的过程。

要求

在开始之前，你应具备：

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

请参阅为测试运行 HTTP 服务器教程，了解如何设置具有有效域名的服务器。

服务器和域名

本教程需要一个 Web 服务器才能按照说明操作。如果你还没有注册远程 Web 服务器，请按照我们的为测试运行 HTTP 服务器教程了解如何运行本地 Web 服务器。

在本教程中，我们假设你的域名是 [http://localhost/](http://localhost/)。

注册 Twitch 应用程序

首先导航到 Twitch 网站，并验证你已登录。

导航到 Account 下拉菜单。
从提供的菜单中选择 Settings。

在 Settings 页面上，选择 Connections (1)，如下所示。

在页面底部，选择 Register your application (1) 按钮，如下所示。

Twitch open application registration page

允许你配置新应用的页面将打开。

填写 Application 的 Name。
输入 Redirect URL。
输入 Application Category。
然后同意 Twitch 条款，并选择 Register 按钮。

使用本地 Web 服务器进行测试时，Twitch 允许你使用 **<http://localhost>** 作为重定向 URL。请务必包含尾随斜杠 /。如果没有尾随斜杠，Twitch 将无法识别 localhost URL。

注册应用程序后，页面将更新并显示你的应用程序的 Client ID。

将此 Client ID 保存在安全且易于访问的位置，因为你稍后将使用它来配置你的 PlayFab title。

配置 PlayFab title

获取 Twitch Client ID 后，你可以为 PlayFab title 启用和配置 Twitch 附加组件。

在你的 PlayFab Title 屏幕上，转到菜单并选择 Add-ons 项。
然后选择 Twitch 图标链接。

在 Twitch 页面上：

Twitch Add-on 的 Settings 页面将打开。
输入你的 Twitch Client ID。
选择 Install Twitch 按钮。

Game Manager Twitch Add-on settings and install

花点时间验证附加组件已安装且没有发生错误。至此完成了 PlayFab title 的配置。

测试

使用以下 HTML 文件测试使用 Twitch 的 PlayFab 身份验证。请务必用你自己的值替换 TWITCH_CLIENT_ID_GOES_HERE 和 PLAYFAB_TITLE_ID_GOES_HERE。

<!DOCTYPE html>
<html>
<head>
    <!-- Include JQuery - dependency of Twitch JS SDK -->
    <script src="//code.jquery.com/jquery.min.js"></script>
    <!-- Include Twitch SDK -->
    <script src="https://ttv-api.s3.amazonaws.com/twitch.min.js"></script>
    <!-- Include PlayFab SDK -->
    <script src="https://download.playfab.com/PlayFabClientApi.js"></script>
</head>
<body>
    <p>Twitch Auth Example</p>
    <button onclick="login()">Login With Twitch</button>
    <script>
        // Establish Twitch Auth Callback (invoked when logged in with Twitch)
        Twitch.events.addListener('auth.login', function() {
            logLine("Logged in with Twitch!");
            // Invoke login with PlayFab code and pass the token
            loginWithPlayFab(Twitch.getToken());
        });

        // Run Twitch SDK initialization
        Twitch.init({clientId: 'TWITCH_CLIENT_ID_GOES_HERE'}, function(error, status) {
            logLine("Twitch SDK Initialized");
        });

        // This method is invoked when you press the button

        function login() {
            logLine("Logging in via Twitch...");
            Twitch.login({
                scope: ['user_read', 'channel_read']
            });
        }

        function loginWithPlayFab(accessToken){
            logLine("Logging in via PlayFab...");

            // When given accessToken, make call to LoginWithTwitch API Call
            // Make sure to use your own PlayFab Title ID
            PlayFabClientSDK.LoginWithTwitch({
                AccessToken: accessToken,
                TitleId: "PLAYFAB_TITLE_ID_GOES_HERE",
                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) {
        console.log(message);
            var textnode = document.createTextNode(message);
            document.body.appendChild(textnode);
            var br = document.createElement("br");
            document.body.appendChild(br);
        }
    </script>
</body>
</html>

使用你在 Twitch 应用程序配置期间设置的域名（在我们的例子中为 <http://localhost>）从你的服务器请求以下文件。
页面打开后，等待指示 Twitch SDK 已初始化的消息。
然后选择 Login with Twitch 按钮。
按照弹窗中的任何 Twitch 说明操作，并观察输出。

如果你到达页面时已经有一个 Twitch 身份验证会话正在进行，则回调可能以不同的、意外的顺序触发。这种情况显示在下面的屏幕截图中。但是，你应确保仅在 Logged in with Twitch 之后跟随 Logging in via PlayFab。这表示令牌已被接收或从本地存储中恢复，我们不必等待 Twitch SDK 开始登录到 PlayFab。

如果 PlayFab 成功获取 SessionTicket，则你已成功将 Twitch 身份验证与你的 PlayFab 应用集成。

​要求

​服务器和域名

​注册 Twitch 应用程序

​配置 PlayFab title

​测试

要求

服务器和域名

注册 Twitch 应用程序

配置 PlayFab title

测试