Setting up PlayFab authentication using Kongregate and HTML5

This tutorial shows you the minimal setup required to authenticate your players in PlayFab using Kongregate and HTML5/JavaScript.

Requirements

A registered Kongregate account.
Familiarity with the Kongregate Developers Guide.
A registered PlayFab title.
Familiarity with Login basics and Best Practices.

Setting up a Kongregate app

Kongregate requires you to upload a preview version of the app, before you gain access to the necessary API information. To do this, we need to prepare an index.html file with the following content.

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

Navigate to the Kongregate website:

Select the Games tab.
Select the Upload your game button.

A page to set up for a new application opens.

Enter the Application Name in the Title field.
Then enter a Game Description in the field provided.
Select a Category.
Submit the new app by selecting the Continue button, as indicated in the example provided below.

You’ll be moved to the Application Upload page. As an important first step, make sure to save the URL from your Web Address Bar. This saves you a lot of time trying to restore access to the application once you close the page.

Once this is done, select the prepared index.html file as your Game File.
Then set up the screen size.
Make sure to accept all the required licenses.
Upload your application by selecting the Upload button, as shown in the example provided below.

Once the preview opens, ignore the content and open the api information link.

When the API Information page opens, locate the API Key and save it in a safe and easily accessible place for later use.

Configuring PlayFab title

In your PlayFab title Game Manager:

Navigate to Add-ons.
Find and select Kongregate.

A new page opens, allowing you to set up Kongregate integration.

Enter the API Key you acquired in the previous section.
Select Install Kongregate.

If you receive no error message, then you have configured PlayFab title integration with your Kongregate application.

Preparing some code

Use the example code shown below to populate the index.html for your game.

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

Testing

Remember that URL we asked you to save in a safe and accessible place a little earlier? Use it now to access your Application Upload page.

Select index.html as your Game File.
Set up the screen size.
Make sure to accept all the required licenses.
Upload your application by selecting the Upload button.

Once the preview loads, wait for the Application to obtain the Kongregate User ID and Username.

When that has happened, select the PlayFab Login With Kongregate button.
After a brief pause, you should receive an Authenticated via PlayFab message.
At this point, you have successfully logged in using PlayFab and Kongregate!

​Requirements

​Setting up a Kongregate app

​Configuring PlayFab title

​Preparing some code

​Testing

Requirements

Setting up a Kongregate app

Configuring PlayFab title

Preparing some code

Testing