Inicio de sesión con Facebook

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

En este documento, se muestran los pasos para implementar el inicio de sesión con Facebook con el Facebook SDK for 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 te muestra cómo agregar el SDK de Facebook para JavaScript y, si iniciaste sesión en Facebook, mostrará tu nombre y correo electrónico. Si no iniciaste sesión en Facebook, se mostrará automáticamente la ventana emergente del cuadro de diálogo de inicio de sesión.

El permiso public_profile , que te permite obtener información que está disponible públicamente, como el nombre y la foto de perfil, y el permiso email no requieren la revisión de apps y se otorgan automáticamente a todas aquellas apps que usan 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 apps, selecciona la app, desplázate hasta 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.

A fin de indicar que utilizarás el SDK de JavaScript para iniciar sesión, configura la opción de inicio de sesión con el SDK de JavaScript en "yes" e ingresa el dominio de la página que hospeda el SDK en la lista Dominios permitidos para el SDK para JavaScript. Esto permite que solo se devuelvan los token de acceso cuando se realizan devoluciones de llamadas en dominios autorizados. Solo se admiten páginas HTTPS en el caso de las acciones de autenticación con el SDK de Facebook para JavaScript.

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

Cuando se carga tu página web, lo primero que debes hacer es determinar si la persona ya inició sesión en tu página mediante el inicio de sesión con Facebook. Una llamada a FB.getLoginStatus inicia una llamada a Facebook con el objetivo de obtener el estado de inicio de sesión. Facebook luego 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}'
    }
}

status 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 StatusDescripció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 de authResponseValor

accessToken

Token de acceso para la persona que usa la página web.

expiresIn

Marca de tiempo UNIX que indica cuándo caduca el token. Cuando el token caduca, la persona tiene que iniciar sesión de nuevo.

reauthorize_required_in

El tiempo, en segundos, que transcurre antes de que el inicio de sesión caduque y la persona tenga que iniciar sesión de nuevo.

signedRequest

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

userID

El identificador de la persona que usa la 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.

3. Solicitar a una persona que inicie sesión

Si una persona abre tu página web pero no inició sesión en la página 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, que inicie sesión en tu página web.

Una persona puede iniciar sesión de alguna de estas dos maneras:

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

Para usar el botón de inicio de 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
Texto del botón
Forma del botón "Diseño"
[?]
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 de inicio de sesió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 permiso 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. Para el inicio de sesión con Facebook, se requiere el permiso public_profile avanzado, que utilizarán usuarios externos.

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, ya 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 administrar 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. Cerrar la sesión de una persona

Para cerrar la sesión de una persona en tu página web, asocia la función FB.logout() del SDK de JavaScript a un botón o un 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 Facebook de la persona.

Situaciones que se deben tener en cuenta

  1. Una persona inicia sesión en Facebook y, luego, inicia sesión en tu página web. Cuando una persona cierra la sesión de tu app, continúa conectada a 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 tu app. Al cerrar sesión en tu app, el usuario también cierra su sesión de 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 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} por el identificador de la app y {api-version} por la versión de la API Graph que se usará. A menos que tengas un motivo específico para usar una versión anterior, especifica la versión 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