Configuración de la autenticación de PlayFab mediante Facebook y HTML5

Este tutorial está diseñado para guiarle a través de la autenticación de PlayFab mediante Facebook y HTML5/JavaScript.

Requisitos

Una cuenta de Facebook para realizar pruebas.
Un título registrado en PlayFab.
Estar familiarizado con los conceptos básicos y las prácticas recomendadas de inicio de sesión.
Un servidor mínimo, con un nombre de dominio válido, para servir un archivo HTML estático.

Si no está seguro de si cumple los requisitos adecuados para esta actividad, consulte el tutorial Ejecución de un servidor HTTP para pruebas.

Servidor y dominio

Como parte de los requisitos para configurar la autenticación de PlayFab, debe disponer de un servidor con un dominio válido para poder seguir el tutorial. 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 ejecutar un servidor web local con un nombre de dominio válido. A lo largo de esta guía, supondremos que su dominio es ['http://playfab.example'](http://playfab.example).

Registro de una aplicación de Facebook

Empiece por ir al portal para desarrolladores de Facebook.

Seleccione el botón My Apps.

Agregar una nueva aplicación en Facebook

Seleccione Create App para crear una aplicación nueva.

Se abre una nueva ventana emergente de aplicación.

Escriba un nombre para su aplicación en el campo situado bajo Add an app name.
Escriba una dirección de correo electrónico de contacto en el campo situado bajo App contact email.
Seleccione el botón Create app para guardar.

Asegúrese de crear su propio nombre de aplicación y correo electrónico únicos, como se muestra en el ejemplo siguiente.

Vaya a la pestaña Settings.
Seleccione la subpestaña Basic.
Localice su App ID.

Copie su App ID en un lugar seguro; lo usaremos más adelante para configurar el SDK de Facebook.

Vaya al menú de la izquierda de la pantalla y seleccione el elemento Products.
Localice Configure en el área Facebook Login y seleccione Settings en el menú desplegable.

Introducción al inicio de sesión de Facebook

La página debería abrirse y mostrar el ejemplo siguiente.

Compruebe que tanto Client OAuth como Web OAuth están activados (marcados como Yes).
Establezca Valid OAuth redirect URIs en el URI de su propia página de autenticación.

En su caso, será playfab.example.

Configuración del producto de inicio de sesión de Facebook

En la pantalla Client OAuth Settings:

Compruebe que Login with the JavaScript SDK está activado (marcado como Yes)
Establezca Valid OAuth redirect URIs en el URI de su propia página de autenticación.

En su caso, será playfab.example.

Seleccione Save Changes para confirmar.

Establecer el URI de redirección de OAuth en Facebook

En la página Application Manager:

Abra Settings/Basic (1) en el menú.
Seleccione el botón Add Platform (2).

Agregar plataforma en Application Manager de Facebook

Aparece una ventana emergente en la pantalla:

Seleccione el icono de Website.
Después, seleccione Next.

Opciones de la plataforma Website en Facebook

Ahora debería aparecer el panel de configuración de Website.

En el campo Site URL, escriba la URL de su página de autenticación (en su caso, playfab.example).
Seleccione Save changes para confirmar.

Panel de configuración de sitio web de Facebook

Pruebas

Use el siguiente archivo HTML para probar la autenticación de PlayFab mediante Facebook.

Asegúrese de sustituir YOUR-APPLICATION-ID y YOUR-PLAYFAB-TITLE por los suyos propios.

<!DOCTYPE html>
<html>
<head>
   <script>
        // This function will be called when Facebook SDK is loaded
        window.fbAsyncInit = function() {

            // Make sure to use your own App ID for the configuration
            FB.init({
                appId      : 'YOUR-APPLICATION-ID',
                xfbml      : true,
                version    : 'v2.9'
            });

            // Record PageView event for analytics
            FB.AppEvents.logPageView();
        };

        // Facebook SDK loader. Creates a script entry to load the SDK
        (function(d, s, id){
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {return;}
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_US/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>
    <script src="https://download.playfab.com/PlayFabClientApi.js"></script>
</head>
<body>
    <p>Facebook Auth Example</p>
    <button onclick="loginWithFacebook()">Log In with Facebook</button>
    <script>
        // This method is invoked when you press the button
        function loginWithFacebook() {
            logLine("Logging in via Facebook...");

            // Standard practice: make call to FB.login.
            // This will show Facebook popup window. To prevent browsers from locking it,
            // always make sure to call it from Button click event
            FB.login(function(response){
                if(!response.authResponse){
                    logLine("Problem authenticating via Facebook!");
                } else {
                    loginWithPlayfab(response.authResponse.accessToken);
                }
            });
        }

        function loginWithPlayfab(accessToken){

            logLine("Logging in via PlayFab...");

            // When given accessToken, make call to LoginWithFacebook API Call
            // Make sure to use your own PlayFab Title ID
            PlayFabClientSDK.LoginWithFacebook({
                AccessToken: accessToken,
                TitleId: "YOUR-PLAYFAB-TITLE",
                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) {
            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 a su servidor usando el dominio que configuró durante la configuración de la aplicación de Facebook (playfab.example en nuestro caso).

Cuando se abra la página Facebook Auth Example, seleccione el botón Log In with Facebook.
Siga las instrucciones de Facebook que aparezcan en la ventana emergente.

Observe la salida.

Obtendrá un vale de sesión de PlayFab. En este punto, habrá configurado correctamente la autenticación de PlayFab y Facebook mediante HTML5 y JavaScript.

​Requisitos

​Servidor y dominio

​Registro de una aplicación de Facebook

​Pruebas

Requisitos

Servidor y dominio

Registro de una aplicación de Facebook

Pruebas