Kongregate와 HTML5를 사용하여 PlayFab 인증 설정하기

이 튜토리얼에서는 Kongregate와 HTML5/JavaScript를 사용하여 PlayFab에서 플레이어를 인증하는 데 필요한 최소한의 설정을 보여줍니다.

요구 사항

등록된 Kongregate 계정.
Kongregate 개발자 가이드에 대한 이해.
등록된 PlayFab 타이틀.
로그인 기본 사항 및 모범 사례에 대한 이해.

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 필드에 애플리케이션 이름을 입력합니다.
그런 다음 제공된 필드에 게임 설명을 입력합니다.
Category를 선택합니다.
아래 예시와 같이 Continue 버튼을 선택하여 새 앱을 제출합니다.

Application Upload 페이지로 이동합니다. 중요한 첫 단계로, 웹 주소 표시줄의 URL을 반드시 저장하세요. 이는 페이지를 닫은 후 애플리케이션에 대한 액세스를 복원하려는 시간을 많이 절약해 줍니다.

완료되면 준비한 index.html 파일을 Game File로 선택합니다.
그런 다음 화면 크기를 설정합니다.
필요한 모든 라이선스를 반드시 수락하세요.
아래 예시와 같이 Upload 버튼을 선택하여 애플리케이션을 업로드합니다.

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

API Information 페이지가 열리면 API Key를 찾아 나중에 사용할 수 있도록 안전하고 쉽게 접근할 수 있는 곳에 저장하세요.

PlayFab 타이틀 구성

PlayFab 타이틀 Game Manager에서:

Add-ons로 이동합니다.
Kongregate를 찾아 선택합니다.

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

이전 섹션에서 얻은 API Key를 입력합니다.
Install 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을 기억하시나요? 이제 이를 사용하여 Application Upload 페이지에 접근합니다.

index.html을 Game File로 선택합니다.
화면 크기를 설정합니다.
필요한 모든 라이선스를 반드시 수락하세요.
Upload 버튼을 선택하여 애플리케이션을 업로드합니다.

미리보기가 로드되면 애플리케이션이 Kongregate User ID와 Username을 얻을 때까지 기다립니다.

그렇게 되면 PlayFab Login With Kongregate 버튼을 선택합니다.
잠시 후에 Authenticated via PlayFab 메시지를 받아야 합니다.
이 시점에서 PlayFab와 Kongregate를 사용하여 성공적으로 로그인했습니다!

​요구 사항

​Kongregate 앱 설정

​PlayFab 타이틀 구성

​코드 준비

​테스트

요구 사항

Kongregate 앱 설정

PlayFab 타이틀 구성

코드 준비

테스트