Build

Inicio de sesión para Juegos en Facebook

The Web Games on Facebook and Facebook Gameroom platforms are no longer available for new submissions. This documentation is intended solely for developers with existing games. To learn more, read our blog post.

Al crear un juego para Facebook.com, estás creando una aplicación web que se proporcionará dentro de un contenedor iframe en Facebook.com. Dado que Facebook solamente proporciona juegos a jugadores que hayan iniciado sesión, siempre autenticarás usuarios con sesión iniciada en Facebook.

Por lo tanto, debes crear juegos que admitan el inicio de sesión con Facebook; así, tendrás un identificador coherente con el que sincronizar y mantener el progreso en el juego, y podrás implementar las funciones sociales que los jugadores de videojuegos esperan. Si el juego está disponible en varias plataformas, puedes utilizar este mismo identificador para sincronizar el progreso de los jugadores en todos los dispositivos que utilicen.

En este documento se resumen los diversos enfoques sobre el uso del inicio de sesión con Facebook y cómo sacarle el máximo partido a cada uno de ellos en tu juego.

Fuentes de autenticación

Existen varios procedimientos para que los jugadores se autentiquen por primera vez y varios enfoques para verificar su identidad tras la primera autenticación.

Autenticación del Centro de aplicaciones

Cuando los jugadores inician tu juego mediante el botón Jugar del Centro de aplicaciones, conceden a tu aplicación el conjunto de permisos configurados en la pestaña de detalles de la aplicación del panel de aplicaciones.

Botón Jugar del Centro de aplicaciones

Debido al elevado porcentaje de jugadores que llegan a tu aplicación mediante el Centro de aplicaciones, esta será la ruta de autenticación habitual. Para garantizar un inicio de sesión fluido desde el Centro de aplicaciones, configura el conjunto de permisos concedidos mediante el Centro, de tal modo que coincidan con los que espera tu juego en Facebook.com y en dispositivos móviles.

Para obtener información más detallada, consulta la guía sobre el Centro de aplicaciones.

Autenticación en otra plataforma

Si tu juego está disponible en plataformas para móviles y admite el inicio de sesión con Facebook en la versión para móviles, es posible que algunos jugadores ya estén autenticados cuando vayan a jugar en Facebook.com. Es importante que te asegures de que la versión de tu juego para Facebook.com espera el mismo conjunto de permisos que la versión para móviles.

Detectar el estado de inicio de sesión

Como se ha descrito anteriormente, los jugadores que llegan al juego pueden haber iniciado sesión o no, en función de si se han autenticado antes en el juego, ya sea jugando en Facebook, mediante el Centro de aplicaciones o mediante la versión para móviles.

Puedes detectar si un jugador ha iniciado antes sesión en el juego de dos formas:

  • En el lado del cliente, mediante el método FB.getLoginStatus() del SDK para JavaScript.
  • En el lado del servidor, descodificando el parámetro signed_request.

Usar el SDK de Facebook para JavaScript

Al realizar una llamada a FB.getLoginStatus() al cargarse el documento, puedes asegurarte de que los jugadores inicien sesión de inmediato cuando carguen el juego. A continuación, puedes usar FB.api() para acceder al progreso del jugador mediante su identificador de usuario y para recuperar información con fines de personalización, como el nombre, la foto de perfil y lista de amigos del jugador.

FB.getLoginStatus(function(response) {
  if (response.status === 'connected') {
    // the user is logged in and has authenticated your
    // app, and response.authResponse supplies
    // the user's ID, a valid access token, a signed
    // request, and the time the access token 
    // and signed request each expire
    var uid = response.authResponse.userID;
    var accessToken = response.authResponse.accessToken;
  } else if (response.status === 'not_authorized') {
    // the user is logged in to Facebook, 
    // but has not authenticated your app
  } else {
    // the user isn't logged in to Facebook.
  }
 });

Si el jugador no ha iniciado sesión, puedes llamar a FB.login(...) para mostrar una versión modal del cuadro de diálogo de inicio de sesión encima de la pantalla inicial del juego. La devolución de llamada de este cuadro de diálogo debe utilizar el mismo método que al llamar a FB.getLoginStatus.

Usar solicitudes firmadas

Cuando se carga el juego en Facebook.com, se envía una solicitud HTTP POST a la URL de juegos web de Facebook que hayas determinado. Esta solicitud POST contendrá varios parámetros, incluido signed_request, que puedes utilizar a efectos de autorización.

El parámetro signed_request se codifica mediante Base64url y se firma con una versión de HMAC de la clave secreta de la aplicación basada en la especificación OAuth 2.0.

Por lo tanto, cuando se publique en tu aplicación, tendrás que analizarla y verificarla para poder utilizarse. Este proceso se realiza en tres pasos:

  1. Divide la solicitud firmada en dos partes separadas por un carácter “.” (por ejemplo, 238fsdfsd.oijdoifjsidf899).
  2. Descodifica la primera parte, es decir, la firma cifrada, con codificación Base64url.
  3. Descodifica la segunda parte, es decir, la carga útil con codificación Base64url y, a continuación, descodifica el objeto JSON resultante.

Estos pasos pueden realizarse en cualquier lenguaje de programación moderno. A continuación, figura un ejemplo en PHP:

function parse_signed_request($signed_request) {
  list($encoded_sig, $payload) = explode('.', $signed_request, 2); 

  $secret = "appsecret"; // Use your app secret here

  // decode the data
  $sig = base64_url_decode($encoded_sig);
  $data = json_decode(base64_url_decode($payload), true);

  // confirm the signature
  $expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true);
  if ($sig !== $expected_sig) {
    error_log('Bad Signed JSON signature!');
    return null;
  }

  return $data;
}

function base64_url_decode($input) {
  return base64_decode(strtr($input, '-_', '+/'));
}

El resultado será un objeto JSON como el siguiente:

{
   "oauth_token": "{user-access-token}",
   "algorithm": "HMAC-SHA256",
   "expires": 1291840400,
   "issued_at": 1291836800,
   "user_id": "218471"
}

Al analizar el parámetro signed_request, podrás detectar si el jugador actual se ha autenticado en tu juego. Si lo ha hecho, el parámetro signed_request contendrá su identificador de usuario, que puedes usar para recuperar información de personalización y el progreso en el juego. Puedes intercambiar el parámetro signed_request por un identificador de acceso y utilizarlo para acceder a la API Graph y aumentar la personalización.

Primera autenticación

La primera vez que un jugador acceda a tu juego, debes invitarle a autenticarse mostrándole el cuadro de diálogo de inicio de sesión. El inicio de sesión en el lado del cliente mediante el SDK para Javascript es el proceso de inicio de sesión recomendado a efectos de autenticación. Los desarrolladores pueden mostrar gráficos sencillos del juego antes de abrir un cuadro de diálogo de inicio de sesión y tras cancelar dicho cuadro.

Happy Acres, que utiliza un fondo personalizado para el inicio de sesión

Inicio de sesión en el lado del cliente mediante el SDK para JavaScript

La versión para JavaScript del cuadro de diálogo de inicio de sesión es exclusiva de los juegos en Facebook y se activará en modo async dentro del marco iframe. Por lo tanto, aparecerá como un elemento emergente modal encima del resto del contenido del juego, en lugar de como una ventana independiente del navegador.

Este aspecto es importante, ya que significa que el cuadro de diálogo puede invocarse directamente desde el código, y no como parte de un evento de la interfaz de usuario, sin que lo bloqueen los métodos de detección y bloqueo de elementos emergentes.

Como resultado, puedes usar FB.getLoginStatus() para comprobar si el jugador actual se ha autenticado antes en tu juego y, si no lo ha hecho, mostrar al instante el cuadro de diálogo de inicio de sesión encima del contenido del juego llamando a FB.login(), sin necesidad de mostrar un botón “Iniciar sesión”.

A continuación, se incluye un ejemplo:

// Place following code after FB.init call.

function onLogin(response) {
  if (response.status == 'connected') {
    FB.api('/me?fields=first_name', function(data) {
      var welcomeBlock = document.getElementById('fb-welcome');
      welcomeBlock.innerHTML = 'Hello, ' + data.first_name + '!';
    });
  }
}

FB.getLoginStatus(function(response) {
  // Check login status on load, and if the user is
  // already logged in, go directly to the welcome message.
  if (response.status == 'connected') {
    onLogin(response);
  } else {
    // Otherwise, show Login dialog first.
    FB.login(function(response) {
      onLogin(response);
    }, {scope: 'email'});
  }
});

Siguientes pasos

Independientemente del método de inicio de sesión que utilices, disponer de una identidad real en tu juego te ayudará a crear excelentes funciones sociales que contribuirán a la retención y a la distribución del juego.

El inicio de sesión es el primer paso antes de utilizar muchas de estas funciones, que se pueden crear mediante los productos que figuran a continuación:

En Prácticas recomendadas para los juegos en Facebook, encontrarás más sugerencias para utilizar el inicio de sesión con Facebook de forma eficaz en tu juego.