Tener tu cuenta de usuario en un sitio o servicio en particular es lo máximo. Te permite guardar tus preferencias, obtener beneficios especiales y personalizar tu experiencia. Sin embargo, recordar tantas contraseñas distintas, para tantos lados distintos (a no ser de que seas como nosotros, y uses las mismas contraseñas para todo, almacenadas en un archivo con contraseña, que es la misma (?)) puede convertirse en algo tedioso.
Afortunadamente en la actualidad, contamos con una herramienta muy útil que ayuda a hacer este proceso mucho más fácil, una autentificación a través de Facebook, en la cual los usuarios pueden registrarse e ingresar a nuestro sitio usando su cuenta de Facebook, sin la necesidad de tener una cuenta independiente.
¿Cómo implementarlo? Muy sencillo, pero el detalle, como siempre, después del salto.
Tiene beneficios tanto para los usuarios, como para ti, creador de un sitio o servicio. Por nombrar algunos:
Para los usuarios:
Para los creadores de sitios o servicios:
1.- Lo primero que debemos hacer es crear una app en el sitio de desarrolladores de Facebook, ingresando con nuestra cuenta de usuario normal.
2.- Luego de ingresar, vamos al menú Apps > Create a New App, lo que abrirá un cuadro para ingresar la información de la nueva app que queremos crear:
3.- Ahí debemos completar la información, específicamente:
Completamos todo y hacemos click en Creación de aplicaciones. Si está todo correcto, la app se creará y veremos el resumen con la información de la aplicación.
Esto lo dejamos ahí momentáneamente, y luego volveremos a buscar esos datos.
4.- Ahora abrimos nuestro editor Web favorito, y creamos una página nueva, o bien buscamos la página donde queremos insertar el ingreso vía Facebook. Si creamos desde cero, partimos por hacer la estructura de la página y agregamos el siguiente código:
<!DOCTYPE html> <html> <head> <title>Ejemplo Login con Facebook</title> </head> <body> </body> </html>
5- Con la estructura creada, vamos a ir incorporando el SDK de Facebook para integrar el ingreso. Lo primero que haremos para esto, será agregar e inicializar el SDK de Facebook, agregando este código antes de la etiqueta </head>:
<script> (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 = "http://connect.facebook.net/es_ES/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); window.fbAsyncInit = function() { FB.init({ appId : 'id de tu app', cookie : true, xfbml : true, version : 'v2.0' }); } </script>
El código anterior, que dividimos en 2 partes, primero agrega el SKD de Facebook a nuestro sitio, y luego lo inicializa con los datos de nuestra app. De todos los parámetros que se manejan, solo debemos encargarnos de cambiar 1, el appId. ¿De dónde sacamos este dato?, de la interfaz de información de la app que creamos recién:
Tomamos ese número, y lo reemplazamos en la propiedad appId de la función anterior.
6.- Ahora que tenemos el SDK agregado e inicializado, vamos a incorporar una acción que se encargue de gatillar el proceso de ingreso para el usuario. Para esto, vamos a necesitar 2 cosas:
Vamos con lo primero:
Para esto, tenemos dos posibilidades: Usar un botón propio, o usar el botón oficial de Facebook.
a) Usando el botón oficial de Facebook:
Facebook nos entrega un botón oficial, que es tremendamente fácil de implementar y da varias ventajas, ya que nos permite tanto tener un botón con los colores y el logo de Facebook, como tener el comportamiento implementado automáticamente al hacer click. Para agregar, solo incorporamos el siguiente código entre las etiquetas <body> y </body>:
<fb:login-button scope="public_profile,email" onlogin="validarUsuario();"></fb:login-button>
Al guardar y revisar la página, veremos algo como esto:
Ahora, si revisamos el código, podemos ver que tiene 2 parámetros adentro que llaman la atención. Específicamente scope y onlogin:
Si hacemos click en el botón, es muy probable que veamos esto:
Esto es porque debemos asociar un dominio de uso a la app que creamos, y una plataforma de uso. Para esto, vamos nuevamente al sitio de desarrolladores de Facebook, y en el perfil de la App, seleccionamos Settings:
Y luego, agregamos un dominio a la app, y una plataforma, que en este caso será Website:
Nota: El domino que debemos agregar debe ser válido para hacer pruebas. Una implementación local (con localhost), no servirá.
Adicionalmente, debemos ir a la sección Status & Review y activar la app para que esté disponible:
Ya con el dominio agregado correctamente y la app activada, probamos de nuevo el botón, y deberíamos ver algo como esto:
b) Usando nuestro propio botón:
Tal como Facebook nos entrega un botón, nosotros podemos usar uno propio y personalizarlo de la forma que más nos guste. Para este ejemplo, vamos a usar uno básico, solo para demostrar que con cualquiera es posible. Para eso, agregamos este código entre las etiquetas <body> y </body>:
<button onclick="ingresar();">Ingresar con Facebook</button>
Agregamos un botón simple y le indicamos que cuando hagan click, llame a una función (que agregaremos a continuación) llamada ingresar. Esta función llamará a su vez a una función del SDK de Facebook llamada FB.login, a la cual le pasaremos el scope, ya que al no usar el botón propio de Facebook no lo estamos entregando por defecto. Añadiremos lo siguiente entre las etiquetas <script> y </script> a continuación de donde agregamos e inicializamos el SDK:
function ingresar() { FB.login(function(response){ validarUsuario(); }, {scope: 'public_profile, email'}); }
Al igual que en el caso anterior, vamos a llamar a una función una vez que pase el proceso de ingreso (exitosamente o con errores), para manejar el resultado. De todas maneras, ya con el objeto que nos devuelve (el response) podemos hacer algunas operaciones, pero para unificar con el ejemplo anterior, iremos a esa función validarUsuario.
Y con eso, ya tenemos el proceso de lanzamiento de ingreso y autorización listo, por lo que nos faltaría ver que hacer una vez que el usuario autorice (o no) a la aplicación. Así que agregaremos el siguiente código, a continuación de la función ingresar.
function validarUsuario() { FB.getLoginStatus(function(response) { if(response.status == 'connected') { alert('Bienvenido!'); } else if(response.status == 'not_authorized') { alert('Debes autorizar la app!'); } else { alert('Debes ingresar a tu cuenta de Facebook!'); } }); }
Dentro de la función validarUsuario, llamamos a la función FB.getLoginStatus, la cual retorna un objeto llamado response, el cual tiene un atributo llamado status, que contiene el estado del ingreso. Este atributo puede tomar 3 valores:
Ahora que ya tenemos habilitada la autentificación, vamos a hacer un paso más, en el cual vamos a rescatar información si es que el usuario autorizó la app y mostraremos una alerta. Para eso modificamos un poco el código anterior, y ahora en caso de éxito llamaremos a la función FB.api y recuperaremos la información del usuario:
function validarUsuario() { FB.getLoginStatus(function(response) { if(response.status == 'connected') { FB.api('/me', function(response) { alert('Hola ' + response.name); }); } else if(response.status == 'not_authorized') { alert('Debes autorizar la app!'); } else { alert('Debes ingresar a tu cuenta de Facebook!'); } }); }
Podemos ver que dentro del estado ‘connected’, agregamos una llamada a la función FB.api, la cual retorna un objeto response, que tiene la información del usuario como atributos, por lo que levantamos una alerta muy sencilla con el atributo name del objeto:
Y así mismo podemos rescatar el resto de la información y hacer las operaciones que necesitemos: crear una sesión, guardar un registro propio, etc.
En resumen, el código completo:
<!DOCTYPE html> <head> <title>Ejemplo FB</title> <script> (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 = "http://connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); window.fbAsyncInit = function() { FB.init({ appId : 'id de tu app', cookie : true, xfbml : true, version : 'v2.0' }); } function ingresar() { FB.login(function(response){ validarUsuario(); }, {scope: 'public_profile, email'}); } function validarUsuario() { FB.getLoginStatus(function(response) { if(response.status == 'connected') { FB.api('/me', function(response) { alert('Hola ' + response.name); }); } else if(response.status == 'not_authorized') { alert('Debes autorizar la app!'); } else { alert('Debes ingresar a tu cuenta de Facebook!'); } }); } </script> </head> <body> <fb:login-button scope="public_profile,email" onlogin="checkLoginState();"> </fb:login-button> <button onclick="ingresar();">Ingresar con Facebook</button> </body> </html>
Y con eso ya tenemos nuestro proceso de autentificación listo, así que ahora a personalizar e implementar en lo que necesitemos.
Antes de terminar, les recordamos que como siempre, este tutorial ha sido desarrollado, probado y documentado por el equipo de CLH, por lo que cuenta con nuestro Sello de Garantía:
Cualquier duda y/o comentario, pueden dejarnos unas líneas a continuación.
Esperamos que este tutorial haya sido de utilidad para Uds.
¡Hasta la próxima!
7:39:28 pm
Charlamos de unos ciento quince trabajadores, he pensado en una máquina con tarjetas, el inconveniente es que me imagino que se las
pasarían entre los trabajadores. Esta es la tecnología mas actual y recomendable para un Reloj Checador con Huella Digital y Control de Acceso.
1:19:53 pm
Ok ta muy bien, sin embargo como hago para hacer el callback a mi sitio ..??
3:52:11 pm
se podrá implementar en angular 8?
3:54:57 pm
se podrá realizar en angular 8?
12:51:51 pm
Buenas, como puedo obtener la foto del perfil del usuario que ingrese por medio del botón de facebook? sería de mucha utilidad… Gracias..
4:25:40 pm
Hola amigo, llegaste a implementar lo que estas pidiendo, porque quiero hacer lo mismo… si es posible me respondes
gracias