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

# Démarrage rapide JavaScript pour JavaScript natif et Phaser

> Installez la bibliothèque cliente JavaScript de PlayFab et effectuez votre premier appel d'API PlayFab dans un navigateur ou un jeu Phaser pour authentifier un joueur.

# Démarrage rapide : bibliothèque cliente PlayFab pour JavaScript

Prenez en main la bibliothèque cliente PlayFab pour JavaScript afin d'authentifier un joueur. Suivez les étapes pour installer le package et essayer l'exemple de code pour les tâches de base.

## Prérequis

* Un [compte de développeur PlayFab](https://developer.playfab.com). Pour plus d'informations sur la création d'un titre et la recherche du TitleId, consultez [Démarrage rapide : Game Manager](/fr-CA/services/playfab/live-service-management/gamemanager/quickstart).

Ce guide de démarrage rapide fonctionne sur n'importe quel système d'exploitation capable d'exécuter un navigateur web.

## Configuration du projet JavaScript

Avant de pouvoir appeler une API PlayFab, vous devez disposer d'un [compte de développeur PlayFab](https://developer.playfab.com). Pour plus d'informations sur la création d'un titre et la recherche du TitleId, consultez [Démarrage rapide : Game Manager](/fr-CA/services/playfab/live-service-management/gamemanager/quickstart).

Système d'exploitation : ce guide fonctionne sur n'importe quel système d'exploitation capable d'exécuter un navigateur web.

Pour configurer un nouveau projet, créez un dossier contenant deux fichiers texte vides :

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

C'est tout : l'installation de PlayFab est terminée!

## Exemples de code

Ce guide présente les étapes minimales nécessaires pour effectuer votre premier appel d'API PlayFab. La confirmation est visible sur la page web. Pour plus d'informations sur les paramètres et les valeurs de retour, nous vous recommandons d'utiliser d'abord le [modèle Postman](/fr-CA/services/playfab/sdks/postman/postman-quickstart).

### Authentifier le client

Dans votre éditeur de texte préféré, mettez à jour le contenu de `PlayFabGettingStarted.html` comme suit :

```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>
```

Dans votre éditeur de texte préféré, mettez à jour le contenu de `PlayFabGettingStarted.js` comme suit :

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

Pour connaître le format correct de l'objet loginRequest de cet exemple, consultez la référence de l'API pour [LoginWithCustomID](xref:titleid.playfabapi.com.client.authentication.loginwithcustomid).

## Exécuter le code

1. Ouvrez `PlayFabGettingStarted.html` dans votre navigateur préféré.
2. Sélectionnez le bouton **Call LoginWithCustomID**.
3. Le texte suivant devrait s'afficher dans la section Result :
   "Congratulations, you made your first successful API call!"

À ce stade, vous pouvez commencer à effectuer d'autres appels d'API et à développer votre jeu.

Pour obtenir la liste de tous les appels d'API client disponibles, consultez la documentation [Références de l'API PlayFab](/fr-CA/services/playfab/api-references).

## Analyse du code

Cette section décrit en détail chaque partie du code.

Le fichier HTML contient quelques lignes importantes :

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

Cette ligne charge le Client-SDK directement depuis le CDN de PlayFab. Notre CDN héberge toujours la dernière version du PlayFabSDK. Il peut être plus sûr de télécharger les fichiers et d'utiliser une version fixe : [SDK JavaScript 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 />
```

Comme vous pouvez le voir ci-dessus, `PlayFabGettingStarted.js` contient la fonction `DoExampleLoginWithCustomID`. Ces lignes lient notre fichier js à notre page web et appellent la fonction `DoExampleLoginWithCustomID` de ce script. Tout le reste n'est que de l'interface graphique.

Les fonctions de `PlayFabClientSDK` portent le nom des requêtes HTTP correspondantes. Par exemple, la requête HTTP correspondant à la fonction `LoginWithCustomID` s'appelle également « LoginWithCustomID ». Le corps de la requête est regroupé dans l'objet de requête JavaScript sous forme de clés et de valeurs. Le ticket de session est enregistré lors de la connexion, de sorte que les appels client n'ont pas besoin d'inclure le ticket de session dans l'en-tête de la requête.

* Analyse ligne par ligne de `PlayFabGettingStarted.js`
  * `PlayFab.settings.titleId = "xxxx";`
    * Chaque développeur PlayFab crée un titre dans Game Manager. Lorsque vous publiez votre jeu, vous devez coder ce titleId dans votre jeu. Cela permet au client de savoir comment accéder aux bonnes données dans PlayFab. Pour la plupart des utilisateurs, considérez simplement qu'il s'agit d'une étape obligatoire pour que PlayFab fonctionne.

  * `var loginRequest = { TitleId: PlayFab.settings.titleId, CustomId: "GettingStartedGuide", CreateAccount: true };`
    * La plupart des méthodes de l'API PlayFab nécessitent des paramètres d'entrée, et ces paramètres d'entrée sont regroupés dans un objet de requête
    * Chaque méthode d'API nécessite un objet de requête unique, avec un mélange de paramètres facultatifs et obligatoires
      * Pour `LoginWithCustomID`, il existe un paramètre obligatoire `CustomId`, qui identifie un joueur de façon unique, et `CreateAccount`, qui permet de créer un nouveau compte avec cet appel. `TitleId` est un autre paramètre obligatoire en JavaScript, et il doit correspondre à `PlayFab.settings.titleId`.
      * Pour savoir où trouver le `TitleId`, consultez [Démarrage rapide : Game Manager](/fr-CA/services/playfab/live-service-management/gamemanager/quickstart).

  * Dans ce cas, `TitleId`, `customId` et `CreateAccount` proviennent du corps de la requête de `LoginWithCustomID`. Les champs du corps de la requête sont inclus sous forme de clés et de valeurs dans l'objet de requête. Le ticket de session de l'en-tête de la requête est enregistré lors de la connexion; le SessionTicket n'est donc pas inclus dans l'objet de requête.

  * `PlayFabClientSDK.LoginWithCustomID(loginRequest, LoginCallback);`
    * Cette ligne lance la requête asynchrone vers `LoginWithCustomID`, qui appellera `LoginCallback` une fois l'appel d'API terminé.
    * Pour la connexion, la plupart des développeurs voudront utiliser une méthode de connexion plus appropriée.
      * Consultez la [documentation sur la connexion PlayFab](xref:titleid.playfabapi.com.client.authentication) pour obtenir la liste de toutes les méthodes de connexion et de leurs paramètres d'entrée. Les choix courants sont :
        * [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 vous débutez en JavaScript, nous vous recommandons de vous renseigner sur les fonctions de rappel.

  * `LoginCallback` contient deux paramètres : result et error
    * En cas de réussite, error est null et l'objet result contient les informations demandées, en fonction de l'API appelée.
    * Ce résultat contient des informations de base sur le joueur, mais pour la plupart des utilisateurs, la connexion est simplement une étape obligatoire avant d'appeler d'autres API.

  * Si error n'est pas `null`, votre appel d'API a échoué.

## Résolution des problèmes

* Les appels d'API peuvent échouer pour de nombreuses raisons, et vous devez toujours essayer de gérer les échecs.
* L'objet error comprend le nom, le code et le message de l'erreur. Ensemble, ces informations devraient suffire à diagnostiquer votre erreur.
* Les codes d'erreur globaux des méthodes d'API sont disponibles dans les [codes d'erreur globaux des méthodes d'API](/fr-CA/services/playfab/api-references/global-api-method-error-codes) de PlayFab.
* Raisons pour lesquelles les appels d'API échouent (par ordre de probabilité)
  * PlayFabSettings.TitleId n'est pas défini. Si TitleId n'est pas défini, rien ne fonctionnera.
  * Paramètres de la requête. Si vous n'avez pas fourni les informations correctes ou requises pour un appel d'API particulier, celui-ci échouera. Consultez `error.errorMessage, error.errorDetails` ou `error.GenerateErrorReport()` pour plus d'informations.
  * Problème de connectivité de l'appareil. Les téléphones portables perdent et retrouvent constamment la connectivité. Ainsi, n'importe quel appel d'API peut échouer de façon aléatoire à tout moment, puis fonctionner immédiatement après. Entrer dans un tunnel peut vous déconnecter complètement.
* Problème de serveur PlayFab. Comme pour tout logiciel, des problèmes peuvent survenir. Consultez nos [notes de publication](/fr-CA/services/playfab/release-notes) pour connaître les mises à jour.
  * Internet n'est pas fiable à 100 %. Parfois, le message est corrompu ou n'atteint pas le serveur PlayFab.
* Si vous avez des difficultés à déboguer un problème et que les informations d'erreur ne suffisent pas, rendez-vous sur nos [forums](https://community.playfab.com/index.html).

## Étapes suivantes

Ce démarrage rapide présente une procédure simplifiée d'authentification d'un utilisateur. Pour plus d'informations sur l'authentification des utilisateurs, consultez [Principes de base et pratiques exemplaires de connexion](/fr-CA/services/playfab/identity/player-identity/login/login-basics-best-practices).

Bon codage!


## Related topics

- [Démarrage rapide Java pour Java natif et Android Studio](/fr-CA/services/playfab/sdks/java/quickstart.md)
- [SDK JavaScript](/fr-CA/services/playfab/sdks/javascript/index.md)
- [Démarrage rapide de CloudScript](/fr-CA/services/playfab/live-service-management/service-gateway/automation/cloudscript/quickstart.md)
- [Langages pris en charge par PlayFab](/fr-CA/services/playfab/sdks/languages/index.md)
- [Licences du SDK JavaScript](/fr-CA/services/playfab/sdks/javascript/license.md)