Ver Mensaje Individual
  #1 (permalink)  
Antiguo 07/04/2009, 03:17
jabmaster
 
Fecha de Ingreso: marzo-2007
Mensajes: 14
Antigüedad: 17 años, 1 mes
Puntos: 5
[APORTE] Usar Facebook Connect

Hola...

Te cuento que yo integré Facebook Connect, y después de lidiar 2 noches terminé entendiendo... y es realmente muy simple.

Supongo que ya habrás creado la aplicación en Facebook.com, obtenido el api_key, el secret_key, etc...

Bueno, primero tienes que mostrar el botoncito para poder iniciar sesión con la cuenta de Facebook, siempre y cuando el visitante no esté logueado.

¿Cómo saber si está logueado o no? No te preocupes... tan solo compruebalo como siempre lo haces... mediante sesiones, cookies o lo que sea que utilizes actualmente para manejar el registro e inicio de sesión de usuarios.

Bueno... una vez que sabes que el visitante no está logueado, además de mostrarle el login de siempre de tu web, le muestras el de Facebook... Ya sabes... el botoncito azul que dice "Connect with Facebook" (imagino que hasta aquí llegaste sin problemas)

Código HTML:
<fb:login-button length="long" onlogin="location.href='<? echo $_SERVER['REQUEST_URI'];?>'"></fb:login-button>
    <script type="text/javascript" src="H T T P : //static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
    <script type="text/javascript">
    FB.init("Ingresa aquí la Key que identifica a tu aplicación...","xd_receiver.htm");
    </script> 
Hasta acá está clara la cosa... checkeas si el visitante no está logueado (de la forma que tu quieras y como siempre lo haz hecho), si descubres que no está logueado, le presentas el formulario para iniciar sesión desde tu web y le presentas el botón para iniciar sesión con Facebook...

Una vez que ya aparece el botón de Facebook Connect, el usuario ya tiene la posibilidad de clickear sobre él e iniciar sesión con su e-mail y password de FB.

Esto es lo que sucede cuando el usuario presiona dicho botón:

1) El usuario clickea sobre "Connect with Facebook" y le aparece un popup en javascript/ajax pidiendo email y passoword.
2) El usuario ingresa los datos y clickea sobre el botón "Connect" del popup.
3) Cuando los datos son válidos, el popup en javascript/ajax desaparece y se crea una cookie con los datos de sesión del usuario en facebook sobre el domain de tu web.

NOTESE QUE NUNCA SALISTE TU PÁGINA WEB, NI LA REFRESASTE NI NADA, SIMPLEMENTE SALIÓ UN POPUP EN AJAX.

Así que ahora tendrás que pedirle el usuario que por favor presione F5 así tu puedes comenzar a leer la cookie (Mentira! )

Cuando el login con Facebook es correcto, se produce el evento onlogin y desde ahí puedes llamar a una función en javascript, refrescar la web, redirigirla, lo que tu quieras...

Bueno... ya tenemos la(s) cookie(s) con los datos de sesión de Facebook en nuestro domain... ¿Y AHORA COMO LAS LEEMOS?

Bueno... tendrás que descargar la API en PHP para desarrolladores de Facebook, la puedes encontrar aquí --> svn.facebook.com/svnroot/platform/clients/packages/facebook-platform.tar.gz

Dentro del archivo, encontrarás una carpeta llamada "footprints"... que es tan solo un ejemplo de Facebook... si quieres lo mirás, o si no, no lo miras... digamos, no son archivos necesarios para correr la API ni el FBConnect, solo son ejemplos de como utilizarlos.

Lo importante son los archivos incluidos dentro de la carpeta PHP... a esos files los descomprimes en algún lugar del webserver, yo los descomprimí dentro de una carpeta llamada "Facebook" ubicada en la raiz.

Una vez descomprimidos los archivos de la API, nos dirigimos hacia nuestro archivo en donde recibiremos los datos de la sesión (login.php, index.php, lo que sea...)

En dicho archivo incluiremos la API de Facebook... y luego comenzaremos a trabajar con ella (facebook.php)

Código PHP:
require_once 'facebook/facebook.php'//Ruta de la api...

$Aplicacion 'Ingresa aquí la Key que identifica a tu aplicación...'//No olvides ingresar la key de tu aplicación
$ClaveSecreta 'Ingresa aquí tu SecretKey...'//No olvides ingresar la clave proporcionada por FB

$Facebook = new Facebook($Aplicacion$ClaveSecreta); 
Ya estamos listos para empezar a obtener un poco de info sobre esa sesión, como por ejemplo el Nombre, el Apellido y el ID único de ese user en Facebook.

Código PHP:

If ($Facebook->get_loggedin_user())
{
        
$FID $Facebook->require_login(); //obtenemos el id del user en FB
                         
        
$user_details $Facebook->api_client->users_getStandardInfo($FID, array('last_name','first_name')); //intentamos obtener un poco de información del perfil
        
$Nombre $user_details[0]['first_name']; //Almacenamos los datos del array
        
$Apellido $user_details[0]['last_name']; //Seguimos con la matriz, esta vez almacenamos el Apellido

Bueno... ahí tienes

Ahora puedes terminar de hacer una integración total almacenando esos datos en tu base de datos, etc..

Imagino que en tu sitio cada usuario es identificado con un ID, y ese ID lo obtienes cuando el usuario inicia sesión... ej:

Tienes una tabla de usuarios parecida a esta:

id | usuario | password
=================
1 | admin | admin123
-------------------------------
2 | juan | apple2
-------------------------------
3 | pepe | hd250
-------------------------------
4 | pedro | vilma


De momento, cuando recibes los datos desde el login actual de tu web, supongo que haces algo como esto:

$Usuario = $_POST['usuario'];
$Password = "$_POST['password'];

Y realizas la consulta para obtener el ID y trabajar con ese ID...

$row = mysql_fetch_row(mysql_query("SELECT id FROM usuarios WHERE usuario = '$Usuario' AND password = '$Password';"));

$ID = $row[0];

Y ahí obtienes el ID del user pepe y trabajas siempre con ese ID (caso hipotético actual, imagino que se debe aproximar algo a lo real)

Bueno... si en un caso así quieres integrar Facebook Connect, lo que puedes hacer es modificar la tabla y dejarla así:

id | usuario | password | fid
====================
1 | admin | admin123 | 0
--------------------------------
2 | juan | apple2 | 0
--------------------------------
3 | pepe | hd250 | 0
--------------------------------
4 | pedro | vilma | 0

Entonces cuando recibes el FID mediante la API, puedes agregarlo a la tabla de usuarios manteniendo el ID autonúmerico original, e ingresando el FID en el campo FID y el nombre del perfil en el campo usuario... después en vez de tratar de conseguir el ID haciendo un WHERE con el usuario y password, lo haces haciendo un WHERE con el FID...

$row = mysql_fetch_row(mysql_query("SELECT id FROM usuarios WHERE fid = '$fid';"));

Ahí obtendrías el ID autonúmero asignado por tu base, con el cual trabajarías de la misma forma en qué lo haces con el ID de los usuarios registrados, ya que es lo mismo :P

Saber que tipo de consulta hacer (WHERE usuario o WHERE fid) es cuestión de un poco de IF para comprobar desde donde vienen los datos y qué datos vienen.

De esta manera puedes integrar totalmente tu sitio con FacebookConnect sin tener que hacer nada más que agregar unas lineas al login.php y un campo a la tabla de usuarios.

Bueno, como imaginarás, esta no es la única forma de integrar FBConnect con tu sitio... hay muchas, todo depende de tu ingenio y habilidad para programar.

Espero que te haya servido!!

Estuve muucho tiempo escribiendo este post... es que hay muy poca info en Español y habiendo entendido un poco el tema después de largas noches de foros en inglés, me sentí en deuda con la comunidad de hablahispana

Si van a copiar este mini-manual, recuerden citar el autor

Autor: jabmaster

Saludos!!