Configuración de la autenticación de PlayFab con Kongregate y HTML5

Este tutorial le muestra la configuración mínima necesaria para autenticar a sus jugadores en PlayFab mediante Kongregate y HTML5/JavaScript.

Requisitos

Una cuenta de Kongregate registrada.
Familiaridad con la guía para desarrolladores de Kongregate.
Un título de PlayFab registrado.
Familiaridad con Conceptos básicos de inicio de sesión y procedimientos recomendados.

Configuración de una aplicación de Kongregate

Kongregate requiere que cargue una versión preliminar de la aplicación antes de obtener acceso a la información necesaria de la API. Para ello, debemos preparar un archivo index.html con el contenido siguiente.

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

Vaya al sitio web de Kongregate:

Seleccione la pestaña Games.
Seleccione el botón Upload your game.

Se abre una página para configurar una nueva aplicación.

Escriba el nombre de la aplicación en el campo Title.
A continuación, escriba una descripción del juego en el campo correspondiente.
Seleccione una categoría.
Envíe la nueva aplicación seleccionando el botón Continue, como se indica en el ejemplo siguiente.

Pasará a la página de carga de la aplicación. Como primer paso importante, asegúrese de guardar la URL de la barra de direcciones web. Esto le ahorrará mucho tiempo al intentar restaurar el acceso a la aplicación una vez que cierre la página.

Una vez hecho esto, seleccione el archivo index.html preparado como su Game File.
A continuación, configure el tamaño de la pantalla.
Asegúrese de aceptar todas las licencias necesarias.
Cargue la aplicación seleccionando el botón Upload, como se muestra en el ejemplo siguiente.

Cuando se abra la vista previa, ignore el contenido y abra el vínculo api information.

Cuando se abra la página API Information, busque la clave de API y guárdela en un lugar seguro y de fácil acceso para usarla más adelante.

Configuración del título de PlayFab

En Game Manager de su título de PlayFab:

Vaya a Add-ons.
Busque y seleccione Kongregate.

Se abre una nueva página que le permite configurar la integración con Kongregate.

Escriba la clave de API que adquirió en la sección anterior.
Seleccione Install Kongregate.

Si no recibe ningún mensaje de error, significa que ha configurado la integración del título de PlayFab con su aplicación de Kongregate.

Preparación del código

Use el código de ejemplo que se muestra a continuación para rellenar el archivo index.html de su juego.

<!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>

Pruebas

¿Recuerda la URL que le pedimos que guardara en un lugar seguro y accesible un poco antes? Úsela ahora para acceder a su página de carga de la aplicación.

Seleccione index.html como su Game File.
Configure el tamaño de la pantalla.
Asegúrese de aceptar todas las licencias necesarias.
Cargue la aplicación seleccionando el botón Upload.

Cuando se cargue la vista previa, espere a que la aplicación obtenga el identificador de usuario de Kongregate y el nombre de usuario.

Cuando esto suceda, seleccione el botón PlayFab Login With Kongregate.
Tras una breve pausa, debería recibir el mensaje Authenticated via PlayFab.
En este punto, ha iniciado sesión correctamente con PlayFab y Kongregate.

​Requisitos

​Configuración de una aplicación de Kongregate

​Configuración del título de PlayFab

​Preparación del código

​Pruebas

Requisitos

Configuración de una aplicación de Kongregate

Configuración del título de PlayFab

Preparación del código

Pruebas