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

En este documento te indicamos los pasos para implementar el inicio de sesión con Facebook mediante Facebook SDK for 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 establecida
• Facebook SDK for JavaScript

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

En el panel de aplicaciones, elige tu aplicación, desplázate a Añadir un producto y haz clic en Configurar en el cuadro Inicio de sesión con Facebook. Selecciona Configuración en el panel de navegación izquierdo y, en Configuración del cliente de OAuth, introduce la URL de redireccionamiento en el campo URI de redireccionamiento de OAuth válidos para autorizarla 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. Cuando realizas una llamada a FB.getLoginStatus, se 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}'
    }
}

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

Si el valor del estado es connected, se incluyen los siguientes parámetros de authResponse 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 ha iniciado sesión en ella o en Facebook, puedes usar el cuadro de diálogo de inicio de sesión para pedirle que inicie sesión en ambos sitios. 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:

• El botón “Iniciar sesión” de Facebook
• El cuadro de diálogo de inicio de sesión de SDK for JavaScript

A. Botón "Iniciar sesión"

Para usar el botón "Iniciar sesión" de Facebook, utiliza el configurador del plugin para personalizar el botón "Iniciar sesión" y obtener el código.

B. Cuadro de diálogo de inicio de sesión de SDK for JavaScript

Para usar 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 solicitar permisos para acceder a los datos de una persona. Se puede pasar el parámetro scope 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 que tu página web pueda acceder a sus datos.

Llamada de ejemplo

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

Las respuesta (ya sea para conectarse o cancelarlo) devuelve un objeto authResponse a la devolución de llamada especificada cuando llama al método FB.login(). Esta respuesta puede detectarse y gestionarse en el método 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, adjunta la función FB.logout() del SDK para JavaScript a un botón o enlace.

Ejemplo de una llamada

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

Nota: Esta llamada a la función también puede cerrar la sesión de Facebook de la 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 se debe realizar por separado. 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 el identificador de la aplicación y {api-version} por la versión de API Graph que se va a usar. A menos que tengas una razón concreta para usar una versión anterior, especifica la versión más reciente: v9.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>

Otros recursos

• Documentación del botón "Iniciar sesión"
• Referencia de FB.login()
• Referencia de FB.getLoginStatus()
• Referencias de SDK for JavaScript