Micaela 31 de julio de 2009 a las 09.03
   Imprimir artículo
elWebmaster.com

Autenticaci贸n de usuarios con Facebook Connect y Google Friend Connect


facebook-google-connectEn el auge de las redes sociales, la mayoria de las mismas han incorporado herramientas API que le permiten casi a cualquier otro sitio web autenticar usuarios a trav茅s de su sistema.

En esta nota aprender谩s a utilizar estas herramientas para nuestra web. Mediante un simple modelo de comentario, los usuarios aprender谩n c贸mo dejar un comentario dentro de su perfil de Facebook o Google.

La aplicaci贸n

Tenemos una p谩gina HTML est谩tica, muy simple, que muestra una foto y permite a los usuarios realizar comentarios sobre la misma.

# index.php

<div class=”new-comment”>
<h2 class=”sub-title”>Add A Comment</h2>

<form action=”php/savecomment.php” id=”comment-form” method=”post”>
<div id=”userbox” style=”display:none;”></div>

<div id=”userinfo”>

Name: <input id=”name” name=”name” type=”text” />
<input id=”url” name=”url” type=”hidden” />
<input id=”image” name=”image” type=”hidden” />

</div>

<div class=”comment”>
Comment:<br />
<textarea id=”comment” name=”comment”></textarea>
</div>
<input type=”submit” value=”Send Comment” />
</form>

</div>

Aqu铆 se puede ver que tenemos un formulario b谩sico con cuatro campos:聽 nombre, url, imagen y comentario. Hemos decidido ocultar los campos de la url y la imagen porque 茅sta es informaci贸n que obtendremos desde Facebook y Google Friend Connect. El formulario es enviado a un archivo PHP, savecomment.php, que se incluye en la descarga. En esencia, toma toda la informaci贸n por Post y la almacena en un archivo de informaci贸n de comentarios existente con caracteres pipe, “|”, separando cada campo. Un poco antes del formulario listamos todos los comentarios de ese archivo incluyendo otro script PHP, readcomments.php.

Necesitamos ver esta 煤ltima parte del c贸digo que incluye el Javascript. Toda nuestra autenticaci贸n se realiza del lado del cliente, por lo que hemos creado application.js para mantener al c贸digo responsable por ello.

# index.php

<div class=”comments”>
<h2 class=”sub-title”>Comments</h2>

<?php include(“php/readcomments.php”); ?>
</div>

# index.php

<head>

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
<script src=”./js/application.js” type=”text/javascript”></script>
</head>

Actualizar la p谩gina para que muestre la informaci贸n del usuario

Despu茅s de crear esto, vamos al archivo application.js antes mencionado. Decidimos que ser铆a mejor crear una funci贸n para cada servicio que envuelva la l贸gica requerida en la autenticaci贸n. Luego de crearlas, hemos extraido el c贸digo com煤n para mantener el c贸digo conciso. Luego de crear el archivo declaramos una funci贸n llamada update_userbox()

# application.js

//Generic updates #userbox with info retrieved
//from services
function update_userbox(name, image, url, logout) {

//populate the data in #userbox and show it
$(‘#userbox’).html( “<a href='”+url+”‘>”
+ “<img alt='”+name+”‘ src='”+image+”‘ />”
+ “Logged in as ” + name + “</a> ”
+ “(<a href=’./index.php’ onclick='” + logout + “‘>logout</a>)” ).show();

//hide name input and service
//login buttons
$(‘#userinfo’).hide();

//populate the values of the inputs
//using data from service
$(‘#name’).val(name);
$(‘#url’).val(url);
$(‘#image’).val(image);

}

Esta funci贸n es gen茅rica y se puede utilizar con cualquiera de los servicios. El prop贸sito que tiene es insertar HTML en un div vac铆o llamado #userbox para que el usuario tenga un entendimiento visual de que se ha loggeado a un servicio. Esto se logra escondiendo la caja de nombre, y mostrando una imagen de perfil del servicio remoto junto con su nombre y un link para desloggearse del servicio. Tambi茅n “detr谩s de escena” completamos las entradas de nombre, url e imagen para que sean enviadas al servidor junto con el comentario y as铆 guardarlas en nuestro archivo de base de datos. Esto se logra pasando cuatro variables:

  • nombre: el nombre de usuario que le dieron al sistema
  • imagen: una url a la imagen del perfil del usuario
  • url: una url al perfil del usuario en ese servicio
  • logout: una cuerda de c贸digo JS que se ejecuta cuando “desloggearse” es presionado

Facebook Connect -Obteni茅ndo tu clave API

Empezaremos con Facebook Connect. Lo primero que necesitamos es crear una aplicaci贸n en el sitio de Desarrolladores Facebook. Esto es s贸lo para recibir la clave API y poder registrar nuestras URLs dentro de su programa de desarrolladores.

Luego de haber creado la aplicaci贸n necesitamos editar algunas propiedades, en el lado izquierdo de la pantalla ver谩s pesta帽as, haz clic en Connect. Aqu铆 necesitas ingresar la URL Connect que es la URL d贸nde existe la ruta de tu sitio. Es recomendable subir alguna imagen para tener alguna marcaci贸n visual.

Ahora puedes guardar estos cambios y te llevar谩 a la p谩gina resumen de la aplicaci贸n. Aqu铆 es donde podemos encontrar la clave API de la aplicaci贸n, as铆 que c贸piala en tu portapapeles.

A帽adiendo el recibo de un dominio cruzado

Facebook hizo la arquitectura de su connect API de tal forma que trabaja por completo del lado del cliente. Este tutorial no requiere c贸digo del lado del servidor para autenticar a los usuarios. Esto se logra a trav茅s de algunas t茅cnicas AJAX en las que Facebook pasa informaci贸n a trav茅s de iframes para enga帽ar la misma pol铆tica de origen implementada por la mayor铆a de los navegadores. Parte de este proceso requiere que coloquemos un archivo en nuestro servidor con el que Facebook pueda interactuar para verificar nuestra identidad. As铆 que en el nivel superior de tu dominio debes crear un archivo llamado xd_receiver.html e insertar el siguiente c贸digo:

# xd_receiver.html

<pre name=”code” class=”html”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<body>
<script src=”http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js” type=”text/javascript”></script>
</body>
</html>
</pre>

El bot贸n de Facebook Connect

En Facebook necesitamos incluir un archive JS del sitio Facebook y correr la funci贸n init() en nuestro archivo index.php al final, justo antes de la etiqueta </body> que cierra.

# index.php

<!– Facebook API Includes –>
<script src=”http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php” type=”text/javascript”></script>
<script type=”text/javascript”>
FB.init(“FB_API_KEY”, “xd_receiver.htm”, {“ifUserConnected” : auth_using_fb});
</script>

Hay algunas cosas que debemos mirar en esta funci贸n. Primero, aseg煤rate de reemplazar FB_API_KEY con tu clave API. Luego tenemos un string que representa el camino a nuestro archivo receptor de dominio cruzado, que deber铆a estar en la ruta de nuestro directorio de aplicaci贸n. Finalmente, podemos programar una gran cantidad de opciones. Como deseamos mantener el loggeo de los usuarios le decimos a Facebook que corra la funci贸n auth_using_fb (la crearemos en unos momentos) si el usuario ya se encuentra conectado a nuestro sitio. Esto quiere decir que si el usuario vuelve a cargar la p谩gina lo seguir谩 mostrando como loggeado para que no tengan que volver a registrarse en cada p谩gina.

A continuaci贸n tenemos que crear el bot贸n de login, esto requiere utilizar XFBML, Facebook Markup Language el cual es una extensi贸n a HTML. La X denota c贸digo que est谩 insertado en websites de terceros y no en Facebook. En alg煤n lugar de la p谩gina debemos insertar la etiqueta Fb:login-button y algunas opciones.

<fb:login-button length=”long” onlogin=”auth_using_fb();”></fb:login-button>

Noten que tenemos dos atributos: length y onlogin. Length nos permite especificar el texto del bot贸n y posee dos opciones: corto (la que viene por defecto) y largo. La opci贸n “corto” dice Connect y “largo” dice Connect with Facebook. Onlogin funciona de forma similar a onclick o onmouseover y nos permite ejecutar JS cuando el usuario se autentica de forma exitosa con nuestro sitio a trav茅s de Facebook. Llamamos a la misma funci贸n que mencionamos antes, auth_using_fb(), pero antes de que podamos crearla necesitamos realizar un cambio m谩s. En la parte superior de la p谩gina en la etiqueta HTML debemos decirle al navegador que estamos utilizando m谩s de un lenguaje de marcaci贸n.

# index.php

<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:fb=”http://www.facebook.com/2008/fbml”>

El atributo xmlns especifica el nombre de espacio xml para el documento. El primero es el xhtml est谩ndar, y el Segundo es el nuevo lenguaje de marcaci贸n facebook, esto ayuda a que nuestro archivo sea W3C d贸cil.

Escribiendo el Javascript

Ahora volvemos a application.js y escribimos la funci贸n auth_using_fb().

# application.js

//Facebook Connect
function auth_using_fb() {
//get the users data from FB
var viewer聽 = FB.Facebook.apiClient.fql_query(

‘SELECT name, pic_square_with_logo,profile_url FROM user WHERE uid=’+FB.Facebook.apiClient.get_session().uid,

function(results) {
update_userbox( results[0].name,
results[0].pic_square_with_logo,
results[0].profile_url,
‘FB.Connect.logoutAndRedirect(“./index.php”);return false;’)
}
);
}

Esta es la funci贸n que utilizamos para interactuar con la informaci贸n de Facebook, y recuperar la informaci贸n del usuario. El bot贸n de login que hemos creado antes posee la funcionalidad incorporada de loggear a los usuarios a Facebook, pero si deseamos recoger la informaci贸n acerca del usuario debemos requerirla de forma separada. La primera l铆nea de c贸digo en la funci贸n es un llamado al m茅todo API de Facebook, fql_query(). Esta funci贸n nos da la posibilidad de utilizar SQL de Facebook como un lenguaje query para traer la informaci贸n del usuario. S贸lo necesitamos las 3 columnas que mencionamos antes: nombre, imagen y url.

El Wiki de desarrolladores Facebook posee聽 una p谩gina que contiene todas las tablas variadas de las que puedes obtener informaci贸n. Es importante a帽adir la cl谩usula WHERE que se limita al usuario que se encuentra loggeado en el momento. El segundo par谩metro de fql_query es una funci贸n callback que es pasada por una serie de resultados. S贸lo necesitamos tomar el primer resultado de la serie y mandar cada propiedad a nuestra funci贸n update_userbox() junto con el llamado JS de logout. Es importante incluir “return false;” luego del llamado logoutAndRedirect() porque de otra forma hace que la p谩gina se vuelva a cargar antes de que la API pueda desloggear al usuario.

Y eso es todo lo que debemos hacer para lograr que funcione nuestro Facebook Connect.

Google Friend Connect – API Key

De forma similar a Facebook Connect, Google Friend Connect necesita que nosotros nos registremos para obtener una clave API . Esto es m谩s r谩pido que en Facebook Connect porque tienen un instructor f谩cil de usar que nos gu铆a a trav茅s del proceso. Primero, necesitamos dar un nombre de aplicaci贸n y una URL, como en Facebook Connect.

Luego, nos da las instrucciones para subir algunos archivos a nuestro servidor y as铆 lograr soporte AJAX de dominio-cruzado, tambi茅n como en Facebook Connect.

El paso final verificar谩 que todo est茅 programado de forma correcta. Google llama a la clave API, “Site ID”, pero act煤a de la misma forma que la clave API de Facebook.

Incluyendo los archivos necesarios

A continuaci贸n necesitamos incluir los archivos JS que se precisan al final de nuestra p谩gina luego de los archivos Facebook. Tambi茅n necesitamos implementar el m茅todo initOpenSocialApi() del API Google Friend Connect. Este toma un par谩metro en el formulario de una gran cantidad de opciones. La 煤nica opci贸n requerida es site que es nuestra Site ID que hemos obtenido antes.

# index.php

<!– Google API Includes –>
<script src=”http://www.google.com/friendconnect/script/friendconnect.js?v=0.8″ type=”text/javascript”></script>

<!– Initialize the Google Friend Connect OpenSocial API. –>
<script type=”text/javascript”>
google.friendconnect.container.setParentUrl(‘/envato/nologin/’ /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.initOpenSocialApi({
site: ‘GFC_API_KEY’,
onload: function(securityToken) { auth_using_gfc(); }
});
google.friendconnect.renderSignInButton({id:”google-login”,style:’long’})
</script>

Tambi茅n necesitamos incorporar una funci贸n callback que se ejecute cuando el usuario es autenticado con Google Friend Connect. Adem谩s, necesitamos llamar una funci贸n que cree el bot贸n de Sign In. Esto es bastante similar al markup XFBML que utilizamos antes, excepto que Google se maneja con HTML plano. Esta funci贸n requiere que la pasemos a un id DOM del elemento en el que queremos que el bot贸n sea creado. Tambi茅n pasamos la opci贸n style:’long’ para que sea similar a nuestro bot贸n Facebook.

<div class=”services”>
<fb:login-button length=”long” onlogin=”auth_using_fb();”></fb:login-button>
<div id=”google-login”></div>
</div>

Escribiendo el JavaScript

Google Friend Connect es similar a Facebook Connect en muchas formas, lo que simplifica bastante nuestro trabajo. Una diferencia de lenguaje es que el API de Google tiende a ser un poco m谩s verborr谩gico por lo que dividiremos nuestra explicaci贸n de auth_using_gfc() en dos partes:

//Google Friend Connect
function auth_using_gfc() {
//Request GFC to send extra profile data
var params = {};
params[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] =
[opensocial.Person.Field.URLS];

// Create a request to grab the current viewer.
var req = opensocial.newDataRequest();
req.add(req.newFetchPersonRequest(‘VIEWER’, params), ‘viewer_data’);

Lo primero que debemos hacer es declarar la variable params como un hash vacio. Esto contendr谩 las opciones que necesitamos enviar con nuestro pedido a Google, porque por defecto no recibimos la URL de perfil del usuario. A continuaci贸n creamos un objeto de pedido que har谩 precisamente el pedido a Google para obtener la informaci贸n del perfil del usuario. El m茅todo add() toma dos argumentos, un objeto newFetchPersonRequest() y luego un string para identificar la informaci贸n. VIEWER es una constante que representa al usuario que se encuentra loggeado.

// Sent the request
req.send(function(data) {

// If the view_data had an error, then user is not signed in
if (!data.get(‘viewer_data’).hadError()) {
//get the users data from GFC
var viewer = data.get(‘viewer_data’).getData();

update_userbox( viewer.getDisplayName(),
viewer.getField(opensocial.Person.Field.THUMBNAIL_URL),
viewer.getField(opensocial.Person.Field.URLS)[0].getField(‘address’),
‘google.friendconnect.requestSignOut()’ );
}

});

La 煤ltima parte de la funci贸n, es el pedido de informaci贸n en si, utilizando el m茅todo send() el cual toma un argumento de una funci贸n callback. Declaramos la funci贸n inline y tenemos una proposici贸n if que se fija si el pedido recibi贸 un error. Si no lo hace, asumimos que todo fue bien y declaramos una variable llamada view que retiene la informaci贸n recibida del pedido. Esta informaci贸n es luego pasada a nuestra funci贸n update_userbox(). Lo 煤nico que debemos notar aqu铆 es el tercer argumento que pasa la URL del usuario.

Google permite que los usuarios ingresen m煤ltiples URLs de perfil (as铆 como Facebook, Twitter, etc) y nosotros s贸lo necesitamos la primera, la cual es la URL de perfil Google. El argumento final es nuestro string de JS a ejecutar que hace que el usuario se desloggee y tambi茅n recarga la p谩gina.

Una cosa buena que notar谩n es que los usuarios no tienen que tener una cuenta Google para ingresar, tambi茅n pueden utilizar sus cuentas AOL/AIM, Yahoo!, Netlog, u Open ID.

Fuente: Net Tuts


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (13)

  1. David Carrero Fdez-Baillo dice:

    Sirve este art铆culo para aplicarlo en un WordPress ??

  2. Alejandra dice:

    隆Excelente pregunta! Para WordPress puedes usar alguno de estos plugins:
    http://wiki.developers.facebook.com/index.php/Facebook_Connect_Plugin_Directory#Blog_Plugin

  3. Rodrigo dice:

    Muy buen Art铆culo!!! Super interesante. Es probable que en un futuro facebook connect o gfc se conviertan en norma para cualquier sitio nuevo.

  4. Juan Carlos dice:

    Sirve para Blogger o hay alg煤n otro m茅todo para conseguir algo similar?
    Gracias

  5. silvia dice:

    genial! llevo un par de dias buscando tips para implementar fb connect, voy a probarlo a ver que tal. Lo unico que hecho en falta es que hubierais puesto los archivos de la explicacion para descargar una demo :-)

  6. Andr茅s dice:

    Excelente art铆culo!

  7. Kevin ramos dice:

    muy bueno, me funciono a la primera!

  8. Victor manuel villanueva morales dice:

    muy bueno
    solo unas cositas q me gustaria q me ayudaran
    al enviar el formulario se guarda en
    data/comments.db
    y lo muestras en el index incluyendo
    readcomments.php
    pero aca si en el formulario envias etiquetas html
    se muestran estas alguna forma de impedir esto?
    otro detalle al dar un simple enter en el formulario
    y enviarlo readcomments lo lee por cada enter como un nuevo comentario :/
    por q pasara eso
    alguna idea

  9. Marco dice:

    como agregaria este coemtnario a todas mis paginas de mi web estatica??? insertando el codigo en cada pagina?? o s epodria hacer mediante un include algun ejemplo porfavor

  10. Pichu dice:

    En esta entrada viene muy bi茅n explicado como realizar el proceso de autenticaci贸n con facebook connect y obtener mediante una aplicaci贸n facebook informaci贸n de un usuario como el email, fecha de nacimiento…etc

    http://aplicacionesfacebookparadummies.blogspot.com/2011/09/obtener-datos-usuario-mediante-login.html

  11. Edu dice:

    Muy buena la informacion

  12. Xandru dice:

    La verdad que es muy interesante y completo el art铆culo, aunque saliendo un poco del aspecto t茅cnico, tal vez estar铆a bien pensar en el usuario, su privacidad y los datos que al final manejaran las plataformas.

    Para conocer estos aspectos un poco mejor os invito a leer el art铆culo que he escrito http://blog.xandrucancelas.es/registrar-a-los-usuarios-o-usar-botones-de-conexion-sociales/

  13. dandy dice:

    como hago funcionar este codigo no me salexd me faltan los archivos php/readcomments.php y php/savecomments.php si me ayudarias me avisas amigo ayudame quisiera hacer un chat parecido a esto ve proyectofm.com

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder