> ## 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.
# 适用于原生 JavaScript 和 Phaser 的 JavaScript 快速入门
> 安装 PlayFab JavaScript 客户端库，并在浏览器或 Phaser 游戏中发起首次 PlayFab API 调用以验证玩家身份。
# 快速入门：适用于 JavaScript 的 PlayFab 客户端库
开始使用适用于 JavaScript 的 PlayFab 客户端库来验证玩家身份。按照步骤安装该包并试用基本任务的示例代码。
## 先决条件
* [PlayFab 开发者帐户](https://developer.playfab.com)。有关创建 Title 和查找 TitleId 的信息，请参阅 [Game Manager 快速入门](/services/playfab/live-service-management/gamemanager/quickstart)。
本快速入门指南适用于任何能够运行 Web 浏览器的操作系统。
## JavaScript 项目设置
在调用任何 PlayFab API 之前，你必须拥有一个 [PlayFab 开发者帐户](https://developer.playfab.com)。有关创建 Title 和查找 TitleId 的信息，请参阅 [Game Manager 快速入门](/services/playfab/live-service-management/gamemanager/quickstart)。
操作系统：本指南适用于任何能够运行 Web 浏览器的操作系统。
要设置新项目，请创建一个包含两个空文本文件的新文件夹：
* `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"。请求正文以键值形式打包到 JavaScript 请求对象中。会话票据将在登录时保存，因此客户端调用无需再从请求头中包含会话票据。
* `PlayFabGettingStarted.js` 的逐行解析
* `PlayFab.settings.titleId = "xxxx";`
* 每个 PlayFab 开发者都会在 Game Manager 中创建一个 title。发布游戏时，你必须将该 titleId 编入游戏代码中。这可让客户端知道如何访问 PlayFab 中的正确数据。对于大多数用户来说，只需将其视为使 PlayFab 正常工作的必备步骤即可。
* `var loginRequest = { TitleId: PlayFab.settings.titleId, CustomId: "GettingStartedGuide", CreateAccount: true };`
* 大多数 PlayFab API 方法都需要输入参数，这些输入参数被打包到一个请求对象中
* 每个 API 方法都需要一个唯一的请求对象，其中包含可选参数和必需参数的组合
* 对于 `LoginWithCustomID`，有一个必需参数 `CustomId`（唯一标识一个玩家）和 `CreateAccount`（允许通过此调用创建新帐户）。`TitleId` 是 JavaScript 中的另一个必需参数，它必须与 `PlayFab.settings.titleId` 相匹配。
* 有关在何处查找 `TitleId` 的信息，请参阅 [Game Manager 快速入门](/services/playfab/live-service-management/gamemanager/quickstart)。
* 在本例中，`TitleId`、`customId` 和 `CreateAccount` 来自 `LoginWithCustomID` 的请求正文。请求正文字段以键值形式包含在请求对象中。请求头中的会话票据将在登录时保存，因此请求对象中不包含 SessionTicket。
* `PlayFabClientSDK.LoginWithCustomID(loginRequest, LoginCallback);`
* 这将启动对 `LoginWithCustomID` 的异步请求，API 调用完成后将调用 `LoginCallback`。
* 对于登录，大多数开发者会希望使用更合适的登录方法。
* 有关所有登录方法及输入参数的列表，请参阅 [PlayFab 登录文档](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
- [适用于原生 Java 和 Android Studio 的 Java 快速入门](/zh-CN/services/playfab/sdks/java/quickstart.md)
- [CloudScript 快速入门](/zh-CN/services/playfab/live-service-management/service-gateway/automation/cloudscript/quickstart.md)
- [PlayFab 支持的语言](/zh-CN/services/playfab/sdks/languages/index.md)
- [JavaScript SDK](/zh-CN/services/playfab/sdks/javascript/index.md)
- [JavaScript SDK 许可证](/zh-CN/services/playfab/sdks/javascript/license.md)