Kongregate 및 HTML5를 사용한 PlayFab 인증 설정

  • 아티클

이 자습서는 Kongregate 및 HTML5/JavaScript를 사용하여 PlayFab에서 플레이어를 인증하는 데 필요한 최소한의 설정을 알려줍니다.

요구 사항

Kongregate 앱 설정

Kongregate는 필요한 API 정보에 액세스하려면 먼저 앱의 미리 보기 버전을 업로드해야 합니다.

이렇게 하려면 다음 콘텐츠를 사용하여 index.html 파일을 준비해야 합니다.

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

Kongregate 웹 사이트로 이동합니다.

  1. 게임 탭 선택합니다.
  2. 그런 다음 Upload your game(게임 업로드) 단추를 선택합니다.

Kongregate 게임 탭

새 애플리케이션을 설정할 페이지가 열립니다.

  1. 타이틀 필드에 애플리케이션 이름을 입력합니다.
  2. 그런 다음 제공된 필드에 게임 설명을 입력합니다.
  3. 범주를 선택합니다.
  4. 아래에 제공된 예제에 나온 대로 계속 단추를 선택하여 새 앱을 제출합니다.

Kongregate 게임 업로드

애플리케이션 업로드 페이지로 이동합니다.

‘매우’ 중요한 첫 번째 단계로, Web Address Bar(웹 주소 표시줄)의 URL을 저장해야 합니다. 이렇게 하면 페이지를 닫은 후에 애플리케이션에 대한 액세스를 복원하려고 하는 데 많은 시간을 절약할 수 있습니다.

  1. 이 작업이 완료되면 준비된 index.html 파일을 게임 파일로 선택합니다.
  2. 그런 다음 화면 크기를 설정합니다.
  3. 필요한 모든 라이선스에 동의해야 합니다.
  4. 아래의 예제와 같이 업로드 단추를 선택하여 애플리케이션을 업로드합니다.

Kongregate 애플리케이션 업로드 페이지

  • 미리 보기가 열리면 콘텐츠를 무시하고 API 정보 링크를 엽니다.

Kongregate API 정보 미리 보기

참고 항목

API 정보 페이지가 열리면 API 키를 찾아 나중에 사용하기 위해 안전하고 쉽게 액세스할 수 있는 장소에 저장합니다.

Kongregate API 키

PlayFab 타이틀 구성

PlayFab 타이틀 게임 관리자에서:

  1. 추가 기능으로 이동합니다.
  2. 그런 다음 아래의 예제와 같이 Kongregate를 찾아서 선택합니다.

PlayFab Kongregate 추가 기능 선택

Kongregate 통합을 설정할 수 있는 새로운 페이지가 열립니다.

  1. 이전 섹션에서 획득한 API 키를 입력합니다.
  2. Kongregate 설치 단추를 선택합니다.

PlayFab Kongregate 통합 설정

오류 메시지가 나타나지 않으면 Kongregate 애플리케이션과의 PlayFab 타이틀 통합이 구성된 것입니다.

일부 코드 준비

아래에 표시된 예제 코드를 사용하여 게임의 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을 기억하십니까? 지금 애플리케이션 업로드 페이지에 액세스하는 데 사용하세요.

  1. index.html을 게임 파일로 선택합니다.
  2. 화면 크기를 설정합니다.
  3. 필요한 모든 라이선스에 동의해야 합니다.
  4. 업로드 단추를 선택하여 애플리케이션을 업로드합니다.

Kongregate 애플리케이션 업로드 페이지

미리 보기가 로드되면 애플리케이션이 Kongregate 사용자 ID 및 사용자 이름을 얻을 때까지 기다립니다.

  • 완료되면 PlayFab Login With Kongregate(Kongregate를 사용한 PlayFab 로그인) 단추를 선택합니다.
  • 잠시 후에 Authenticated via PlayFab(PlayFab 통해 인증됨) 메시지가 나타납니다.
  • 이 시점에서 PlayFab 및 Kongregate를 사용하여 성공적으로 로그인됩니다!

Kongregate를 사용한 PlayFab 로그인 테스트