Login con Facebook para tu sitio

A veces necesitamos obtener los datos del usuario de nuestra aplicación, por ejemplo, para que se suscriba a nuestro newsletter o que encargue un producto de nuestra tienda online. Lo normal es que complete un formulario con su nombre, apellido, email, fecha de nacimiento… Pero, ¿no sería mejor obtener esos datos y más directamente desde su cuenta de Facebook?

Hoy vamos a aprender a usar Facebook Login: una herramienta para que nuestras visitas puedan ingresar a nuestro sitio con su cuenta de Facebook. Vamos a tomar como ejemplo una tienda online y utilizar un poco de HTML, Javascript y jQuery; por lo que es un ejercicio perfecto para principiantes. ¡Adelante!

1. Creamos la aplicación en Facebook

El primer paso es crear una aplicación en Facebook con los datos de nuestro sitio. Para eso ingresamos en el Facebook App Dashboard y hacemos click en “Crear nueva aplicación”.

Vamos a completar el siguiente formulario, donde indicamos:

  • El nombre de la app (por ejemplo, Beta Shop)
  • La URL en Facebook (por ejemplo, facebook.com/beta_shop)
  • Y la categoría (por ejemplo, Compras)

Facebook App

No se preocupen mucho por estos datos. Si bien son requeridos no son vitales para lo que vamos a implementar. Lo más importante es el nombre que elegimos, para que nos represente bien.

A continuación, veremos la configuración general de nuestra aplicación. Como queremos utilizar Facebook Login, vamos a completar dos cosas:

  • En App Domains, escribimos el dominio de nuestra web (por ejemplo, betashop.com.ar)
  • Y en URL del sitio, ingresamos la URL completa (por ejemplo, http://betashop.com.ar)

Facebook App

El resto de la configuración pueden dejarla tal como está, no necesitamos nada más.

Bien, esto nos vá a servir para obtener una Application ID: un código que identifica nuestra aplicación en Facebook y que nos va a permitir utilizar su API.

Facebook App

Lo copiamos y pasamos al paso siguiente: programar el login en nuestro sitio.

2. Manos al código

Creamos el HTML

Vamos a crear una página HTML muy sencilla. Ponemos un mensaje para que el usuario sepa que para continuar debe loguearse con Facebook.

<p>Iniciar sesi&oacute;n con Facebook:</p>

Luego, insertamos un botón de Facebook, con esta sintaxis particular:

<fb:login-button perms="email,user_birthday"></fb:login-button>

Esto no es HTML si no XFBML, una sintaxis especial que nos permite insertar en nuestras páginas botones y elementos funcionales de la interfaz de Facebook. Si se fijan, la propiedad perms incluye email y user_birthday, para pedirle permiso al usuario a obtener estos datos adicionales. Ya veremos pronto como todo esto se pone en acción.

Cargamos las librerías

Como vamos a utilizar jQuery, vamos a incluirlo desde su CDN.

<script src="//http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>

Y vamos a utilizarlo para cargar de forma asincrónica el Facebook Javascript SDK que, como su nombre lo indica, sirve para poder utilizar las funciones de Facebook desde Javascript.

$.ajax({
  url: '//connect.facebook.net/es_ES/all.js',
  dataType: 'script',
  cache: true,
  success: function() {
    alert('Facebook listo');
  }
});

Si vimos el mensaje, entonces tanto jQuery como la librería de Facebook cargaron perfectamente.

Por ahora, entonces, el código es el siguiente:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Beta Shop</title>
</head>
<body>
<p>Iniciar sesi&oacute;n con Facebook:</p>
<fb:login-button perms="email,user_birthday"></fb:login-button>
<script src="//http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function() {
  $.ajax({
    url: '//connect.facebook.net/es_ES/all.js',
    dataType: 'script',
    cache: true,
    success: function() {
      alert('Facebook listo');
    }
  });
});
</script>
</body>
</html>

Y ahora, el API de Facebook

Después de tanta preparación, es hora de ponerlo en marcha. Lo hacemos con la función FB.init, seteando los siguientes parámetros:

FB.init({
  appId: '180901918757485',
  xfbml: true
});

En appId ingresamos el identificador de nuestra app, y con xfbml en true habilitamos el uso de botones y otros elementos de Facebook, como el botón del que hablamos antes.

A continuación, vamos a suscribir nuestro script al evento auth.authResponseChange, que se dispara cada vez que la página cargue o se complete un login.

Si obtenemos una respuesta satisfactoria, mostramos el mensaje “Usuario conectado”:

FB.Event.subscribe('auth.authResponseChange', function(response) {
  if (response && response.status == 'connected') {
    alert('Usuario conectado');
  }
});

Si vemos ese mensaje, entonces significa que el usuario se ha autenticado y otorgado a nuestra aplicación el permiso para obtener sus datos.

Entonces, tenemos el permiso, pero… ¿cómo obtenemos los datos? Utilizando el API de Facebook con la función FB.api. Le pasamos dos parámetros:

  • La URL de la llamada a consultar, en este caso /me para obtener los datos del usuario logueado
  • Y el callback a ejecutar sobre los datos recibidos

Es decir:

FB.api('/me', function(data) {
  alert('Nombre: ' + data.name);
});

¿Que es data? La respuesta del servidor, un JSON con todos los datos del usuario. Así como el nombre, obtuvimos el apellido, el ID y todos los datos que el usuario haya hecho públicos, como su lugar de residencia o puesto laboral. Y también su fecha de nacimiento y dirección de email, por los permisos adicionales que pedimos.

Entonces, data será algo como:

{
  "id": "100003337804280",
  "name": "Juan Sequeira",
  "birthday": "01/02/1985",
  "gender": "male",
  "link": "https://www.facebook.com/juansequeira",
  "email": "juansequeira@hotmail.com"
}

Perfecto, tenemos el código completo:

$(function() {
  $.ajax({
    url: '//connect.facebook.net/es_ES/all.js',
    dataType: 'script',
    cache: true,
    success: function() {
      FB.init({
        appId: '280437052062374',
        xfbml: true
      });
      FB.Event.subscribe('auth.authResponseChange', function(response) {
        if (response && response.status == 'connected') {
          FB.api('/me', function(response) {
            alert('Nombre: ' + data.name);
          });
        }
      });
    }
  });
});

Ahora sólo nos queda probar si funciona.

3. ¡Login!

Vamos a ver si todo marcha tal como lo esperamos. El usuario va a ver en nuestra página:

login01

Al hacer click en “Entrar”, se abre una ventana pop-up como la siguiente:

login02

Ingresa en su cuenta de Facebook y decide si acepta a nuestra aplicación, Beta Shop.

login03

Luego de aceptar, se dispara el evento que habíamos programado: obtener sus datos y mostrar su nombre en pantalla.

login04

¡Hecho!

En resumen

Facebook Login es una excelente opción para obtener los datos de tus visitantes, sin obligarlos a llenar formularios, verificar su cuenta de correo y todas esas cosas engorrosas.

En un click, el usuario ya está utilizando nuestro sitio y nosotros tenemos toda la información que necesitamos, para guardarla, analizarla y personalizar su experiencia en nuestra aplicación.

Incluso, podemos pedir permisos más avanzados para obtener su listado de amigos o publicar en su muro. Facebook ofrece herramientas muy poderosas, pero… todo poder conlleva una gran responsabilidad, no usen esos datos de forma irresponsable. El usuario confió en nosotros, sus datos deben ser bien cuidados.

En próximas ediciones, vamos a ver cómo hacer todavía más con el API de Facebook. ¡Nos leemos pronto!

Compartí este artículo

4 Comentarios

  1. butanda – 01 nov 2016 (02:10:42)

    hola. no me funciona.
    lo hice exactamente igual y me sale error en la ventana emergente
    ademas la api ya se actualizo cambio un poco

  2. Stanley – 02 nov 2016 (14:33:58)

    Hola amigo excelente post, te hago una consulta, este plugin también puede ser usado en paginas con url dinámicos, por ejemplo estoy intentando agregar ese plugin a esta url “m.easymenu.ws/4/26/6″ donde lo parámetros varían, y me devuelve un error. Saludos.

  3. butanda and Stanley – 03 nov 2016 (01:32:10)

    el boton de entrar no aparece!

  4. ste men – 03 nov 2016 (01:50:21)

    hola. Me salio todo bien pero no me salio la alerta “alert” v:

Dejá un comentario

 

Ingreso Clientes

Datos incorrectos. Por favor revisa el e-mail y la contraseña.

Ingresaste correctamente.

Olvidé mi contraseña

Cerrar

Recuperar contraseña

Te llegará un correo con la información acerca de como proceder.

Volver

Cerrar