Inicio de sesión con Facebook para la Web con el SDK para JavaScript

Este documento te guía en el proceso de implementación del inicio de sesión con Facebook mediante el SDK de Facebook para JavaScript en tu página web.

Antes de empezar

Necesitarás lo siguiente:

• Una cuenta de desarrollador de Facebook
• Una aplicación de Facebook registrada con la configuración básica definida
• El SDK de Facebook para JavaScript

1. Introducir la URL de redireccionamiento en el panel de aplicaciones

En el panel de aplicaciones, elige tu aplicación y desplázate a Añadir un producto. Haz clic en Configurar en la tarjeta Inicio de sesión con Facebook. Selecciona Configuración en la ventana de navegación de la izquierda y, debajo de Configuración del cliente de OAuth, introduce tu URL de redireccionamiento en el campo URI de redireccionamiento de OAuth válidos para que la autorización se realice correctamente.

2. Comprobar el estado de inicio de sesión de un usuario

Cuando se carga la página web, el primer paso es determinar si el usuario ya tiene la sesión iniciada en ella con el inicio de sesión con Facebook. Una llamada a FB.getLoginStatus inicia una llamada a Facebook para obtener el estado de inicio de sesión. Después, Facebook llama con los resultados a tu función de devolución de llamada.

Ejemplo de una llamada

FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
});

Ejemplo de una respuesta JSON

{
    status: 'connected',
    authResponse: {
        accessToken: '{access-token}',
        expiresIn:'{unix-timestamp}',
        reauthorize_required_in:'{seconds-until-token-expires}',
        signedRequest:'{signed-parameter}',
        userID:'{user-id}'
    }
}

status especifica el estado de inicio de sesión de la persona que utiliza la página web. El valor de status puede ser uno de los siguientes:

Si el estado es connected, se incluyen los parámetros de authResponse siguientes en la respuesta:

El SDK para JavaScript detecta automáticamente el estado de inicio de sesión, de modo que no tienes que hacer ninguna acción para activar este comportamiento.

3. Iniciar la sesión de un usuario

Si una persona abre tu página web, pero no está conectada o no ha iniciado sesión con Facebook, puedes utilizar el cuadro de diálogo de inicio de sesión para solicitarle que lo haga. Si la persona no ha iniciado sesión en Facebook, se le pedirá que lo haga y, después, que inicie sesión en tu página web.

Una persona puede iniciar sesión de dos modos:

• Con el botón de inicio de sesión con Facebook
• Con el cuadro de diálogo de inicio de sesión desde el SDK para JavaScript

A. Iniciar sesión con el botón de inicio de sesión

Si deseas utilizar el botón de inicio de sesión con Facebook, emplea nuestro configurador del plugin para personalizar el botón de inicio de sesión y obtener el código.

B. Iniciar sesión con el cuadro de diálogo de inicio de sesión del SDK para JavaScript

Para utilizar tu propio botón de inicio de sesión, invoca el cuadro de diálogo de inicio de sesión con una llamada a FB.login().

FB.login(function(response){
  // handle the response 
});

Solicitar permisos adicionales

Cuando una persona hace clic en tu botón HTML, se muestra una ventana emergente con el cuadro de diálogo de inicio de sesión. Este cuadro de diálogo te permite pedir permiso para acceder a los datos de una persona. El parámetro scope se puede pasar junto con la llamada a la función FB.login(). Este parámetro opcional es una lista de permisos separados por comas, que una persona debe confirmar para conceder a tu página web acceso a sus datos.

Ejemplo de una llamada

En este ejemplo, se pide permiso al usuario que inicia sesión para acceder a su perfil público y correo electrónico desde la página web.

FB.login(function(response) {
  // handle the response
}, {scope: 'public_profile,email'});

Gestionar la respuesta del cuadro de diálogo de inicio de sesión

La respuesta, ya sea conectarse o cancelar la operación, devuelve un objeto authResponse para la devolución de llamada especificada cuando llamaste a FB.login(). Esta respuesta se puede detectar y gestionar en la llamada a FB.login().

Ejemplo de una llamada

FB.login(function(response) {
  if (response.status === 'connected') {
    // Logged into your webpage and Facebook.
  } else {
    // The person is not logged into your webpage or we are unable to tell. 
  }
});

4. Cerrar la sesión de un usuario

Para cerrar la sesión de una persona en tu página web, conecta la función FB.logout() del SDK para JavaScript a un botón o un enlace.

Ejemplo de una llamada

FB.logout(function(response) {
   // Person is now logged out
});

Nota: La llamada a esta función también puede cerrar la sesión de Facebook de esta persona.

Escenarios que debes tener en cuenta

1. Una persona inicia sesión en Facebook y, a continuación, en tu página web. Al cerrar sesión en tu aplicación, seguirá teniendo la sesión iniciada en Facebook.
2. Una persona inicia sesión en tu página web y en Facebook como parte del proceso de inicio de sesión de la aplicación. Cuando cierre sesión en tu aplicación, también se cerrará su sesión en Facebook.
3. Una persona inicia sesión en otra página web y en Facebook como parte del proceso de inicio de sesión de esa página web y, a continuación, inicia sesión en la tuya. Cuando cierre sesión en cualquiera de las dos páginas web, también se cerrará su sesión en Facebook.

Además, el cierre de sesión en tu página web no revoca los permisos que el usuario concedió a tu página web durante el inicio de sesión. La revocación de permisos debe realizarse aparte. Diseña tu página web de modo que el cuadro de diálogo de inicio de sesión no se muestre a los usuarios que cerraron sesión cuando la vuelvan a iniciar.

Ejemplo de código completo

Este código carga e inicializa el SDK para JavaScript en tu página HTML. Reemplaza {app-id} por tu identificador de la aplicación y {api-version} por la versión de la API Graph que quieres utilizar. A menos que tengas una razón concreta para usar una versión anterior, especifica la versión más reciente: v11.0.

<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>

  function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
    console.log('statusChangeCallback');
    console.log(response);                   // The current login status of the person.
    if (response.status === 'connected') {   // Logged into your webpage and Facebook.
      testAPI();  
    } else {                                 // Not logged into your webpage or we are unable to tell.
      document.getElementById('status').innerHTML = 'Please log ' +
        'into this webpage.';
    }
  }


  function checkLoginState() {               // Called when a person is finished with the Login Button.
    FB.getLoginStatus(function(response) {   // See the onlogin handler
      statusChangeCallback(response);
    });
  }


  window.fbAsyncInit = function() {
    FB.init({
      appId      : '{app-id}',
      cookie     : true,                     // Enable cookies to allow the server to access the session.
      xfbml      : true,                     // Parse social plugins on this webpage.
      version    : '{api-version}'           // Use this Graph API version for this call.
    });


    FB.getLoginStatus(function(response) {   // Called after the JS SDK has been initialized.
      statusChangeCallback(response);        // Returns the login status.
    });
  };
 
  function testAPI() {                      // Testing Graph API after login.  See statusChangeCallback() for when this call is made.
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', function(response) {
      console.log('Successful login for: ' + response.name);
      document.getElementById('status').innerHTML =
        'Thanks for logging in, ' + response.name + '!';
    });
  }

</script>


<!-- The JS SDK Login Button -->

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>

<div id="status">
</div>

<!-- Load the JS SDK asynchronously -->
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
</body>
</html>

Recursos adicionales

• Documentación del botón de inicio de sesión
• Referencia de la llamada a FB.login()
• Referencia de la llamada a FB.getLoginStatus()
• Referencia del SDK para JavaScript