Login de Facebook en extensiones Chrome

Login de Facebook en extensiones Chrome

El login de facebook desde una extensión chrome es más complicado que desde una web.  Cuando se crea una aplicación de facebook desde la web de desarrolladores de facebook se asocia a una web y cuando desde esa web se hace el login de facebook la API comprueba que se realiza desde la URL asociada a esa aplicación. Pero en una extensión de chrome no estamos en ninguna web, estamos en el protocolo chrome-extension:// por lo que al intentar hacer el login de una forma normal nos saldría un mensaje como este:

 

Vamos a hacer una extensión de ejemplo para ver cómo solucionar el problema, el código completo está en mi github.

Antes de empezar la extensión es necesario modificar la aplicación de facebook.

 

Configurar aplicación en facebook

 

Ir al panel de la aplicación y configurar un “Inicio de sesión con Facebook”. La aplicación normalmente estará vinculada a una web, si sólo es para usar en una extensión cualquier URL puede servir como se ve en la siguiente imagen.

 

A continuación poner a “Si” el “Acceso de OAuth de navegador integrado”.

 

 

Código de la extensión Chrome

 

El archivo de configuración de la extensión lo definiremos de la siguiente manera

Archivo manifest.json

Definimos un proceso de background que se encargará del login y un popup donde aparecerá el botón de login. Lo más importante son los permisos, en este caso necesitamos el acceso a la navegación ya que el login se realizará en una ventana que no formará parte de la extensión y necesitaremos poder leer su URL. Además pedimos acceso a la web de la API Graph de facebook.

 

Popup.html

El código del popup muy simplificado, será:

popup.js

Básicamente lo que hacemos al definir el evento de click del botón es:

  • Enviamos al proceso de background un mensaje para que sepa que el login se va a realizar y que monitorice las ventanas que se van a abrir (posteriormente veremos el código).
  • Abre una ventana con la URL del diálogo de autorización de facebook. La gracia aquí es que indicamos en los parámetros una URL a la que se redireccionará el login cuando el usuario dé permiso de acceso desde facebook. En esa URL vendrá el token de acceso.
  • Por último definimos un listener para comunicarnos con el proceso de background, cuando tenga los datos del login nos lo enviará en un mensaje y los mostraremos en pantalla.

Aspecto del popup de login de facebook

 

Proceso de background.js

En el background realizamos lo siguiente:

  • Cuando se recibe el mensaje desde el popup “loginFace” porque se ha hecho click en el botón de login se programa un listener de tabs con chrome.tabs.onUpdated.addListener para monitorizar todas las pestañas que se abran.
  • Se define la función que se ejecutará cada vez que se abra una nueva ventana o pestaña. El objetivo es acceder a la URL de la ventana que se abre con el redireccionamiento que hemos definido en el login.
  • Cuando se abre la ventana con la URL www.facebook.com/connect/login_success.html miramos los parámetros que tiene. Uno es el acces_token que nos permitirá acceder a la GRAPH API y otro el expires que nos indicará cuanto tiempo será válido el token. En nuestro ejemplo no hacemos nada con las variables, en un ejemplo real seguramente las guardariamos en localStorage o en variables globales para poder acceder desde otra zona del código a la API de facebook.
  •  Una vez tenemos el token accedemos a la API en  graph.facebook para obtener el nombre y el mail (es un ejemplo podríamos hacer muchas otras cosas, como acceder a la lista de amigos si hubieramos hecho el login con el permiso correspondiente, etc…).
  • Si es correcto enviamos el resultado en un mensaje al popup y quitamos el listener porque ya no es necesario hasta el próximo login. En una extensión real habría que tratar mejor la posibilidad de error y de no aceptar el login.
  • Borramos la ventana del success.

 

Y ya está, ¡misión cumplida!

Popup de la extensión de ejemplo

 

Como decía al principio el código de la extensión está accesible en mi github.

 

 

 

 

 

Enviar comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *