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

Este documento es una guía con los pasos para implementar el inicio de sesión con Facebook con el SDK de Facebook para JavaScript en tu página web.

Si eres usuario de Facebook y tienes problemas para iniciar sesión en tu cuenta, visita nuestro servicio de ayuda.

Antes de empezar

Necesitas lo siguiente:

Una cuenta de desarrollador de Facebook
Una app de Facebook registrada con la configuración básica realizada
El SDK de Facebook para JavaScript

Si por cualquier motivo no puedes utilizar el SDK para JavaScript, es posible desarrollar un proceso de inicio de sesión de forma manual para implementar el inicio de sesión con Facebook.

1. Ingresar la URL de redireccionamiento en el panel de apps

En el panel de apps, selecciona la app, ve a Agregar un producto y haz clic en Configurar en la tarjeta Inicio de sesión con Facebook. Selecciona Configuración en el panel de navegación de la izquierda y, en Configuración del cliente de OAuth, escribe la URL de redireccionamiento en el campo URI de redireccionamiento de OAuth válidos para obtener la autorización correcta.

2. Comprobar el estado del inicio de sesión de una persona

El primer paso, cuando se carga tu página web, es determinar si una persona ya inició sesión 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. Entonces, Facebook llama a tu función de devolución de llamada con los resultados.

Ejemplo de llamada

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

Ejemplo de respuesta JSON

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

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

Tipo de `Status`	Descripción
`connected`	La persona inició sesión en Facebook y en tu página web.
`not_authorized`	La persona inició sesión en Facebook, pero no en tu página web.
`unknown`	La persona no inició sesión en Facebook, de modo que no sabes si inició sesión en tu página web. O bien, se llamó a FB.logout() con anterioridad y no se pudo conectar con Facebook.

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

Parámetros `authResponse`	Valor
`accessToken`	Un token de acceso para la persona que usa la página web.
`expiresIn`	Una marca de tiempo UNIX que indica cuándo caduca el token. Cuando el token caduca, la persona tiene que iniciar sesión nuevamente.
`reauthorize_required_in`	El plazo, en segundos, que transcurre antes de que el inicio de sesión caduque y la persona tenga que iniciar sesión nuevamente.
`signedRequest`	Un parámetro firmado que contiene información sobre la persona que usa tu página web.
`userID`	El identificador de la persona que usa tu página web.

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

Si una persona abre tu página web pero no inicio sesión en esta o en Facebook, puedes usar el cuadro de diálogo de inicio de sesión para indicarle que inicie sesión en tu página y en Facebook. Si la persona no inició sesión en Facebook, primero se le pedirá que lo haga y después se pasará al inicio de sesión en tu página web.

Hay dos maneras en las que una persona puede iniciar sesión:

El botón Iniciar sesión con Facebook
El cuadro de diálogo de inicio de sesión del SDK para JavaScript

A. Iniciar sesión con el botón "Iniciar sesión"

Para usar el botón "Iniciar sesión con Facebook", usa nuestro Configurador del plugin para personalizar el botón "Iniciar sesión" y obtener el código.

Configurador del plugin

Width

Tamaño del botón

large

Texto del botón

continue_with

Habilitar botón para cerrar sesión

Incluir el nombre y la foto del perfil cuando el usuario inicia sesión en Facebook [?]

Obtener código

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

Para usar tu propio botón, puedes invocar 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. El cuadro de diálogo te permite solicitar autorización para acceder a los datos de una persona. Es posible 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 debe confirmar una persona para que tu página web tenga acceso a sus datos.

Ejemplo de llamada

En este ejemplo, se pregunta a la persona que inicia sesión si tu página web puede tener acceso a su perfil público y a su correo electrónico.

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

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

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

Ejemplo de 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. Hacer que una persona cierre sesión

Puedes cerrar la sesión de las personas en tu página web adjuntando la función FB.logout() del SDK para JavaScript a un botón o enlace.

Ejemplo de llamada

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

Nota: Esta llamada de función puede también cerrar la sesión de la persona en Facebook.

Escenarios que se deben tener en cuenta

Una persona inicia sesión en Facebook y, luego, inicia sesión en tu página web. Al cerrar sesión en tu app, la persona aún continúa conectada a Facebook.
Una persona inicia sesión en tu página web y en Facebook como parte del proceso de inicio de sesión de tu app. Al cerrar sesión en tu app, el usuario también cierra su sesión de Facebook.
Una persona inicia sesión en otra página web y en Facebook como parte del proceso de inicio de sesión de la otra página web y, luego, inicia sesión en tu página web. Al cerrar sesión en alguna de las dos páginas web, el usuario también cierra su sesión de Facebook.

Además, cerrar sesión en tu página web no revoca los permisos que la persona otorgó a tu página web durante el inicio de sesión. La revocación de permisos debe hacerse por separado. Desarrolla la página web de forma tal que una persona que haya cerrado sesión no vea el cuadro de diálogo de inicio de sesión cuando vuelva a iniciar sesión.

Ejemplo de código completo

Este código carga e inicializa el SDK para JavaScript en tu página HTML. Reemplaza {app-id} con el identificador de la app y {api-version} con la versión de la API Graph que se usará. A menos que tengas una razón específica para usar una versión anterior, especifica la versión más reciente: v5.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(d, s, id) {                      // Load the SDK asynchronously
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

 
  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>

</body>
</html>