Continuando con el artículo anterior sobre la integración con Facebook, voy a enseñarte cómo se realiza otro tipo de integración mediante el SDK de JavaScript: el logado. En estas integraciones será necesario realizar el alta como desarrollador de Facebook y obtener un id de aplicación, que podrás ver a continuación.

Alta como desarrollador

Lo primero que tendremos que hacer para realizar estas integraciones será darnos de alta en el sitio Facebook para desarrolladores. Para ello tendremos que tener una cuenta en Facebook y haberla verificado a través de nuestro teléfono móvil para poder entrar. Te muestro a continuación la página principal de Facebook para desarrolladores.

En esta página podrás obtener toda la documentación para el desarrollo de las integraciones, así como dar de alta de las aplicaciones que necesitarás para tu web. Ten en cuenta, que si vas a integrar varios sitios web y no quieres que compartan datos, tendrás que dar de alta una aplicación para cada sitio web. Aconsejo realizar esto, ya que así podrás realizar un seguimiento por dominio de los usuarios que utilizan estas integraciones en tu sitio web.

Al entrar en tu cuenta, podrás ver las diferentes aplicaciones que tienes junto al identificador de la aplicación. En este caso están borradas porque algunas se usan en producción.

Lo más importante en esta pantalla es que podemos pulsar sobre el botón “Agregar una nueva Aplicación” para crear la nuestra. Se te mostrará la siguiente pantalla para darle un nombre, un email de contacto y la categoría a la que pertenece tu página web.

Una vez tengamos creada la nueva aplicación, se te mostrará una pantalla donde aparecerá el nombre de la aplicación y el id que le ha sido asignado, así como la versión de la API que estará usando cuando no se le indique ninguna durante la programación (recuerda que puede hacerse como una propiedad en los objetos o como parte de la url de conexión al api de Facebook).

Ahora que tenemos una aplicación creada, lo primero no es empezar a usarla en el desarrollo, si no que crearemos una aplicación de pruebas. No queremos ensuciar con datos de uso incorrectos las estadísticas de nuestra web. Para ello, nos iremos a la parte superior izquierda y pulsaremos sobre el menú desplegable y el botón que se nos muestra.

Le daremos un nombre a la aplicación de prueba y la crearemos.

Con esto obtendremos otro id de aplicación con el realizar pruebas evitando problemas, tal y como nos avisa la propia ventana emergente. Ahora podemos empezar a desarrollar.

No te olvides a la hora de configurar la aplicación los dominios. Ya que, si no están correctamente configurados, se denegarán las conexiones que se intenten realizar con esta aplicación, como el logado (el error aparecerá en la consola javascript del navegador).

Tampoco debes olvidar añadir una plataforma con la que realizar las pruebas. En nuestro caso, una aplicación web.

Logado (y registro)

La realización del logado mediante Facebook está muy lograda y su documentación es muy intensa como puede verse en Inicio de sesión de Facebook. También existen ejemplos que tomaremos como base de explicación de las dos formas de logado: mediante la SDK o utilizando el plugin social.

Te sugiero encarecidamente, si no lo has hecho, que leas el artículo anterior sobre la integración con Facebook, ya que se explica en profundidad la url de conexión y los parámetros que la conforman, así de cómo se generan los botones que se verán a continuación.

Como ya comentamos en el anterior artículo, es necesario siempre la función que realiza la llamada al api de Facebook y que hemos puesto en la imagen anterior.

Existen dos formas de realizar la llamada y la conexión con el api de Facebook. La primera de ellas es mediante el uso de los plugins sociales, que nos generará el botón de logado mediante el siguiente código:

Como puedes ver, para realizar la integración mediante el plugin social, hay que invocar siempre el javascript, que realizará una llamada asíncrona a los servidores de Facebook, buscando posteriormente la etiqueta div con el identificar “fb-root” para añadir código necesario para la comunicación con Faecbook modificando el árbol DOM. Esto ocurre igualmente para la etiqueta “fb-login-button”, que añadirá el código relacionado con el botón de logado, haciendo referencia a la web que se le pase como parámetros los atributos de la etiqueta div que comienza por “data”.

En el caso de que queremos crear nosotros nuestro botón, usaremos la integración mediante objetos de Facebook:

Lo primero que hace este código es ejecutar la llamada asíncrona en “fbAsyncInit” para inicializar el objeto “FB”, que contendrá las llamadas al api. En este caso, es obligatorio usar id de aplicación, ya que solo nos servirá para una aplicación en concreto. “Xfbml” y la versión ya hemos visto para que sirven en la url de conexión con el api.

Cuando pulsas sobre “Log in”, se produce la llamada a la función para realizar el logado, obteniendo una respuesta que trataremos según nos parezca en las sentencias “if”.

Si te fijas, también se hace uso de “{scope: ‘email’}” en la llamada para realizar el login. Esto se hace para indicar que permisos se le pedirán al usuario que conceda a tu aplicación. Puedes pedir que comparta el perfil público, el email y las amistades sin que requiera una autorización previa de Facebook.

En el siguiente enlace tenéis un ejemplo simultáneo de las dos integraciones.

En el caso de que queráis obtener algunos datos más o mostrar una pantalla de registro, debéis usar las cláusulas “if” de la función “statusChangeCallback”.

En el caso de que nos hayamos conectado correctamente (primer if), podemos añadir esto para que nos muestra pantalla el nombre del usuario (Código de Facebook for developers)

En el último caso, si hay algún problema y no nos hemos podidos conectar, podremos intentar hacer otro login o bien redirigir a una página de registro en nuestra aplicación, que es donde reside la principal diferencia frente al login. De hecho, la propia página de Facebook para desarrolladores indica que el botón de registro ya no está en uso.

Api Graph

Por último, hay que reseñar el api Graph, que es lo que hemos usado para obtener los datos del usuario en la última pieza de código. El path “/me” sirve para recuperar toda la información respecto al usuario que se loga. Si quieres ver todos los nodos que hay disponibles los tenéis en la página de referencia, y algunos ejemplos lo tienes disponible en el uso del método FB.api(). Aquí, los permisos son el límite.

Conclusiones

En este artículo acabas de ver cómo realizar la creación y configuración de una aplicación para usarla posteriormente en el logado, pudiendo realizar éste de dos formas: mediante el plugin social (botón automáticamente generado) y mediante objetos FB (botón manual).

El logado y el registro se han unificado, usando ahora el mismo código y sólo diferenciándose en que tú debes controlar en la función de callback qué hacer en cada caso.

Te recuerdo nuevamente que para que el logado funcione debes configurar correctamente los dominios para cada aplicación de Facebook que tengas. Si no lo has configurado correctamente, te aparecerá un error en la consola de Javascript de tu navegador, que a veces, es el último lugar donde se mira.

Tampoco te olvides de añadir la plataforma que vas usar para el desarrollo.

El api Graph se usa en esta versión del api para obtener datos sobre el usuario según los permisos que se hayan otorgado a la aplicación durante el logado.

Recuerda que todo va asociado a una aplicación, y que, si vas a tener distintas aplicaciones, los usuarios y permisos podrán variar.

Con estos recordatorios, terminamos este artículo. Espero que te haya gustado y si tienes alguna pregunta, aportación o quieres que amplíe algo, estoy a tu disposición.