Configuración de la autenticación de PlayFab con Battle.net

Este tutorial le guía a través del proceso de configuración de la autenticación de PlayFab mediante Battle.net y HTML5/JavaScript.

Requisitos

Necesita:

Una cuenta de Battle.net para realizar pruebas.
Un título registrado en PlayFab.
Estar familiarizado con Conceptos básicos y prácticas recomendadas de inicio de sesión.
Un servidor con un nombre de dominio válido que sirva un archivo HTML estático. Consulte el tutorial Ejecución de un servidor HTTP para pruebas para obtener información sobre cómo configurar uno.

Servidor y dominio

Esta guía requiere un servidor con un dominio válido para poder seguirla. Si aún no tiene un dominio registrado y un servidor web remoto, siga nuestro tutorial Ejecución de un servidor HTTP para pruebas para obtener información sobre cómo configurar un servidor web local con un nombre de dominio válido. A lo largo de esta guía, suponemos que su dominio es http://playfab.example.

Obtención del Client ID del título de Battle.net

Empiece por ir a Battle.net y crear una cuenta de desarrollador de Battle.net. Una vez creada la cuenta, debe crear un título y obtener los Client ID asignados.

Instalación del complemento de Battle.net

Vaya a la página de Game Manager de PlayFab de su título.

Vaya a Add-ons en el menú.
Localice y abra el icono o vínculo del complemento de Battle.net.

Seleccione Install Battle.net.

Complemento de Battle.net de Game Manager de PlayFab

Rellene el Client ID for Game Client.
Opcionalmente, rellene un Client ID for Game Server.
Después, seleccione el botón Save settings.

Client ID del complemento de Battle.net de Game Manager de PlayFab

Battle.net aparece como activo en la página de complementos.

Complemento de Battle.net de Game Manager de PlayFab activo

Pruebas con un token de acceso

En este ejemplo, mostramos cómo probar la API LoginWithBattleNet usando el enfoque clásico de token de acceso. Use el código HTML proporcionado para sus pruebas.

Asegúrese de sustituir YOUR_CLIENT_ID, YOUR_PLAYFAB_TITLE_ID, YOUR_BNET_TITLE_NAME y YOUR_CLIENT_SECRET por sus propios valores.

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <h2>Battle.net SSO Token Demo (Manual Flow)</h2>
    <ol>
        <li>
            <button onclick="openBattleNetLogin()">Log in to Battle.net</button>
        </li>
        <li>
            After login, copy the <b>ST</b> value from the URL (e.g. <code>ST=US-xxxx-xxxx) and paste it here:
            

            <input type="text" id="ssoToken" size="80" placeholder="Paste SSO token (ST=...)" />
        </li>
        <li>
            Click "Exchange SSO Token for id_token"

            <button onclick="exchangeSSOToken()">Exchange SSO Token for id_token</button>
            

            <label>id_token:</label>

            <input type="text" id="idToken" size="80" placeholder="id_token will appear here" />
        </li>
        <li>
            Click "Login to PlayFab" to complete the flow

            <button onclick="loginWithPlayFab()">Login to PlayFab</button>
        </li>
    </ol>
    

    <div id="log"></div>
    <script>
        // Demo configuration variables
        const BNET_TITLE_NAME = 'YOUR_BNET_TITLE_NAME';
        const PLAYFAB_TITLE_ID = 'YOUR_PLAYFAB_TITLE_ID';
        const CLIENT_ID = 'YOUR_CLIENT_ID';
        const CLIENT_SECRET = 'YOUR_CLIENT_SECRET';

        function openBattleNetLogin() {
            const url = `http://account.battle.net/login/en/?app=${encodeURIComponent(BNET_TITLE_NAME)}`;
            window.open(url, '_blank');
        }

        function exchangeSSOToken() {
            const ssoToken = document.getElementById('ssoToken').value.trim();
            if (!ssoToken) {
                logLine("Please enter the SSO token.");
                return;
            }
            logLine("Exchanging SSO token for id_token...");
            // Prepare the request for the token exchange
            const params = new URLSearchParams();
            params.append('scope', 'account.basic openid');
            params.append('grant_type', 'urn:ietf:params:oauth:grant-type:token-exchange');
            params.append('subject_token', ssoToken);
            params.append('subject_token_type', 'urn:blizzard:params:oauth:token-type:sso');
            params.append('requested_token_type', 'urn:ietf:params:oauth:token-type:jwt');

            // Basic Auth header
            const authHeader = 'Basic ' + btoa(CLIENT_ID + ':' + CLIENT_SECRET);

            fetch('https://oauth.battle.net/token', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'Authorization': authHeader
                },
                body: params
            })
            .then(res => res.json())
            .then(data => {
                if (data.id_token) {
                    document.getElementById('idToken').value = data.id_token;
                    logLine("id_token received.");
                } else {
                    logLine("Error: " + JSON.stringify(data));
                }
            })
            .catch(err => logLine("Error: " + err));
        }

        function loginWithPlayFab() {
            const idToken = document.getElementById('idToken').value.trim();
            if (!idToken) {
                logLine("Please exchange for an id_token first.");
                return;
            }
            logLine("Logging in to PlayFab...");
            axios.post(
                `https://${PLAYFAB_TITLE_ID}.playfabapi.com/Client/LoginWithBattleNet`,
                {
                    TitleId: PLAYFAB_TITLE_ID,
                    IdentityToken: idToken,
                    CreateAccount: true
                },
                {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }
            )
            .then(response => logLine("Response: " + JSON.stringify(response.data)))
            .catch(error => logLine("Error: " + JSON.stringify(error.response ? error.response.data : error)));
        }

        function logLine(message) {
            const logDiv = document.getElementById('log');
            logDiv.innerHTML += message + "
";
        }
    </script>
</body>
</html></code>

Recuerde abrir la página HTML usando su servidor web y asegúrese de acceder a esta página con la URL que especificó.

Cuando se abra la página, seleccione Log in to Battle.net.
Después de iniciar sesión, copie el valor ST de la URL (por ejemplo: ST=US-xxxx-xxxx) e introdúzcalo en el cuadro de diálogo.
Seleccione Exchange SSO Token for id_token y copie el valor en el cuadro de diálogo.
Seleccione Login to PlayFab para completar el flujo de inicio de sesión.
Al terminar, el script intenta autenticarse en el lado de PlayFab y muestra el resultado.

XBOX Services

PlayFab

Configuración del inicio de sesión con Battle.net para PlayFab

Configuración de la autenticación de PlayFab con Battle.net

Requisitos

Servidor y dominio

Obtención del Client ID del título de Battle.net

Instalación del complemento de Battle.net

Pruebas con un token de acceso

​Configuración de la autenticación de PlayFab con Battle.net

​Requisitos

​Servidor y dominio

​Obtención del Client ID del título de Battle.net

​Instalación del complemento de Battle.net

​Pruebas con un token de acceso

Configuración de la autenticación de PlayFab con Battle.net

Requisitos

Servidor y dominio

Obtención del Client ID del título de Battle.net

Instalación del complemento de Battle.net

Pruebas con un token de acceso