빠른 시작: JavaScript용 PlayFab 클라이언트 라이브러리

JavaScript용 PlayFab 클라이언트 라이브러리를 사용하여 플레이어를 인증하는 방법을 시작하세요. 단계에 따라 패키지를 설치하고 기본 작업에 대한 예제 코드를 사용해 보세요.

사전 요구 사항

PlayFab 개발자 계정. 타이틀 생성 및 TitleId 찾기에 대한 자세한 내용은 Game Manager 빠른 시작을 참조하세요.

빠른 시작 가이드는 웹 브라우저를 실행할 수 있는 모든 운영 체제에서 작동합니다.

JavaScript 프로젝트 설정

PlayFab API를 호출하려면 먼저 PlayFab 개발자 계정이 있어야 합니다. 타이틀 생성 및 TitleId 찾기에 대한 자세한 내용은 Game Manager 빠른 시작을 참조하세요. OS: 이 가이드는 웹 브라우저를 실행할 수 있는 모든 OS에서 작동합니다. 새 프로젝트를 설정하려면 두 개의 빈 텍스트 파일이 있는 새 폴더를 만듭니다:

PlayFabGettingStarted.html
PlayFabGettingStarted.js

그게 다입니다 - PlayFab 설치 완료!

코드 예제

이 가이드는 첫 번째 PlayFab API 호출을 수행하는 데 필요한 최소한의 단계를 제공합니다. 확인은 웹 페이지에서 표시됩니다. 매개 변수와 반환 값에 대한 자세한 내용은 먼저 Postman 템플릿을 사용해 볼 것을 권장합니다.

클라이언트 인증

즐겨 사용하는 텍스트 편집기에서 PlayFabGettingStarted.html의 내용을 다음과 같이 업데이트합니다:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PlayFab JavaScript Unit Tests</title>
    <script type="text/javascript" src="https://download.playfab.com/PlayFabClientApi.js"></script>
    <script type="text/javascript" src="PlayFabGettingStarted.js"></script>
</head>
<body>
    PlayFab Getting Started Guide<br />
    TitleID: <input type="text" id="titleId" value="144"><br />
    CustomID: <input type="text" id="customId" value="GettingStartedGuide"><br />
    <input type="button" value="Call LoginWithCustomID" onclick="DoExampleLoginWithCustomID()"><br />
    Result:<br />
    <textarea id="resultOutput" cols="60" rows="5"></textarea><br />
</body>
</html>

즐겨 사용하는 텍스트 편집기에서 PlayFabGettingStarted.js의 내용을 다음과 같이 업데이트합니다:

function DoExampleLoginWithCustomID(){
    PlayFab.settings.titleId = document.getElementById("titleId").value;
    var loginRequest = {
        // Currently, you need to look up the required and optional keys for this object in the API reference for LoginWithCustomID. See the Request Headers and Request Body.
        TitleId: PlayFab.settings.titleId,
        CustomId: document.getElementById("customId").value,
        CreateAccount: true
    };

    PlayFabClientSDK.LoginWithCustomID(loginRequest, LoginCallback);
}

// callback functions take two parameters: result and error
// see callback functions in JavaScript if unclear
var LoginCallback = function (result, error) {
    if (result !== null) {
        document.getElementById("resultOutput").innerHTML = "Congratulations, you made your first successful API call!";
    } else if (error !== null) {
        document.getElementById("resultOutput").innerHTML =
            "Something went wrong with your first API call.\n" +
            "Here's some debug information:\n" +
            PlayFab.GenerateErrorReport(error);
    }
}

이 예제에서 loginRequest 객체의 올바른 형식을 찾으려면 LoginWithCustomID에 대한 API 참조를 확인하세요.

코드 실행

즐겨 사용하는 브라우저에서 PlayFabGettingStarted.html을 엽니다.
Call LoginWithCustomID 버튼을 선택합니다.
Result 섹션에서 다음 텍스트가 표시되어야 합니다: “Congratulations, you made your first successful API call!”

이 시점에서 다른 API 호출을 시작하고 게임을 구축할 수 있습니다. 사용 가능한 모든 클라이언트 API 호출 목록은 PlayFab API 참조 문서를 확인하세요.

코드 분석

이 섹션에서는 코드의 각 부분을 자세히 설명합니다. HTML 파일에는 몇 가지 중요한 줄이 있습니다:

<script type="text/javascript" src="https://download.playfab.com/PlayFabClientApi.js"></script>

이 줄은 PlayFab CDN에서 직접 Client-SDK를 로드합니다. 저희 CDN은 항상 PlayFabSDK의 최신 버전을 호스팅합니다. 파일을 다운로드하여 고정된 버전을 사용하는 것이 더 안전할 수 있습니다: PlayFab JavaScript SDK

<script type="text/javascript" src="PlayFabGettingStarted.js"></script>
...
<input type="button" value="Call LoginWithCustomID" onclick="DoExampleLoginWithCustomID()"><br />

위에서 볼 수 있듯이, PlayFabGettingStarted.js에는 DoExampleLoginWithCustomID 함수가 포함되어 있습니다. 이 줄은 js 파일을 웹 페이지에 바인딩하고 해당 스크립트의 DoExampleLoginWithCustomID 함수를 호출합니다. 나머지는 모두 GUI일 뿐입니다. PlayFabClientSDK의 함수는 해당 HTTP 요청의 이름을 따서 명명됩니다. 예를 들어, LoginWithCustomID 함수에 대한 해당 HTTP 요청도 “LoginWithCustomID”라는 이름이 붙여집니다. Request Body는 키와 값으로 JavaScript 요청 객체에 패키지화됩니다. 세션 티켓은 로그인에서 저장되므로 클라이언트 호출에서는 Request Header의 세션 티켓을 통합할 필요가 없습니다.

PlayFabGettingStarted.js에 대한 줄별 분석
- PlayFab.settings.titleId = "xxxx";
  - 모든 PlayFab 개발자는 Game Manager에서 타이틀을 만듭니다. 게임을 게시할 때 해당 titleId를 게임에 코딩해야 합니다. 이를 통해 클라이언트는 PlayFab 내의 올바른 데이터에 액세스하는 방법을 알 수 있습니다. 대부분의 사용자에게는 이것을 PlayFab이 작동하도록 만드는 필수 단계로 간주하십시오.
- var loginRequest = { TitleId: PlayFab.settings.titleId, CustomId: "GettingStartedGuide", CreateAccount: true };
  - 대부분의 PlayFab API 메서드는 입력 매개 변수를 요구하며 이러한 입력 매개 변수는 요청 객체로 패키지화됩니다.
  - 모든 API 메서드는 선택적 매개 변수와 필수 매개 변수가 혼합된 고유한 요청 객체를 요구합니다.
    - LoginWithCustomID의 경우 플레이어를 고유하게 식별하는 필수 매개 변수 CustomId와 이 호출로 새 계정을 만들 수 있게 하는 CreateAccount가 있습니다. JavaScript에서는 TitleId도 필수 매개 변수이며 PlayFab.settings.titleId와 일치해야 합니다.
    - TitleId를 찾을 수 있는 위치에 대한 자세한 내용은 Game Manager 빠른 시작을 참조하세요.
- 이 경우 TitleId, customId, CreateAccount는 LoginWithCustomID의 Request Body에서 가져옵니다. Request Body 필드는 요청 객체에 키와 값으로 포함됩니다. Request Header의 세션 티켓은 로그인에서 저장되므로 SessionTicket은 요청 객체에 포함되지 않습니다.
- PlayFabClientSDK.LoginWithCustomID(loginRequest, LoginCallback);
  - 이는 LoginWithCustomID에 대한 비동기 요청을 시작하고 API 호출이 완료되면 LoginCallback을 호출합니다.
  - 로그인의 경우 대부분의 개발자는 더 적절한 로그인 방법을 사용하고자 할 것입니다.
    - 모든 로그인 방법 목록과 입력 매개 변수는 PlayFab Login Documentation을 참조하세요. 일반적인 선택은 다음과 같습니다:
- JavaScript을 처음 사용하는 경우 개발자는 콜백 함수에 대해 읽어볼 것을 권장합니다.
- LoginCallback에는 두 개의 매개 변수가 포함됩니다: result, error
  - 성공하면 error는 null이 되고 result 객체에는 호출된 API에 따라 요청된 정보가 포함됩니다.
  - 이 결과에는 플레이어에 대한 몇 가지 기본 정보가 포함되어 있지만 대부분의 사용자에게 로그인은 단순히 다른 API를 호출하기 전의 필수 단계입니다.
- error가 null이 아니면 API 호출이 실패한 것입니다.

문제 해결

API 호출은 여러 이유로 실패할 수 있으며 항상 실패를 처리하려고 시도해야 합니다.
error 객체에는 오류 이름, 오류 코드 및 오류 메시지가 포함됩니다. 이러한 정보를 함께 사용하면 오류를 진단하는 데 충분해야 합니다.
전역 API 메서드 오류 코드는 PlayFab의 전역 API 메서드 오류 코드에서 찾을 수 있습니다.
API 호출이 실패하는 이유(가능성 순서대로)
- PlayFabSettings.TitleId가 설정되지 않았습니다. TitleId가 설정되지 않으면 아무것도 작동하지 않습니다.
- 요청 매개 변수. 특정 API 호출에 대한 올바른 정보 또는 필수 정보를 제공하지 않은 경우 실패합니다. 자세한 정보는 error.errorMessage, error.errorDetails 또는 error.GenerateErrorReport()를 참조하세요.
- 장치 연결 문제. 휴대 전화는 지속적으로 연결이 끊어졌다가 다시 연결되므로 언제든지 API 호출이 무작위로 실패할 수 있으며 즉시 다시 작동할 수 있습니다. 터널에 들어가면 완전히 연결이 끊길 수 있습니다.
PlayFab 서버 문제. 모든 소프트웨어와 마찬가지로 문제가 있을 수 있습니다. 업데이트는 릴리스 노트를 참조하세요.
- 인터넷은 100% 신뢰할 수 없습니다. 때때로 메시지가 손상되거나 PlayFab 서버에 도달하지 못합니다.
문제를 디버깅하는 데 어려움이 있고 오류 정보 내의 정보가 충분하지 않다면 포럼을 방문해 주세요.

다음 단계

이 빠른 시작은 사용자를 인증하기 위한 간소화된 절차를 보여줍니다. 사용자 인증에 대한 추가 정보는 로그인 기본 사항 및 모범 사례를 참조하세요. 즐거운 코딩 되세요!

XBOX Services

PlayFab

네이티브 및 Phaser용 JavaScript 빠른 시작

빠른 시작: JavaScript용 PlayFab 클라이언트 라이브러리

사전 요구 사항

JavaScript 프로젝트 설정

코드 예제

클라이언트 인증

코드 실행

코드 분석

문제 해결

다음 단계

​빠른 시작: JavaScript용 PlayFab 클라이언트 라이브러리

​사전 요구 사항

​JavaScript 프로젝트 설정

​코드 예제

​클라이언트 인증

​코드 실행

​코드 분석

​문제 해결

​다음 단계

빠른 시작: JavaScript용 PlayFab 클라이언트 라이브러리

사전 요구 사항

JavaScript 프로젝트 설정

코드 예제

클라이언트 인증

코드 실행

코드 분석

문제 해결

다음 단계