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

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 para pruebas.
Un título de PlayFab registrado.
Familiaridad con Conceptos básicos de inicio de sesión y procedimientos recomendados.
Como mínimo, un servidor con un nombre de dominio válido para servir archivos HTML estáticos.

Consulte el tutorial Ejecución de un servidor HTTP para pruebas para obtener información sobre cómo configurar un servidor con un nombre de dominio válido.

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 para obtener información sobre cómo ejecutar un servidor web local.

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

Registro de una aplicación de Twitch

Comience por ir al sitio web de Twitch y compruebe que ha iniciado sesión.

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

En la página Settings, seleccione Connections (1), como se muestra a continuación. En la parte inferior de la página, seleccione el botón Register your application (1), como se muestra a continuación. Se abrirá una página que le permitirá configurar una nueva aplicación.

Rellene el Name de la aplicación.
Escriba la Redirect URL.
Escriba la Application Category.
Después, acepte los términos de Twitch y seleccione el botón Register.

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.

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

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.

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.

En la pantalla del título de PlayFab, vaya al menú y seleccione el elemento Add-ons.
Después, seleccione el vínculo del icono de Twitch.

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.

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.

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

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.
Cuando se abra la página, espere al mensaje que indica que el SDK de Twitch se inicializó.
Después, seleccione el botón Login with Twitch.
Siga las instrucciones de Twitch en la ventana emergente y observe la salida.

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.

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

​Requisitos

​Servidor y dominio

​Registro de una aplicación de Twitch

​Configuración de un título de PlayFab

​Pruebas

Requisitos

Servidor y dominio

Registro de una aplicación de Twitch

Configuración de un título de PlayFab

Pruebas