Freigeben über

Einrichten der PlayFab-Authentifizierung mit Kongregate und HTML5

  • Artikel

In diesem Tutorial erfahren Sie, wie sie für die Authentifizierung Ihrer Spieler in PlayFab mit Kongregate und HTML5/JavaScript minimal eingerichtet werden müssen.

Voraussetzungen

Einrichten einer Kongregate-App

Kongregate erfordert, dass Sie eine Vorschauversion der App hochladen, bevor Sie Zugriff auf die erforderlichen API-Informationen erhalten.

Dazu müssen wir eine index.html Datei mit dem folgenden Inhalt vorbereiten.

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

Navigieren Sie zur Kongregate-Website:

  1. Wählen Sie die Registerkarte Spiele aus.
  2. Wählen Sie dann die Schaltfläche Spiel hochladen aus.

Kongregate-Registerkarte

Eine Seite zum Einrichten einer neuen Anwendung wird geöffnet.

  1. Geben Sie den Anwendungsnamen in das Feld Titel ein.
  2. Geben Sie dann eine Spielbeschreibung in das angegebene Feld ein.
  3. Wählen Sie eine Kategorie aus.
  4. Übermitteln Sie die neue App, indem Sie die Schaltfläche Weiter auswählen, wie im folgenden Beispiel gezeigt.

Kongregate laden Sie Ihr Spiel hoch

Sie werden zur Seite Anwendungsupload verschoben.

Stellen Sie als ersten sehr wichtigen Schritt sicher, dass Sie die URL aus Ihrer Webadressleiste speichern. Dadurch sparen Sie viel Zeit beim Versuch, den Zugriff auf die Anwendung wiederherzustellen, nachdem Sie die Seite geschlossen haben.

  1. Wählen Sie anschließend die vorbereitete index.html Datei als Spieldatei aus.
  2. Richten Sie dann die Bildschirmgröße ein.
  3. Stellen Sie sicher, dass Sie alle erforderlichen Lizenzen akzeptieren.
  4. Laden Sie Ihre Anwendung hoch, indem Sie die Schaltfläche Hochladen auswählen, wie im folgenden Beispiel gezeigt.

Seite zum Hochladen der Kongregate-Anwendung

  • Nachdem die Vorschau geöffnet wurde, ignorieren Sie den Inhalt, und öffnen Sie den Link zu API-Informationen .

Informationen zur Kongregate-Vorschau-API

Notiz

Wenn die Seite API-Informationen geöffnet wird, suchen Sie den API-Schlüssel , und speichern Sie ihn zur späteren Verwendung an einem sicheren und leicht zugänglichen Ort.

Kongregate-API-Schlüssel

Konfigurieren des PlayFab-Titels

In Ihrem PlayFab-Titel Game Manager:

  1. Navigieren Sie zu Add-Ons.
  2. Suchen Sie dann Kongregate, und wählen Sie es aus, wie im folgenden Beispiel gezeigt.

PlayFab select Kongregate Add-on

Eine neue Seite wird geöffnet, mit der Sie die Kongregate-Integration einrichten können.

  1. Geben Sie den API-Schlüssel ein , den Sie im vorherigen Abschnitt erworben haben.
  2. Wählen Sie die Schaltfläche Install Kongregate (Kongregate installieren ) aus.

PlayFab richtet die Kongregate-Integration ein

Wenn Sie keine Fehlermeldung erhalten, haben Sie die PlayFab-Titelintegration mit Ihrer Kongregate-Anwendung konfiguriert.

Vorbereiten von Code

Verwenden Sie den unten gezeigten Beispielcode, um die index.html für Ihr Spiel aufzufüllen.

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

Testen

Erinnern Sie sich noch an diese URL, die Sie gebeten haben, an einem sicheren und zugänglichen Ort zu speichern? Verwenden Sie es jetzt, um auf Ihre Seite "Anwendungsupload" zuzugreifen.

  1. Wählen Sie index.html als Spieldatei aus.
  2. Richten Sie die Bildschirmgröße ein.
  3. Stellen Sie sicher, dass Sie alle erforderlichen Lizenzen akzeptieren.
  4. Laden Sie Ihre Anwendung hoch, indem Sie die Schaltfläche Hochladen auswählen.

Seite zum Hochladen der Kongregate-Anwendung

Nachdem die Vorschau geladen wurde, warten Sie, bis die Anwendung die Kongregate-Benutzer-ID und den Benutzernamen erhält.

  • Wenn dies geschehen ist, wählen Sie die Schaltfläche PlayFab Login With KongRegate aus.
  • Nach einer kurzen Pause sollten Sie die Nachricht Authentifiziert über PlayFab erhalten.
  • An diesem Punkt haben Sie sich erfolgreich mit PlayFab und Kongregate!

Testen der PlayFab-Anmeldung mit Kongregate