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

本教程向你展示使用 Kongregate 和 HTML5/JavaScript 在 PlayFab 中对玩家进行身份验证所需的最小设置。

要求

已注册的 Kongregate 账户。
熟悉 Kongregate 开发者指南。
已注册的 PlayFab title。
熟悉登录基础和最佳实践。

设置 Kongregate 应用

Kongregate 要求你上传应用的预览版本，然后才能访问必要的 API 信息。为此，我们需要准备一个具有以下内容的 index.html 文件。

<!doctype html>
<html lang="en-us">
<head></head>
<body>
 <h1>Placeholder</h1>
</body>
</html>

导航到 Kongregate 网站：

选择 Games 选项卡。
选择 Upload your game 按钮。

设置新应用的页面打开。

在 Title 字段中输入应用程序名称。
然后在提供的字段中输入游戏描述。
选择一个类别。
通过选择 Continue 按钮提交新应用，如下例所示。

你将被移动到 Application Upload 页面。作为重要的第一步，请务必保存 Web Address Bar 中的 URL。这为你节省了大量在关闭页面后尝试恢复对应用程序访问的时间。

完成后，选择准备好的 index.html 文件作为你的 Game File。
然后设置屏幕大小。
请务必接受所有必需的许可证。
通过选择 Upload 按钮上传你的应用，如下例所示。

预览打开后，忽略内容并打开 api information 链接。

当 API Information 页面打开时，找到 API Key 并将其保存在安全且易于访问的位置以供以后使用。

配置 PlayFab title

在你的 PlayFab title Game Manager 中：

导航到 Add-ons。
找到并选择 Kongregate。

一个新页面打开，允许你设置 Kongregate 集成。

输入你在上一节中获取的 API Key。
选择 Install Kongregate。

如果你没有收到错误消息，则表示你已配置 PlayFab title 与你的 Kongregate 应用的集成。

准备一些代码

使用下面显示的示例代码填充你游戏的 index.html。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
  <title>Kongregate Javascript API example</title>
  <!-- Import PlayFab API -->
  <script src='https://download.playfab.com/PlayFabClientApi.js'></script>
  <!-- Import JQuery, required specifically by this example, does not effect either API -->
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
  <!-- Import Kongregate API -->
  <script src='https://cdn1.kongregate.com/javascripts/kongregate_api.js'></script>
</head>

<!-- Define elements with IDs to show current state of things and a couple of buttons -->
<body style='background-color:white'>
  <span id='init'>Initializing...</span>
  <div id='content' style='display:none'>
    <div>Kongregate API Loaded!</div>
    <div id='username'></div>
    <div id='user_id'></div>
    <!-- This button will invoke Kongregate Auth Box -->
    <button id='login' style='display:none'
      onclick='kongregate.services.showRegistrationBox()'>Sign in/register</button>
    <!-- This button will invoke PlayFab authentication process -->
    <button id='login'
       onclick='loginInUsingPlayFab()'>PlayFab Login With Kongregate</button>
  </div>

  <script type='text/javascript'>

    // This function just updates UI, nothing else
    function updateFields() {
      $('#init').hide();
      $('#content').show();

      // Visualize Kongregate Auth Data
      $('#username').text('Username: ' + kongregate.services.getUsername());
      $('#user_id').text('User ID: ' + kongregate.services.getUserId());

      // If not authenticated in Kongregate, allow to use Login button
      if(kongregate.services.isGuest()) {
        $('#login').show();
      } else {
        $('#login').hide();
      }
    }

    // The function prepares and triggers PlayFab LoginWithKongregate API call
    function loginInUsingPlayFab() {
      // Setting up PlayFab title ID
      PlayFab.settings.titleId = "159F";

      // forming request
      var request = {
        TitleId: PlayFab.settings.titleId,
        AuthTicket: kongregate.services.getGameAuthToken(),
        KongregateId : kongregate.services.getUserId(),
        CreateAccount: true
      };

      console.log('logging in');
      // Invoke LoginWithKongregate API call and visualize both results (success or failure)
      PlayFabClientSDK.LoginWithKongregate(request,
      function(result){
        $('<div></div>').html('Authenticated via playfab').appendTo('#content')
        console.log("success");
      },
      function(err){
        $('<div></div>').html('Problem occurred: ' + PlayFab.GenerateErrorReport(err)).appendTo('#content')
        console.log("failure");
      });
    }

    // The entry point for Kongregate initialization
    kongregateAPI.loadAPI(function(){
      window.kongregate = kongregateAPI.getAPI();
      updateFields();
      kongregate.services.addEventListener('login', function(){
        updateFields();
      });
    });
  </script>
</body>
</html>

测试

还记得我们不久前请你保存在安全且易于访问位置的 URL 吗？现在使用它访问你的 Application Upload 页面。

选择 index.html 作为你的 Game File。
设置屏幕大小。
请务必接受所有必需的许可证。
通过选择 Upload 按钮上传你的应用。

预览加载后，等待应用程序获取 Kongregate User ID 和 Username。

发生这种情况后，选择 PlayFab Login With Kongregate 按钮。
短暂停顿后，你应收到 Authenticated via PlayFab 消息。
至此，你已成功使用 PlayFab 和 Kongregate 登录！

​要求

​设置 Kongregate 应用

​配置 PlayFab title

​准备一些代码

​测试

要求

设置 Kongregate 应用

配置 PlayFab title

准备一些代码

测试