> ## Documentation Index
> Fetch the complete documentation index at: https://devdocs.xbox.com/llms.txt
> Use this file to discover all available pages before exploring further.
# 네이티브 및 Phaser용 JavaScript 빠른 시작
> PlayFab JavaScript 클라이언트 라이브러리를 설치하고 브라우저 또는 Phaser 게임에서 첫 번째 PlayFab API 호출을 수행하여 플레이어를 인증합니다.
# 빠른 시작: JavaScript용 PlayFab 클라이언트 라이브러리
JavaScript용 PlayFab 클라이언트 라이브러리를 사용하여 플레이어를 인증하는 방법을 시작하세요. 단계에 따라 패키지를 설치하고 기본 작업에 대한 예제 코드를 사용해 보세요.
## 사전 요구 사항
* [PlayFab 개발자 계정](https://developer.playfab.com). 타이틀 생성 및 TitleId 찾기에 대한 자세한 내용은 [Game Manager 빠른 시작](/services/playfab/live-service-management/gamemanager/quickstart)을 참조하세요.
빠른 시작 가이드는 웹 브라우저를 실행할 수 있는 모든 운영 체제에서 작동합니다.
## JavaScript 프로젝트 설정
PlayFab API를 호출하려면 먼저 [PlayFab 개발자 계정](https://developer.playfab.com)이 있어야 합니다. 타이틀 생성 및 TitleId 찾기에 대한 자세한 내용은 [Game Manager 빠른 시작](/services/playfab/live-service-management/gamemanager/quickstart)을 참조하세요.
OS: 이 가이드는 웹 브라우저를 실행할 수 있는 모든 OS에서 작동합니다.
새 프로젝트를 설정하려면 두 개의 빈 텍스트 파일이 있는 새 폴더를 만듭니다:
* `PlayFabGettingStarted.html`
* `PlayFabGettingStarted.js`
그게 다입니다 - PlayFab 설치 완료!
## 코드 예제
이 가이드는 첫 번째 PlayFab API 호출을 수행하는 데 필요한 최소한의 단계를 제공합니다. 확인은 웹 페이지에서 표시됩니다. 매개 변수와 반환 값에 대한 자세한 내용은 먼저 [Postman 템플릿](/services/playfab/sdks/postman/postman-quickstart)을 사용해 볼 것을 권장합니다.
### 클라이언트 인증
즐겨 사용하는 텍스트 편집기에서 `PlayFabGettingStarted.html`의 내용을 다음과 같이 업데이트합니다:
```html theme={null}
PlayFab JavaScript Unit Tests
PlayFab Getting Started Guide
TitleID:
CustomID:
Result:
```
즐겨 사용하는 텍스트 편집기에서 `PlayFabGettingStarted.js`의 내용을 다음과 같이 업데이트합니다:
```javascript theme={null}
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](xref:titleid.playfabapi.com.client.authentication.loginwithcustomid)에 대한 API 참조를 확인하세요.
## 코드 실행
1. 즐겨 사용하는 브라우저에서 `PlayFabGettingStarted.html`을 엽니다.
2. **Call LoginWithCustomID** 버튼을 선택합니다.
3. Result 섹션에서 다음 텍스트가 표시되어야 합니다:
"Congratulations, you made your first successful API call!"
이 시점에서 다른 API 호출을 시작하고 게임을 구축할 수 있습니다.
사용 가능한 모든 클라이언트 API 호출 목록은 [PlayFab API 참조](/services/playfab/api-references) 문서를 확인하세요.
## 코드 분석
이 섹션에서는 코드의 각 부분을 자세히 설명합니다.
HTML 파일에는 몇 가지 중요한 줄이 있습니다:
```html theme={null}
```
이 줄은 PlayFab CDN에서 직접 Client-SDK를 로드합니다. 저희 CDN은 항상 PlayFabSDK의 최신 버전을 호스팅합니다. 파일을 다운로드하여 고정된 버전을 사용하는 것이 더 안전할 수 있습니다: [PlayFab JavaScript SDK](https://aka.ms/playfabjavascriptsdkdownload)
```html theme={null}
...
```
위에서 볼 수 있듯이, `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 빠른 시작](/services/playfab/live-service-management/gamemanager/quickstart)을 참조하세요.
* 이 경우 `TitleId`, `customId`, `CreateAccount`는 `LoginWithCustomID`의 Request Body에서 가져옵니다. Request Body 필드는 요청 객체에 키와 값으로 포함됩니다. Request Header의 세션 티켓은 로그인에서 저장되므로 SessionTicket은 요청 객체에 포함되지 않습니다.
* `PlayFabClientSDK.LoginWithCustomID(loginRequest, LoginCallback);`
* 이는 `LoginWithCustomID`에 대한 비동기 요청을 시작하고 API 호출이 완료되면 `LoginCallback`을 호출합니다.
* 로그인의 경우 대부분의 개발자는 더 적절한 로그인 방법을 사용하고자 할 것입니다.
* 모든 로그인 방법 목록과 입력 매개 변수는 [PlayFab Login Documentation](xref:titleid.playfabapi.com.client.authentication)을 참조하세요. 일반적인 선택은 다음과 같습니다:
* [LoginWithAndroidDeviceID](xref:titleid.playfabapi.com.client.authentication.loginwithandroiddeviceid)
* [LoginWithIOSDeviceID](xref:titleid.playfabapi.com.client.authentication.loginwithiosdeviceid)
* [LoginWithEmailAddress](xref:titleid.playfabapi.com.client.authentication.loginwithemailaddress)
* JavaScript을 처음 사용하는 경우 개발자는 콜백 함수에 대해 읽어볼 것을 권장합니다.
* `LoginCallback`에는 두 개의 매개 변수가 포함됩니다: result, error
* 성공하면 error는 null이 되고 result 객체에는 호출된 API에 따라 요청된 정보가 포함됩니다.
* 이 결과에는 플레이어에 대한 몇 가지 기본 정보가 포함되어 있지만 대부분의 사용자에게 로그인은 단순히 다른 API를 호출하기 전의 필수 단계입니다.
* error가 `null`이 아니면 API 호출이 실패한 것입니다.
## 문제 해결
* API 호출은 여러 이유로 실패할 수 있으며 항상 실패를 처리하려고 시도해야 합니다.
* error 객체에는 오류 이름, 오류 코드 및 오류 메시지가 포함됩니다. 이러한 정보를 함께 사용하면 오류를 진단하는 데 충분해야 합니다.
* 전역 API 메서드 오류 코드는 PlayFab의 [전역 API 메서드 오류 코드](/services/playfab/api-references/global-api-method-error-codes)에서 찾을 수 있습니다.
* API 호출이 실패하는 이유(가능성 순서대로)
* PlayFabSettings.TitleId가 설정되지 않았습니다. TitleId가 설정되지 않으면 아무것도 작동하지 않습니다.
* 요청 매개 변수. 특정 API 호출에 대한 올바른 정보 또는 필수 정보를 제공하지 않은 경우 실패합니다. 자세한 정보는 `error.errorMessage, error.errorDetails` 또는 `error.GenerateErrorReport()`를 참조하세요.
* 장치 연결 문제. 휴대 전화는 지속적으로 연결이 끊어졌다가 다시 연결되므로 언제든지 API 호출이 무작위로 실패할 수 있으며 즉시 다시 작동할 수 있습니다. 터널에 들어가면 완전히 연결이 끊길 수 있습니다.
* PlayFab 서버 문제. 모든 소프트웨어와 마찬가지로 문제가 있을 수 있습니다. 업데이트는 [릴리스 노트](/services/playfab/release-notes)를 참조하세요.
* 인터넷은 100% 신뢰할 수 없습니다. 때때로 메시지가 손상되거나 PlayFab 서버에 도달하지 못합니다.
* 문제를 디버깅하는 데 어려움이 있고 오류 정보 내의 정보가 충분하지 않다면 [포럼](https://community.playfab.com/index.html)을 방문해 주세요.
## 다음 단계
이 빠른 시작은 사용자를 인증하기 위한 간소화된 절차를 보여줍니다. 사용자 인증에 대한 추가 정보는 [로그인 기본 사항 및 모범 사례](/services/playfab/identity/player-identity/login/login-basics-best-practices)를 참조하세요.
즐거운 코딩 되세요!
## Related topics
- [네이티브 및 Android Studio용 Java 빠른 시작](/ko/services/playfab/sdks/java/quickstart.md)
- [Linux용 C++ 빠른 시작](/ko/services/playfab/sdks/playfab-cpp/quickstart-linux.md)
- [Windows용 C++ 빠른 시작](/ko/services/playfab/sdks/playfab-cpp/quickstart-windows.md)
- [GDK용 C/C++ 빠른 시작](/ko/services/playfab/sdks/playfab-cpp/quickstart-gdk.md)
- [Postman용 PlayFab REST API 컬렉션 빠른 시작](/ko/services/playfab/sdks/postman/postman-quickstart.md)