Login con Facebook en tu web

18 Sep

Si alguna vez desarrollaste el proceso de registro y login de un sitio web, sabrás que tiene las mil y una vueltas y complicaciones. Este desarrollo costoso puede reemplazarse simplemente utilizando la API de Facebook para registrar y logear a los usuarios de tu sitio. A continuación te mostramos un ejemplo en un proyecto realizado con el Framework Php Symfony 1.4, pero con un mínimo de imaginación puede adaptarse muy facilmente a cualquier aplicación web.

Primer paso: Crear aplicación en Facebook

Para utilizar el login con Facebook primero necesitamos una Facebook App. Para conseguirla realizamos los siguientes pasos:

  1. Acceder con tu usuario de Facebook a https://developers.facebook.com/apps
  2. Click en “Crear nueva aplicación”
  3. Elegimos un nombre para nuestra aplicación y le damos continuar (y a adivinar el Captcha se ha dicho!)
  4. A esta altura ya tenemos el id de nuestra aplicación (App Id) y un código secreto (App Secret). Vamos a usar esto mas adelante!
  5. Click en la parte inferior donde dice “Website with Facebook Login” y en este campo debemos indicar desde que sitio vamos a logearnos (por ejemplo, nosotros lo usamos en http://www.fuseala.com)
  6. Guardamos cambios.
  7. Como opcional podemos configurar desde “App Details” distintos detalles que se mostrarán al momento de que el usuario quiera ingresar en tu sitio con Facebook y se le muestre la pantalla de “Permisos” de la app. Configuren esto con sal y pimienta a gusto

Listo, tenemos nuestra preciosa aplicación de Facebook. Ahora vamos al código!

 Agregar el Login con Facebook en nuestro sitio

Ya tenemos nuestra aplicación Facebook y ahora queremos que nuestros visitantes se logeen utilizando el login que este nos provée. Esto se hace simplemente creando un link en tu sitio que respete ciertas carácteristicas. Antes que nada necesitamos los siguientes strings:

  1. App Id: $appId = sfConfig::get(‘app_facebook_appId’); //Como somos prolijos, lo pusimos en la configuración del proyecto, pero tranquilamente la podemos escribir directamente acá
  2. Url donde Facebook va a redirigir al usuario una vez logeado: $redirectUrl = sfConfig::get(‘app_url_root’) . url_for(“loginFacebook”); //En nuestro caso utilizamos los helpers de symfony, pero esto no es más que una url de tu sitio
  3. Scope en donde le indicamos a Facebook que permisos queremos sobre el usuario: $scope = ‘email,user_about_me’; //En este caso solo pedimos el mail del usuario y la información básica del mismo, pero se puede pedir muchas mas cosas que pueden ver acá
  4. Response type en donde le indicamos a Facebook de que modo queremos manejar la respuesta: $response_type = ‘token’; //La otra opción es ‘code’, pueden investigar para que sirve cada una en este link

Tenemos todo lo que necesitamos, acá va el código en php para armar el link:


<?php
$appId = sfConfig::get('app_facebook_appId');
$redirectUrl = sfConfig::get('app_url_root') . url_for("loginFacebook");
$scope = 'email,user_about_me';
$url = "https://www.facebook.com/dialog/oauth?";
$url .= "client_id=" . $appId;
$url .= "&redirect_uri=" . $redirectUrl;
$url .= "&scope=" . $scope;
$url .= "&response_type=token";
?>

<a href="<?php echo $url ?>" title="Ingresar con Facebook">Ingresá con Facebook</a>

Unas cuantas consideraciones de lo que acabamos de hacer.

  • Facebook va a validar que accedamos desde la web que configuramos en el paso 5 de la creación de la app (“Website with Facebook Login”). En caso de que querramos acceder desde otra url va a fallar. Lo primero que se desprende es “cómo hacemos para probar esto en el ambiente de desarrollo?”. Nosotros lo solucionamos creando otra aplicación clonada con otra url de sitio (la url de desarrollo). Otra forma no encontramos, si la tienen digannos!
  • Recomendamos utilizar el Scope a criterio. Cuanto menos cosas pidamos del usuario, más chances hay de que acepten la utilización de nuestra aplicación. Convengamos que no es lo mismo pedir el mail, a pedir permisos para postear en tu perfil de Facebook a tu nombre. Por lo menos nosotros no aceptaríamos esto.
  • Otro detalle a tener en cuenta con el Scope es que si en algún momento lo cambiamos, los usuarios que ya hayan aceptado nuestra app lo deberán hacer de nuevo. Así que si se les había ocurrido este cheat, olvidenlo.

Utilizar la información de Facebook del usuario

El usuario ya se logeó utilizando Facebook, y este último lo redirigió a la url de nuestro sitio que le indicamos en el link de Login. Ahora queremos utilizar la información que Facebook nos brinda del usuario, ya sea para registrar al usuario en nuestro sitio, o para cualquier otra cosa que se les ocurra. Veamos el código de nuestra página en donde llega el usuario:


<html>
<head>
<title>Ingresando a Mi aplicación</title>
</head>
<body>
<script type="text/javascript">
function loginUser(user) {

//Acá hago lo que quiero. En este caso imprimo por consola el email del usuario

console.log("Este es el mail del usuario" +user.email );
}

var accessToken = window.location.hash.substring(1);
var path = "https://graph.facebook.com/me?";
var queryParams = [accessToken, 'callback=loginUser'];
var query = queryParams.join('&');
var url = path + query;

// use jsonp to call the graph
var script = document.createElement('script');
script.src = url;
document.body.appendChild(script);
</script>
Ingresando a Mi aplicación. Aguarde un instante...
</body>
</html>

Epa epa, que pasó acá??? Magia?? No! Vamos a explicar paso a paso este script:

  • Con este método utilizamos las ventajas de Jsonp. Los amigos de fernetJs nos explican que demonios es Jsonp: http://fernetjs.com/2012/09/jsonp-cors-y-como-los-soportamos-desde-nodejs/#1.2
  • En la primer parte del script, obtenemos el accessToken que Facebook nos envía para autorizarnos a utilizar la info del usuario. Con dicho token, armamos la url que vamos a utilizar para nuestra llamada con Jsonp al “graph” de Facebook, indicando la función de callback “loginUser”, función que se ejecutará en el caso de que el token este ok. La url resultante es del estilo: https://graph.facebook.com/me?access_token=AAACT2sn2llcBACj48ZB7ADHbZCVlLUzf5s&expires_in=7039&callback=loginUser
  • Una vez que tenemos la url, agregamos al document un tag script con la url que obtuvimos antes. Esto invoca a la misma utilizando Jsonp y en caso OK se ejecuta la función de callback “loginUser”, en donde tenemos la variable json “user” con la data del usuario. En este caso imprimimos por consola el email
  • Qué podemos hacer en esta función de callback? Nosotros por ejemplo utilizamos el email para validar si el usuario existe o no. En caso de que exista cargamos la data del mismo en sesión, en caso de que no exista, creamos el usuario, lo cuál vendría a reemplazar el registro de usuario.

Tanto en Comunidad Fusa como en Fuseala, este mecanismo nos resultó de lujo: 1445 personas ingresaron al sitio utilizando el login de Facebook.

Si te quedó alguna duda del método, avisanos!

Un abrazo!

Uva

  • Ezequiel Miranda

    Hoooooooola como estan me queda una duda

    es que en mi clase PHP me dice que esta clase no existe… sfConfig
    es producido por esta linea sfConfig::get(‘app_facebook_appId’);
    y es que o falta una explicacion o se olvidaron mostrar o contar sobre esto

    • ComunidadFusa

      Es cierto. Es que usamos Symfony (Framework) y es una clase de dicho Framework. Igual esa línea es básicamente para obtener el appId. Asi que simplemente podes hacer esto:

      $appId = “miclave”;

      Perdona la tardanza, no vimos el aviso

  • Sebastian Roman

    Hola antes que nada muchas gracias por compartir la info, teno un problema cuando acepto que se acceda a la info desde el facebook, en la pagina de redireccionada se queda congelada con el mensaje “Ingresando a Mi aplicación. Aguarde un instante…” y no se muestra la info

    PD: en la url aparece http://tvdigitalsociales.net84.net/respuesta.html#access_token=CAAF…3zQZD&expires_in=3704 y se queda asi

    Gracias. Saludos

    • ComunidadFusa

      Tenés algún log de la app para chequear? Puede ser un problema en tu app del lado del servidor. Avisanos y perdona por la tardanza en responder

      • Sebastian Roman

        Exacto era un problema del lado del servidor.. solo debia cambiar console.log por un alert y listo…

        Gracias por responder

      • Sebastian Roman

        Hola disculpa, otra consulta, cuando quiero los datos de user_about_me , me aparece indefinido, el email me sale bien pero user_about_me o el user_likes me sale indefinido, no se si sabes el porque.

        Gracias.

        • ComunidadFusa

          Pudiste arreglarlo? Esta cosa sigue sin mandarnos mail y llegamos siempre tarde!

          • Sebastian Roman

            Si 😀 en realidad solo es de utiilizar el api de facebook, y en el usuario “me” solo añadir “me/likes” o “me/videos” segun lo que se desee acceder, pero muchas gracias por todo, este tutoril me sirvió de base para aprender lo demas.