Inicio de sesión con Facebook

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:

Ejemplo de inicio de sesión automático básico

El siguiente ejemplo de código muestra cómo añadir el SDK de Facebook para JavaScript a tu página web y cómo inicializarlo. Si tienes la sesión iniciada en Facebook, mostrará tu nombre y tu correo electrónico. Si no tienes la sesión iniciada en Facebook, la ventana emergente del cuadro de diálogo de inicio de sesión se mostrará automáticamente.

El permiso public_profile , que te permite obtener información pública como el nombre y la foto de perfil, y el permiso email no requieren la revisión de la aplicación y se conceden automáticamente a todas las aplicaciones que usen el inicio de sesión con Facebook. 

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>

    <h2>Add Facebook Login to your webpage</h2>

      <!-- Set the element id for the JSON response -->
    
      <p id="profile"></p>

      <script>
  
        <!-- Add the Facebook SDK for Javascript -->
  
        (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 = "https://connect.facebook.net/en_US/sdk.js";
                              fjs.parentNode.insertBefore(js, fjs);
                            }(document, 'script', 'facebook-jssdk')
        );


        window.fbAsyncInit = function() {
            <!-- Initialize the SDK with your app and the Graph API version for your app -->
            FB.init({
                      appId            : '{your-facebook-app-id}',
                      xfbml            : true,
                      version          : '{the-graph-api-version-for-your-app}'
                    });
            <!-- If you are logged in, automatically get your name and email adress, your public profile information -->
            FB.login(function(response) {
                      if (response.authResponse) {
                           console.log('Welcome!  Fetching your information.... ');
                           FB.api('/me', {fields: 'name, email'}, function(response) {
                               document.getElementById("profile").innerHTML = "Good to see you, " + response.name + ". i see your email address is " + response.email
                           });
                      } else { 
                           <!-- If you are not logged in, the login dialog will open for you to login asking for permission to get your public profile and email -->
                           console.log('User cancelled login or did not fully authorize.'); }
            });
        };

      </script>

  </body>
</html>

1. Activar el SDK para JavaScript para el inicio de sesión con Facebook

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.

Para indicar que utilizas el SDK de JavaScript para el inicio de sesión, configura el botón Inicio de sesión con el SDK para JavaScript en “sí”. Después, introduce el dominio de la página que aloja el SDK en la lista de dominios permitidos para el SDK para JavaScript. Esto garantiza que los identificadores de acceso solo responderán a las devoluciones de llamada de los dominios autorizados. Solo se admiten páginas HTTPS para las acciones de autenticación con el SDK de Facebook para JavaScript.

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 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:

Tipo de StatusDescripción

connected

La persona ha iniciado sesión en Facebook y en tu página web.

not_authorized

La persona ha iniciado sesión en Facebook, pero no en tu página web.

unknown

La persona no ha iniciado sesión en Facebook, de modo que no sabes si lo ha hecho en tu página web. O bien, se llamó a FB.logout() antes, lo que impide conectarse a Facebook.

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

Parámetros de authResponseValor

accessToken

Identificador de acceso de la persona que usa la página web.

expiresIn

Marca de tiempo UNIX que indica cuándo caduca el identificador. Una vez que caduca el identificador, la persona tiene que volver a iniciar sesión.

reauthorize_required_in

Período de tiempo antes de que caduque el inicio de sesión y la persona necesite volver a iniciar sesión, en segundos.

signedRequest

Parámetro firmado que contiene información sobre la persona que usa la página web.

userID

Identificador de la persona que usa la página web.

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:

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.

Configurador del plugin

Width
Tamaño del botón
Texto del botón
Forma del diseño del botón
[?]
Obtener 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. El inicio de sesión con Facebook requiere que los usuarios externos usen el permiso avanzado public_profile.

Ejemplo de 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 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 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 no ser que tengas un motivo concreto para usar una versión anterior, especifica la más reciente: v21.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