Facebook facebook connect HTML Javascript js login with facebook
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!
12:30:00 pm
hola, uan consulta que valoredes devuelve response
ejemplo mostrar nombre: response.name
que valores mas devuelve o dodne miro eso gracias
espero una respuesta saludos…
8:27:50 pm
@henry: Dependerá del scope que incluyes al momento de hacer la solicitud de permisos y los datos que pidas al hacer la consulta a la API (la correspondiente a /me). Hay una herramienta que te permita emular las llamadas y ver que retorna y que datos puedes pedir. La puedes encontrar acá: https://developers.facebook.com/tools/explorer
Cualquier cosa no dudes en avisarnos. Saludos!
11:36:56 am
Hola que tal? Desde ya gracias por el tutorial. Lo probé y funciona. Lo que quisiera hacer yo es que la gente se registre en mi sitio a través de facebook. Tengo un sitio hecho en php, mysql y html5. Tiene un sistema de registro, pero necesito que la gente pueda hacerlo con facebook, y luego hacer login con facebook para acceder a ciertas partes del sitio reestringidas. Entonces por un lado, hacer un registro via facebook que se comunique con mi propia base de datos, y hacer un login con facebook. Otra cosa que me gustaria es hacer un boton con logout, que en el ejmplo solo está hecho el login.
Agradeceria mucho si me pueden poner un ejemplo de cómo aplicarlo.
Saludos,
Daniel.
7:53:24 am
Buenas tardes faltaría el recoger los datos de usuario:id,nombre y paword…en una base de datos.me podrías indicar los pasos a seguir para hacerlo?muchas gracias.
1:15:43 am
bien
5:55:12 pm
falta
1:54:33 am
esta bien el tuto…
5:53:49 pm
le falta
2:02:39 am
falta mandar los datos a la base de datos
4:35:30 pm
Muchachos, el tutorial les muestra como obtener los datos desde facebook. Está en ustedes ver como hacer para tomar esos datos y meterlos en sus bases de datos. Personalmente me resulta enviar esos datos a un archivo PHP por un submit, tomar esos datos y guardarlos en la DB con consultas SQL.
Lo que me gustaría saber es como puedo cerrar esa sesión de la API desde mi web. En otras palabras, así como inicié sesión con un botón me gustaría cerrarla automáticamente, ya que ese inicio de sesión no es más que una consulta a la base de datos de facebook, pero me deja seteado algo (no se si es un cookie , o una sesión en el navegador).