Con la popularidad obtenida en los últimos años de las redes sociales, se ha vuelto igual de popular para los Sitios Web / Sistemas de Información dar la opción a los usuarios de iniciar sesión utilizando su cuenta de Facebook, Google+, Windows Live, Linkedin, etc…. Permitiendo esto, evitar al usuario tomarse tiempo para crear una nueva cuenta en el sitio y tener que recordar un usuario y contraseña mas.
Para los desarrolladores, la tentación de utilizar estos métodos que yo llamo “Externos” es demasiada, ya que permite evitarte el modulo de autenticación que no es cualquier cosa, además ya no tendrás en tus bases de datos nombres de usuarios y contraseñas, información sumamente valiosa y que para algunos puede ser un alivio no tener que lidiar con esta información.
El inconveniente de utilizar estos métodos, podría ser que algún usuario no cuente con una cuenta en estas redes sociales, ¡Si!, es posible que alguien no cuente con un perfil de Facebook, es por eso que la recomendación es la de combinar los servicios mas populares, Facebook, Google y Windows Live, y si aun así no se esta seguro, se puede implementar el modulo de registro propio.
En esta primera parte describiremos el proceso de autenticación mediante Facebook utilizando el SDK para JavaScript, este funciona mediante el estándar OAuth que también podría ser implementado desde algún lenguaje de servidor si así se necesitara.
Requisitos:
- Un App Id, este identificador de aplicación se generará automáticamente al crear una aplicación en Facebook Developers.
- Un lugar donde hospedar tus archivos HTML, es necesario que tus archivos puedan ser accesibles desde una url, por lo que tendrás que utilizar un servidor web.
Comencemos a programar:
Paso 1: Agregar/Cargar el SDK de Facebook
<head>
<script src=”//connect.facebook.net/en_US/all.js”></script>
<head>
Paso 2: Agregar referencia a JQuery API
<script src=”http://code.jquery.com/jquery-1.10.1.min.js”></script >
Paso 3: Inicializar SDK
Utilizamos la función ready de JQuery para inicializar el SDK de Facebook, utilizando la función FB.init con los parámetros appId, status y xfbml.
<script>
$(“document”).ready(function () {
FB.init({
appId: ‘111111111111111’, // App ID
status: true,// revisa el estatus del login
xfbml: true // muestra el botón login
});
});
<script/ >
Paso 4: Agregar botón de login
Dentro del <body>, agregar los siguientes divs.
<div id=”fb-root”></div>
<fb:login-button show-faces=”false”></fb:login-button>
Estos div son tomados por el SDK para construir el botón de Login. Quedando algo así: 
Paso 5: Adjuntar un manejador para el evento auth.statusChange
Este manejador estará escuchando el evento statusChange, el cual se dispara cuando exista un cambio en el status del usuario, los tres ocasiones en que este evento se disparará son:
- En el inicio de Sesión (Login)
- En el cierre de Sesión (Logout)
- En el refrescado de la Sesión
Para adjuntar este evento tenemos que utilizar el método FB.Event.subscribe, el cual implementa un Callback donde me regresa la información del estatus actual del usuario. Esta acción tendrá que estar dentro del método ready de JQuery.
FB.Event.subscribe(‘auth.statusChange’, OnLogin);
Paso 6: Implementar el callback del evento
Aquí podemos tener tres posibles valores de estatus:
- Conectado (connected), si el usuario esta logueado a Facebook y autorizo tu aplicación
- No Autorizado (not_authorized), si el usuario esta logueado a Facebook pero no autorizo tu aplicación.
- Desconocido (Unknow), si no se sabe si el usuario esta logueado a Facebook.
function OnLogin(response) {
//Si el estatus es conectado.
if (response.status === ‘connected’) {
//Si el estatus es no autorizado
} else if (response.status === ‘not_authorized’) {
//Si es desconocido
} else {
}
}
Hasta aquí, Facebook solamente nos da la información del estatus, es decir, solo podemos saber si el usuario se autentico, autorizo o no esta conectado, en esta parte no tenemos acceso a ninguna información del perfil del usuario.
Para lograr acceder a la información del perfil, el usuario debe tener un estatus de connected, solo entonces podemos acceder a su información usando el método FB.api, esta implementa un callback en el cual Facebook regresa la información del perfil dentro de un objeto de tipo Usuario
if (response.status === ‘connected’) {
FB.api(‘/me’, function(response)
{
$(“#nombre”).html(response.first_name + ” “+response.last_name);
$(“#correo”).html(response.email);
$(“#miPagina”).html(response.link);
var perfil=”https://graph.facebook.com/”+response.username+”/picture?type=large”;
$(“#imagen”).attr(‘src’, perfil);
});
}
Luego de esto, es responsabilidad del desarrollador implementar el submodulo de Autorización dentro del sitio.
Customizar el botón de Login
Si se desea que el botón de login tenga un estilo mas personal, podemos prescindir de la construcción que el SDK hace automáticamente y podemos agregar nuestro HTML propio. Supongamos que queremos un botón redondo.
<!– HTML –>
<div id=”miBotonFB”></div>
//CSS
<style type=”textcss”>
#miBotonFB{
width:30px;
height:30px;
background-color:#6178AC;
margin: 5px;
padding:10px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
font-size:11px;
line-height:32px;
text-transform: uppercase;
float:left;
}
#miBotonFB a
{
color:#fff;
text-decoration:none;
font-size:19pt;
padding:10px 10px 10px 0;
}
</style>
<!– Agregar funcionalidad –>
<div id=”miBotonFB” onclick=”FB.login(); ></div>
Listo!! , tenemos nuestro botón customizado funcionando junto con la autenticación por medio de Facebook.
Gracias