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

# Configuración de la autenticación de PlayFab con Twitch y HTML5

> Tutorial paso a paso para agregar el inicio de sesión de Twitch a un título de PlayFab con HTML5 y JavaScript, que abarca el registro de la aplicación de Twitch y la autenticación de jugadores mediante OAuth.

Este tutorial se ha diseñado para guiarle por el proceso de autenticación de PlayFab mediante Twitch y HTML5/JavaScript.

## Requisitos

Antes de empezar, debería tener:

* Una [cuenta de Twitch](https://www.twitch.tv/) para pruebas.
* Un título de [PlayFab](https://developer.playfab.com/) registrado.
* Familiaridad con [Conceptos básicos de inicio de sesión y procedimientos recomendados](/services/playfab/identity/player-identity/login/login-basics-best-practices).
* Como mínimo, un servidor con un nombre de dominio válido para servir archivos HTML estáticos.

<Note>
  Consulte el tutorial [Ejecución de un servidor HTTP para pruebas](/services/playfab/identity/player-identity/platform-specific-authentication/running-an-http-server-for-testing) para obtener información sobre cómo configurar un servidor con un nombre de dominio válido.
</Note>

## Servidor y dominio

Este tutorial requiere un servidor web para poder seguir las instrucciones. Si todavía no tiene un servidor web remoto registrado, siga nuestro tutorial [Ejecución de un servidor HTTP para pruebas](/services/playfab/identity/player-identity/platform-specific-authentication/running-an-http-server-for-testing) para obtener información sobre cómo ejecutar un servidor web local.

<Note>
  A lo largo de este tutorial, supondremos que su dominio es `[http://localhost/](http://localhost/)`.
</Note>

## Registro de una aplicación de Twitch

Comience por ir al [sitio web de Twitch](https://www.twitch.tv/) y compruebe que ha iniciado sesión.

1. Vaya a la lista desplegable **Account**.
2. Seleccione **Settings** en el menú que se muestra.

<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="Configuración de la cuenta de Twitch" width="1029" height="643" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/twitch-account-settings.png" />

En la página **Settings**, seleccione **Connections (1)**, como se muestra a continuación.

<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="Conexiones de la configuración de Twitch" width="1016" height="198" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/twitch-settings-connections.png" />

En la parte inferior de la página, seleccione el botón **Register your application (1)**, como se muestra a continuación.

<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: abrir la página de registro de aplicaciones" width="690" height="227" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/twitch-open-application-registration.png" />

Se abrirá una página que le permitirá configurar una nueva aplicación.

1. Rellene el **Name** de la **aplicación**.
2. Escriba la **Redirect URL**.
3. Escriba la **Application Category**.
4. Después, acepte los términos de **Twitch** y seleccione el botón **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: registrar la aplicación" width="1029" height="643" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/twitch-register-your-application.png" />

<Info>
  Al hacer pruebas con un servidor web local, Twitch le permite usar `**<http://localhost>**` como dirección URL de redireccionamiento. Asegúrese de incluir la barra diagonal inicial **/**. Sin la barra diagonal inicial, Twitch no reconocerá la dirección URL de localhost.
</Info>

Una vez registrada la aplicación, la página se actualizará y mostrará el identificador de cliente de la aplicación.

<Note>
  Guarde este identificador de cliente en un lugar seguro y de fácil acceso, ya que lo usará más adelante para configurar el título de 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: administrar la aplicación" width="1029" height="643" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/twitch-manage-application.png" />

## Configuración de un título de PlayFab

Una vez que adquiera el identificador de cliente de Twitch, puede habilitar y configurar un complemento de Twitch para el título de PlayFab.

1. En la pantalla del **título de PlayFab**, vaya al menú y seleccione el elemento **Add-ons**.
2. Después, seleccione el vínculo del icono de **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="Pestaña 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" />

En la página de **Twitch**:

* Se abrirá una página de **configuración** para el **complemento de Twitch**.
* Escriba su **identificador de cliente de Twitch**.
* Seleccione el botón **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="Configuración e instalación del complemento de Twitch en Game Manager" width="893" height="599" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/game-manager-twitch-addon-settings.png" />

Dedique un momento a comprobar que el complemento se instaló y que no se produjeron errores. Con esto concluye la configuración del título de PlayFab.

## Pruebas

Use el siguiente archivo HTML para probar la autenticación de PlayFab con Twitch.

Asegúrese de reemplazar `TWITCH_CLIENT_ID_GOES_HERE` y `PLAYFAB_TITLE_ID_GOES_HERE` por sus propios valores.

```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. Solicite el archivo anterior desde el servidor, usando el dominio que configuró durante la configuración de la aplicación de Twitch, `<http://localhost>` en nuestro caso.

2. Cuando se abra la página, espere al mensaje que indica que el **SDK de Twitch** se inicializó.

3. Después, seleccione el botón **Login with Twitch**.

4. Siga las instrucciones de **Twitch** en la ventana emergente y observe la salida.

<Info>
  Si *ya tiene* una sesión de autenticación de Twitch en curso al llegar a la página, es posible que las devoluciones de llamada se desencadenen en un orden distinto e inesperado. Este caso se muestra en la captura de pantalla que aparece a continuación. Sin embargo, debe asegurarse de que solo **Logging in via PlayFab** aparezca después de **Logged in with Twitch**. Esto indica que el token se recibió o se restauró desde el almacenamiento local, y no tenemos que esperar a que el SDK de Twitch comience a iniciar sesión en 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="Ejemplo de autenticación de Twitch" width="489" height="416" data-path="images/playfab/identity/player-identity/platform-specific-authentication/tutorials/twitch-html5/twitch-auth-example.png" />

Si PlayFab logra adquirir un `SessionTicket`, habrá integrado correctamente la autenticación de Twitch con la aplicación de PlayFab.


## Related topics

- [Autenticación específica de la plataforma](/es/services/playfab/identity/player-identity/platform-specific-authentication/index.md)
- [Configuración de la autenticación de PlayFab con Google y HTML5](/es/services/playfab/identity/player-identity/platform-specific-authentication/google-html5.md)
- [Configuración de la autenticación de PlayFab con Kongregate y HTML5](/es/services/playfab/identity/player-identity/platform-specific-authentication/kongregate-html5.md)
- [Configuración de la autenticación de PlayFab mediante Facebook y HTML5](/es/services/playfab/identity/player-identity/platform-specific-authentication/facebook-html5.md)
- [Configuración del inicio de sesión con Battle.net para PlayFab](/es/services/playfab/identity/player-identity/platform-specific-authentication/battlenet-login.md)