> ## 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.

# Inicio rápido de JavaScript para Native y Phaser

> Instale la biblioteca cliente de JavaScript de PlayFab y realice su primera llamada API de PlayFab en un explorador o en un juego de Phaser para autenticar a un jugador.

# Inicio rápido: biblioteca cliente de PlayFab para JavaScript

Comience a usar la biblioteca cliente de PlayFab para JavaScript para autenticar a un jugador. Siga los pasos para instalar el paquete y pruebe el código de ejemplo para las tareas básicas.

## Requisitos previos

* Una [cuenta de desarrollador de PlayFab](https://developer.playfab.com). Para obtener información sobre cómo crear un título y encontrar el TitleId, consulte el [inicio rápido de Game Manager](/services/playfab/live-service-management/gamemanager/quickstart).

La guía de inicio rápido funciona en cualquier sistema operativo capaz de ejecutar un explorador web.

## Configuración del proyecto de JavaScript

Antes de poder llamar a cualquier API de PlayFab, debe tener una [cuenta de desarrollador de PlayFab](https://developer.playfab.com). Para obtener información sobre cómo crear un título y encontrar el TitleId, consulte el [inicio rápido de Game Manager](/services/playfab/live-service-management/gamemanager/quickstart).

Sistema operativo: esta guía funciona en cualquier sistema operativo capaz de ejecutar un explorador web.

Para configurar un proyecto nuevo, cree una carpeta nueva con dos archivos de texto vacíos:

* `PlayFabGettingStarted.html`
* `PlayFabGettingStarted.js`

Eso es todo: ¡instalación de PlayFab completada!

## Ejemplos de código

Esta guía proporciona los pasos mínimos para realizar su primera llamada API de PlayFab. La confirmación es visible en la página web. Para obtener más información sobre los parámetros y los valores devueltos, se recomienda usar primero la [plantilla de Postman](/services/playfab/sdks/postman/postman-quickstart).

### Autenticar el cliente

En su editor de texto favorito, actualice el contenido de `PlayFabGettingStarted.html` de la siguiente manera:

```html theme={null}
<!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>
```

En su editor de texto favorito, actualice el contenido de `PlayFabGettingStarted.js` de la siguiente manera:

```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);
    }
}
```

Para consultar el formato correcto del objeto loginRequest de este ejemplo, vea la referencia de API de [LoginWithCustomID](xref:titleid.playfabapi.com.client.authentication.loginwithcustomid).

## Ejecutar el código

1. Abra `PlayFabGettingStarted.html` en su explorador favorito.
2. Seleccione el botón **Call LoginWithCustomID**.
3. Debería ver el texto siguiente en la sección Result:
   "Congratulations, you made your first successful API call!"

En este punto, puede empezar a realizar otras llamadas API y a crear su juego.

Para obtener una lista de todas las llamadas API de cliente disponibles, consulte la documentación de [referencias de API de PlayFab](/services/playfab/api-references).

## Análisis del código

Esta sección describe en detalle cada parte del código.

El archivo HTML tiene algunas líneas importantes:

```html theme={null}
<script type="text/javascript" src="https://download.playfab.com/PlayFabClientApi.js"></script>
```

Esta línea carga el Client-SDK directamente desde la CDN de PlayFab. Nuestra CDN siempre hospeda la versión más reciente del PlayFabSDK. Podría ser más seguro que descargara los archivos y usara una versión fija: [SDK de JavaScript de PlayFab](https://aka.ms/playfabjavascriptsdkdownload)

```html theme={null}
<script type="text/javascript" src="PlayFabGettingStarted.js"></script>
...
<input type="button" value="Call LoginWithCustomID" onclick="DoExampleLoginWithCustomID()"><br />
```

Como puede ver arriba, `PlayFabGettingStarted.js` contiene la función `DoExampleLoginWithCustomID`. Estas líneas enlazan nuestro archivo js con nuestra página web e invocan la función `DoExampleLoginWithCustomID` de ese script. Todo lo demás es solo interfaz gráfica.

Las funciones de `PlayFabClientSDK` reciben el nombre de las solicitudes HTTP correspondientes. Por ejemplo, la solicitud HTTP correspondiente a la función `LoginWithCustomID` también se llama "LoginWithCustomID". El cuerpo de la solicitud se empaqueta en el objeto de solicitud de JavaScript como claves y valores. El vale de sesión se guardará a partir del inicio de sesión, por lo que las llamadas del cliente no necesitan incorporar el vale de sesión del encabezado de la solicitud.

* Desglose línea por línea de `PlayFabGettingStarted.js`
  * `PlayFab.settings.titleId = "xxxx";`
    * Cada desarrollador de PlayFab crea un título en Game Manager. Cuando publique su juego, debe codificar ese titleId en el juego. Esto permite al cliente saber cómo acceder a los datos correctos dentro de PlayFab. Para la mayoría de los usuarios, considérelo simplemente un paso obligatorio que hace que PlayFab funcione.

  * `var loginRequest = { TitleId: PlayFab.settings.titleId, CustomId: "GettingStartedGuide", CreateAccount: true };`
    * La mayoría de los métodos de la API de PlayFab requieren parámetros de entrada, y esos parámetros de entrada se empaquetan en un objeto de solicitud.
    * Cada método de la API requiere un objeto de solicitud único, con una combinación de parámetros opcionales y obligatorios.
      * En el caso de `LoginWithCustomID`, hay un parámetro obligatorio, `CustomId`, que identifica de forma única a un jugador, y `CreateAccount`, que permite crear una cuenta nueva con esta llamada. `TitleId` es otro parámetro obligatorio en JavaScript y debe coincidir con `PlayFab.settings.titleId`.
      * Para obtener información sobre dónde encontrar el `TitleId`, consulte el [inicio rápido de Game Manager](/services/playfab/live-service-management/gamemanager/quickstart).

  * En este caso, `TitleId`,  `customId` y `CreateAccount` proceden del cuerpo de la solicitud de `LoginWithCustomID`. Los campos del cuerpo de la solicitud se incluyen como claves y valores en el objeto de solicitud. El vale de sesión del encabezado de la solicitud se guardará a partir del inicio de sesión, por lo que el SessionTicket no se incluye en el objeto de solicitud.

  * `PlayFabClientSDK.LoginWithCustomID(loginRequest, LoginCallback);`
    * Esto inicia la solicitud asincrónica a `LoginWithCustomID`, que llamará a `LoginCallback` cuando la llamada API se complete.
    * Para el inicio de sesión, la mayoría de los desarrolladores querrán usar un método de inicio de sesión más apropiado.
      * Consulte la [documentación de inicio de sesión de PlayFab](xref:titleid.playfabapi.com.client.authentication) para obtener una lista de todos los métodos de inicio de sesión y sus parámetros de entrada. Las opciones habituales son:
        * [LoginWithAndroidDeviceID](xref:titleid.playfabapi.com.client.authentication.loginwithandroiddeviceid)
        * [LoginWithIOSDeviceID](xref:titleid.playfabapi.com.client.authentication.loginwithiosdeviceid)
        * [LoginWithEmailAddress](xref:titleid.playfabapi.com.client.authentication.loginwithemailaddress)

  * Si no tiene experiencia con JavaScript, se recomienda que los desarrolladores lean sobre las funciones de devolución de llamada.

  * `LoginCallback` contiene dos parámetros: result y error
    * Cuando la llamada es correcta, error será null y el objeto result contendrá la información solicitada, según la API a la que se haya llamado.
    * Este resultado contiene información básica sobre el jugador pero, para la mayoría de los usuarios, el inicio de sesión es simplemente un paso obligatorio antes de llamar a otras API.

  * Si error no es `null`, la llamada API ha fallado.

## Solución de problemas

* Las llamadas API pueden fallar por muchos motivos, y siempre debe intentar controlar el error.
* El objeto de error incluye el nombre del error, el código de error y el mensaje de error. En conjunto, esta información debería ser suficiente para diagnosticar el error.
* Los códigos de error globales de los métodos de la API se pueden encontrar en los [códigos de error globales de los métodos de la API](/services/playfab/api-references/global-api-method-error-codes) de PlayFab.
* Por qué fallan las llamadas API (en orden de probabilidad)
  * PlayFabSettings.TitleId no está establecido. Si el TitleId no está establecido, nada funcionará.
  * Parámetros de solicitud. Si no ha proporcionado la información correcta o requerida para una llamada API concreta, esta fallará. Consulte `error.errorMessage, error.errorDetails` o `error.GenerateErrorReport()` para obtener más información.
  * Problema de conectividad del dispositivo. Los teléfonos móviles pierden y recuperan la conectividad constantemente, por lo que cualquier llamada API en cualquier momento puede fallar aleatoriamente y funcionar inmediatamente después. Entrar en un túnel puede desconectarlo por completo.
* Problema del servidor de PlayFab. Como con todo el software, puede haber problemas. Consulte nuestras [notas de la versión](/services/playfab/release-notes) para ver las actualizaciones.
  * Internet no es 100 % confiable. A veces, el mensaje se daña o no llega al servidor de PlayFab.
* Si tiene dificultades para depurar un problema y la información incluida en los datos del error no es suficiente, visítenos en nuestros [foros](https://community.playfab.com/index.html).

## Pasos siguientes

Este inicio rápido muestra un procedimiento simplificado para autenticar a un usuario. Para obtener información adicional sobre la autenticación de usuarios, consulte [Conceptos básicos y procedimientos recomendados de inicio de sesión](/services/playfab/identity/player-identity/login/login-basics-best-practices).

¡Feliz programación!


## Related topics

- [Inicio rápido de Java para Native y Android Studio](/es/services/playfab/sdks/java/quickstart.md)
- [Inicio rápido de CloudScript](/es/services/playfab/live-service-management/service-gateway/automation/cloudscript/quickstart.md)
- [Lenguajes compatibles con PlayFab](/es/services/playfab/sdks/languages/index.md)
- [Inicio rápido de Android](/es/services/playfab/sdks/c/quickstart-android.md)
- [SDK de JavaScript](/es/services/playfab/sdks/javascript/index.md)
