Uno de los requerimientos más solicitados hoy en día por nuestros clientes a la hora de desarrollar una aplicación web es la integración con redes sociales, o también, es un requisito casi esencial para tu proyecto de emprendimiento, es por ello que en esta guía ahondaremos en los pasos necesarios para llevar este proceso a cabo, haciendo uso de las APIs públicas de Facebook y Twitter en particular, ya que son las redes sociales más utilizadas en este minuto.

Creando tu App en el Portal de Desarrollo

Primero lo primero, crearemos y solicitaremos los permisos necesarios para tener nuestra app funcionando en las plataformas para de esta forma obtener nuestros códigos de Cliente y Secreto.

Facebook

Para ello, accedemos a la sección de desarrolladores de Facebook (https://developers.facebook.com).

2

           

En el menú superior encontrarán “My Apps” y dentro de el menú que se despliega está la opción “Add a New App”, y les aparecerán las siguientes opciones.

1

Y bueno, estamos configurando una app web, así que nos vamos con toda seguridad a la última opción de la derecha “Sitio web”. Seguido de esto, les pedirá crear un nombre para su app, esto se los dejo a su creatividad, luego presionamos en el botón inferior “Create New Facebook App ID”.

3

Seguidamente, elegimos una categoría y nos vamos a “Create App ID”. (Ignoren la parte de “Is this a test version of…”, déjenlo en NO).

4

En este minuto, Facebook les debería estar entregando un tutorial de inicio, no lo veo necesario, pero si quieren revisarlo, está ahí para ustedes. Seguimos presionando en el botón superior “Skip Quick Start”.

5

¡Ahora estamos en lo que necesitamos para preconfigurar nuestro futuro proyecto Rails! Copien su App ID y su App Secret (les pedirá colocar su contraseña para mostrarlo luego de presionar en el botón “Show”.

6

Otro dato interesante es que Facebook por defecto les da permisos sobre los usuarios que accedan a la app creada, pueden revisarlos en “Status & Review”.

7

¡Y ya estamos listos con Facebook!

Twitter

Para nuestra querida red social del pajarito celeste, el procedimiento no es tan diferente que el anterior, así que comencemos accediendo a https://apps.twitter.com.

8

Como era de esperarse, presionamos en “Create New App” que nos mostrará el siguiente formulario, el cual rellenaremos según lo que vayas a desarrollar, los campos Website y Callback URL los rellenaremos con los campos que aparecerán en la imagen, de esta forma, podemos probar el login desde nuestro propio PC.

9

Aceptamos los Términos y Condiciones de Uso y presionamos en “Create Your Twitter Application”, luego, nos presentará la siguiente vista:

10

Y estamos casi a punto de obtener todo lo que necesitamos para empezar a programar, pero primero, vamos al a sección “Keys and Access Tokens”:

11

Y copiamos los dos códigos que necesitaremos, Consumer Key y Consumer Secret. Luego de esto empezaremos a entrar a desarrollar tu app e integrarla con estas dos redes sociales.

Instalando Devise

Instalar esta gema es un paso bastante mecánico, pero fácil de realizar. Primero que nada incluiremos la gema en nuestro Gemfile:

Como ya han de estar acostumbrados, realizamos:

Con estos dos pasos ya tendrían instalada esta gema, ahora sólo nos queda configurar nuestro proyecto para que acepte el sistema de usuarios, para ello ejecutaremos estos comandos en nuestra terminal:

Seguido de esto, nos aparecerá un mensaje en el cual Devise nos recuerda un par de cosas que debemos realizar, las traduciré para ustedes:

 

1. Asegúrate de haber definido tu url por defecto en tu variable de entorno. Aquí hay un ejemplo apropiado para desarrollo de el archivo config/environments/development.rb:

En producción, :host debe estar asignado al host actual de tu aplicación.

2. Asegúrate de tener definida tu ruta inicial en el archivo config/routes.rb

3. Asegúrate que tus layouts presentan los mensajes flash, por ejemplo en app/views/layouts/application.html.erb:

4. Si vas a utilizar Heroku con Rails versión 3.2 (sólo esta versión), quizá debas asignar la siguiente variable en config/application.rb:

5. Puedes copiar las vistas de Devise (con el fin de editarlas) a tu app haciendo uso del comando:

Luego de haber realizado todos estos pasos, tendrás creado un modelo de usuario con los siguientes campos (pueden agregarle más después):

  • id
  • email
  • encrypted_password
  • reset_password_token
  • reset_password_sent_at
  • remember_created_at
  • sign_in_count
  • current_sign_in_at
  • last_sign_in_at
  • current_sign_in_ip
  • last_sign_in_ip
  • created_at
  • updated_at

Nos aseguramos de realizar las migraciones para que estos cambios tomen efecto en la base de datos:

Y además, devise tiene un controlador propio con varias acciones como por ejemplo, inicio de sesión, registro, cierre de sesión y recuperación de contraseñas, todo esto, gracias al mágico comando que encontrarán en su config/routes.rb:

Instalando Omniauth

Esta gema no tiene mucha ciencia tampoco, pero antes de empezar a desarrollar esta sección, debemos hacer unas cuantas configuraciones. Primero que nada, agreguemos las gemas que utilizaremos:

Y ejecutamos en nuestra terminal favorita:

Listo, tenemos la gema instalada, ahora debemos considerar dos cosas, primero, es necesario llevar una clase que nos permita determinar, a partir de cierta llamada desde nuestra red social escogida para realizar login, el usuario a quien está asociado, por eso crearemos nuestro modelo llamado Entities (entidades) que harán referencia a un usuario (y más de alguna puede señalar a más de un usuario, supongamos que inicio sesión con Facebook y en otra ocasión con Twitter, la idea es asignar el mismo usuario). Nuestro modelo quedaría:

Entity:

  • user_id # usuario a quien referencia
  • provider # quien provee este login (red social)
  • uid # id único generado por el proveedor

Y para crearlo ejecutamos el siguiente comando:

Tal como lo realizamos en el paso anterior, debemos realizar nuestras migraciones en la base de datos:

Listo, lo tenemos el modelo creado y nuestra base de datos, ahora procederemos a modificarlo un poco (app/models/identity.rb):

Como pueden ver, la referencia que creamos en el comando está marcada en la segunda línea, luego las validaciones son para que el uid que nos entrega el proveedor esté presente y además sea único entre los que pertenecen a un proveedor en particular.

Si recuerdan los códigos de cliente y secretos que solicitamos al comienzo de este tutorial, pues bien, ahora los necesitaremos, así que abriremos el archivo config/initializers/devise.rb y agregamos las siguientes líneas al final:

(Si quieren, pueden realizar este paso de una forma más segura en el tutorial que les enseña Gonzalo en el siguiente link http://blog.desafiolatam.com/recuperar-contrasenas-con-devise-y-gmail/)

Bueno, tenemos configurado Devise y Omniauth para que nos acepten usar Facebook y Twitter y además almacenamos las llamadas al proveedor, pero… ¿cómo hago que se inicie sesión? ¿qué controlador realiza los llamados? ¡A configurar!

Primero generemos el controlador que nos permitirá realizar el login luego de que nos llegue una respuesta desde alguna red social, para ello, crearemos un nuevo controlador en app/controllers llamado omniauth_callbacks_controller.rb con el siguiente contenido:

Ahora, debemos asegurarnos de que Devise ocupe nuestro controlador para estas acciones, así que editaremos nuestro config/routes.rb para que aparezca así:

Los métodos Facebook y Twitter son los encargados de retomar el login luego que una de estas redes sociales nos haya devuelto la información acerca de la sesión respectiva, y como pueden apreciar, hacen el llamado a una función de User que no hemos creado aún, así que procederemos a agregarla en nuestro modelo (app/models/user.rb):

Como podrán apreciar, auth es el hash que nos entrega el proveedor del login (pueden revisarlos completos en: https://github.com/mkdynamic/omniauth-facebook  y https://github.com/arunagw/omniauth-twitter, en la sección Auth Hash), por ello, sacamos el email del usuario usando auth.info.email, pero este dato no existe en Twitter (su API no nos provee de email), es por ello que le asignamos un valor genérico y luego obligaremos al usuario a que asigne su email manualmente (este mismo caso sucede si es que no tenemos el permiso de ver su email desde Facebook), así que primero, crearemos el controlador de usuarios para que se haga cargo de esta acción:

Ahora, crearemos la acción que aparecía en nuestro OmniauthCallbackController, finish_signup, para ello abriremos app/controllers/users_controller.rb:

Acto seguido, crearemos el formulario para que esta acción pueda llevarse a cabo, para ello, crearemos el archivo app/views/users/finish_signup.html.erb y colocaremos esto en su contenido:

Ya nos queda muy poco, sólo agregar esta acción a nuestro config/routes.rb:

Y notarán que le permitimos que esta acción pueda ser llamada como get para recibir el formulario y como patch para enviar los datos.

¡Y listo!

Ahora tienes completamente configurado tu proyecto Ruby on Rails para que funcione con Facebook y Twitter, de hecho, puedes probar desde tu PC en esta dirección http://localhost:3000/users/sign_in y aparecería algo así:

12

Si pinchan en Twitter (Facebook no funciona desde localhost, lamentablemente), los llevará a su cuenta de Twitter para iniciar sesión y autorizar la app, acto seguido, les pedirá su email (tal como les decía, Twitter no les da su email) y visualizarán nuestro formulario:

13

Y luego colocamos un mail válido, pinchamos “Confirmar” y habremos vuelto al root de nuestro sitio con todo funcionando.

 

Fuentes:

 

Share Button

Estudiante de Ingeniería Civil Informática en la Universidad Técnica Federico Santa María Campus Santiago, Ingeniero de Software en Nursoft. Fanático de la Tecnología, Apple Boy, Pasión por la Ciencia Ficción.