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

# Configuration de l'authentification PlayFab avec Twitch et HTML5

> Tutoriel pas à pas pour ajouter la connexion Twitch à un titre PlayFab avec HTML5 et JavaScript, couvrant l'inscription de l'application Twitch et l'authentification OAuth des joueurs.

Ce tutoriel a été conçu pour vous guider à travers le processus d'authentification PlayFab avec Twitch et HTML5/JavaScript.

## Configuration requise

Avant de commencer, vous devez disposer des éléments suivants :

* Un [compte Twitch](https://www.twitch.tv/) pour les tests.
* Un titre [PlayFab](https://developer.playfab.com/) inscrit.
* Une bonne connaissance des [principes de base et pratiques exemplaires de connexion](/fr-CA/services/playfab/identity/player-identity/login/login-basics-best-practices).
* Au minimum, un serveur doté d'un nom de domaine valide pour servir des fichiers HTML statiques.

<Note>
  Consultez le tutoriel [Exécution d'un serveur HTTP pour les tests](/fr-CA/services/playfab/identity/player-identity/platform-specific-authentication/running-an-http-server-for-testing) pour savoir comment configurer un serveur doté d'un nom de domaine valide.
</Note>

## Serveur et domaine

Ce tutoriel nécessite un serveur web pour suivre les instructions. Si vous n'avez pas encore de serveur web distant inscrit, suivez notre tutoriel [Exécution d'un serveur HTTP pour les tests](/fr-CA/services/playfab/identity/player-identity/platform-specific-authentication/running-an-http-server-for-testing) pour savoir comment exécuter un serveur web local.

<Note>
  Tout au long de ce tutoriel, nous supposerons que votre domaine est `[http://localhost/](http://localhost/)`.
</Note>

## Inscription d'une application Twitch

Commencez par accéder au [site web de Twitch](https://www.twitch.tv/) et vérifiez que vous êtes connecté.

1. Accédez à la liste déroulante **Account**.
2. Sélectionnez **Settings** dans le menu proposé.

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/twitch-account-settings.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=16b0349a480883b4517f021b9f43b337" alt="Paramètres du compte Twitch" width="1029" height="643" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/twitch-account-settings.png" />

Sur la page **Settings**, sélectionnez **Connections (1)**, comme illustré ci-dessous.

<img src="https://mintcdn.com/microsoft-4404708b/3hg2JQs0m7qmDqay/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/twitch-settings-connections.png?fit=max&auto=format&n=3hg2JQs0m7qmDqay&q=85&s=4f6e6dc81498ffe1a7007c0ae060eab4" alt="Connexions des paramètres Twitch" width="1016" height="198" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/twitch-settings-connections.png" />

En bas de la page, sélectionnez le bouton **Register your application (1)**, comme illustré ci-dessous.

<img src="https://mintcdn.com/microsoft-4404708b/3hg2JQs0m7qmDqay/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/twitch-open-application-registration.png?fit=max&auto=format&n=3hg2JQs0m7qmDqay&q=85&s=d9b6a12d357e2364a422502ce3e943bd" alt="Twitch : ouvrir la page d'inscription d'application" width="690" height="227" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/twitch-open-application-registration.png" />

Une page s'ouvre pour vous permettre de configurer une nouvelle application.

1. Renseignez le **Name** de l'**Application**.
2. Entrez la **Redirect URL**.
3. Entrez l'**Application Category**.
4. Acceptez ensuite les conditions de **Twitch**, puis sélectionnez le bouton **Register**.

<img src="https://mintcdn.com/microsoft-4404708b/3hg2JQs0m7qmDqay/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/twitch-register-your-application.png?fit=max&auto=format&n=3hg2JQs0m7qmDqay&q=85&s=2f039af883eeeea4f5141f2b5f560cae" alt="Twitch : inscrire votre application" width="1029" height="643" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/twitch-register-your-application.png" />

<Info>
  Lors de tests avec un serveur web local, Twitch vous permet d'utiliser `**<http://localhost>**` comme URL de redirection. Veillez à inclure la barre oblique **/**. Sans barre oblique, Twitch ne reconnaîtra pas l'URL localhost.
</Info>

Une fois l'application inscrite, la page est mise à jour et affiche le Client ID de votre application.

<Note>
  Conservez ce Client ID en lieu sûr, à un endroit facilement accessible, car vous l'utiliserez plus tard pour configurer votre titre PlayFab.
</Note>

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/twitch-manage-application.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=a540ab15379f0a9890594bb1f0b8b57a" alt="Twitch : gérer l'application" width="1029" height="643" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/twitch-manage-application.png" />

## Configuration d'un titre PlayFab

Une fois votre Client ID Twitch obtenu, vous pouvez activer et configurer un module complémentaire Twitch pour votre titre PlayFab.

1. Sur l'écran de votre **PlayFab Title**, accédez au menu et sélectionnez l'élément **Add-ons**.
2. Sélectionnez ensuite le lien de l'icône **Twitch**.

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/game-manager-addons-tab-twitch.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=50176ba6202f1f26b095ed278ce8c1ed" alt="Onglet Add-ons de Game Manager" width="624" height="545" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/game-manager-addons-tab-twitch.png" />

Sur la page **Twitch** :

* Une page **Settings** s'ouvre pour le **Twitch Add-on**.
* Entrez votre **Twitch Client ID**.
* Sélectionnez le bouton **Install Twitch**.

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/game-manager-twitch-addon-settings.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=ade8d576e742ccb6492da588c5f12cbc" alt="Game Manager : paramètres et installation du module complémentaire Twitch" width="893" height="599" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/game-manager-twitch-addon-settings.png" />

Prenez un moment pour vérifier que le module complémentaire a été installé et qu'aucune erreur ne s'est produite. La configuration du titre PlayFab est terminée.

## Test

Utilisez le fichier HTML suivant pour tester l'authentification PlayFab avec Twitch.

Veillez à remplacer `TWITCH_CLIENT_ID_GOES_HERE` et `PLAYFAB_TITLE_ID_GOES_HERE` par vos propres valeurs.

```html theme={null}
<!DOCTYPE html>
<html>
<head>
    <!-- Include JQuery - dependency of Twitch JS SDK -->
    <script src="//code.jquery.com/jquery.min.js"></script>
    <!-- Include Twitch SDK -->
    <script src="https://ttv-api.s3.amazonaws.com/twitch.min.js"></script>
    <!-- Include PlayFab SDK -->
    <script src="https://download.playfab.com/PlayFabClientApi.js"></script>
</head>
<body>
    <p>Twitch Auth Example</p>
    <button onclick="login()">Login With Twitch</button>
    <script>
        // Establish Twitch Auth Callback (invoked when logged in with Twitch)
        Twitch.events.addListener('auth.login', function() {
            logLine("Logged in with Twitch!");
            // Invoke login with PlayFab code and pass the token
            loginWithPlayFab(Twitch.getToken());
        });

        // Run Twitch SDK initialization
        Twitch.init({clientId: 'TWITCH_CLIENT_ID_GOES_HERE'}, function(error, status) {
            logLine("Twitch SDK Initialized");
        });

        // This method is invoked when you press the button

        function login() {
            logLine("Logging in via Twitch...");
            Twitch.login({
                scope: ['user_read', 'channel_read']
            });
        }

        function loginWithPlayFab(accessToken){
            logLine("Logging in via PlayFab...");

            // When given accessToken, make call to LoginWithTwitch API Call
            // Make sure to use your own PlayFab Title ID
            PlayFabClientSDK.LoginWithTwitch({
                AccessToken: accessToken,
                TitleId: "PLAYFAB_TITLE_ID_GOES_HERE",
                CreateAccount: true
            }, onPlayFabResponse);
        }

        // Handles response from playfab.
        function onPlayFabResponse(response, error) {
            if (response)
                logLine("Response: " + JSON.stringify(response));
            if (error)
                logLine("Error: " + JSON.stringify(error));
        }

        function logLine(message) {
        console.log(message);
            var textnode = document.createTextNode(message);
            document.body.appendChild(textnode);
            var br = document.createElement("br");
            document.body.appendChild(br);
        }
    </script>
</body>
</html>
```

1. Demandez ce fichier à votre serveur, en utilisant le domaine que vous avez configuré lors de la configuration de l'application Twitch, `<http://localhost>` dans notre cas.

2. Une fois la page ouverte, attendez le message indiquant que le **Twitch SDK** a été initialisé.

3. Sélectionnez ensuite le bouton **Login with Twitch**.

4. Suivez les éventuelles instructions de **Twitch** dans la fenêtre contextuelle et observez la sortie.

<Info>
  Si vous avez *déjà* une session d'authentification Twitch en cours en arrivant sur la page, les rappels peuvent se déclencher dans un ordre différent et inattendu. Ce cas est illustré dans la capture d'écran ci-dessous. Vous devez toutefois vous assurer que seul **Logging in via PlayFab** suit **Logged in with Twitch**. Cela indique que le jeton a été reçu ou restauré depuis le stockage local et qu'il n'est pas nécessaire d'attendre le Twitch SDK pour commencer à se connecter à PlayFab.
</Info>

<img src="https://mintcdn.com/microsoft-4404708b/mLCHf0iQv3VidfBe/images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/twitch-auth-example.png?fit=max&auto=format&n=mLCHf0iQv3VidfBe&q=85&s=8e4934020a31d60a0c4eb5ee8c017558" alt="Exemple d'authentification Twitch" width="489" height="416" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/twitch-auth-example.png" />

Si PlayFab parvient à obtenir un `SessionTicket`, vous avez correctement intégré l'authentification Twitch à votre application PlayFab.


## Related topics

- [Authentification propre à la plateforme](/fr-CA/services/playfab/identity/player-identity/platform-specific-authentication/index.md)
- [Configuration de l'authentification PlayFab avec Kongregate et HTML5](/fr-CA/services/playfab/identity/player-identity/platform-specific-authentication/kongregate-html5.md)
- [Configuration de l'authentification PlayFab avec Facebook et HTML5](/fr-CA/services/playfab/identity/player-identity/platform-specific-authentication/facebook-html5.md)
- [Configuration de l'authentification PlayFab avec Google et HTML5](/fr-CA/services/playfab/identity/player-identity/platform-specific-authentication/google-html5.md)
- [Authentification par connexion anonyme côté serveur](/fr-CA/services/playfab/identity/player-identity/platform-specific-authentication/anonymous-login.md)