7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Ruby

Cómo utilizar Omniauth para autenticar a tus usuarios

Scroll to top
Read Time: 8 mins

Spanish (Español) translation by steven (you can also view the original English article)

Odio registrarme en sitios web. Ya me he registrado para tantos, con diferentes nombres de usuario, que volver a uno de ellos y tratar de recordar mis credenciales a veces es imposible. En estos días, la mayoría de los sitios han comenzado a ofrecer formas alternativas de registrarte, permitiéndote usar tu Facebook, Twitter o incluso tu cuenta de Google. Crear una integración de este tipo a veces parece una tarea larga y ardua. Pero no temas, Omniauth está aquí para ayudarte.

Omniauth te permite integrar fácilmente más de sesenta proveedores de autenticación, incluidos Facebook, Google, Twitter y GitHub. En este tutorial, voy a explicar cómo integrar estos proveedores de autenticación en tu aplicación.


Paso 1: Preparar tu aplicación

Creemos una nueva aplicación Rails y agreguemos las gemas necesarias. Asumiré que ya has instalado Ruby y Ruby on Rails 3.1 usando RubyGems.

Ahora abre tu Gemfile y haz referencia a la gema omniauth.

A continuación, como de costumbre, ejecuta el comando bundle install para instalar la gema.


Paso 2: Crear un proveedor

Para agregar un proveedor a Omniauth, deberás registrarte como desarrollador en el sitio del proveedor. Una vez que te hayas registrado, se te darán dos cadenas (algo así como un nombre de usuario y una contraseña), que deben pasarse a Omniauth. Si estás utilizando un proveedor de OpenID, todo lo que necesitas es la URL de OpenID.

Si deseas utilizar la autenticación de Facebook, dirígete a developers.facebook.com/apps y haz clic en "Crear nueva aplicación".

Facebook New AppFacebook New AppFacebook New App

Completa toda la información necesaria y, una vez que hayas terminado, copia el ID y el secreto de tu aplicación.

Facebook SecretFacebook SecretFacebook Secret

Configurar Twitter es un poco más complicado en una máquina de desarrollo, ya que no te permiten usar "localhost" como dominio para devoluciones de llamada. Configurar tu entorno de desarrollo para este tipo de cosas está fuera del alcance de este tutorial. Sin embargo, te recomiendo que uses Pow si estás en una Mac.


Paso 3: Agregar tus proveedores a la aplicación

Crea un nuevo archivo en config/initializers llamado omniauth.rb. Vamos a configurar nuestros proveedores de autenticación a través de este archivo.

Pega el siguiente código en el archivo que creamos anteriormente:

Honestamente, esta es toda la configuración que necesitas para que esto funcione. Omniauth se encarga del resto, como veremos en el siguiente paso.


Paso 4: Crear la página de inicio de sesión

Creemos nuestro controlador de sesiones. Ejecuta el siguiente código en tu terminal para crear un nuevo controlador de sesiones (sessions) y las acciones newcreate y failure.

A continuación, abre tu archivo config/routes.rb y agrega esto:

Analicemos esto:

  • La primera línea se utiliza para crear un formulario de inicio de sesión sencillo donde el usuario verá un enlace simple que dice  "Conectarte con Facebook".
  • La segunda línea es para recibir la devolución de llamada del proveedor. Después de que un usuario autoriza tu aplicación, el proveedor redirige al usuario a esta URL para que podamos hacer uso de sus datos.
  • El último se utilizará cuando haya un problema o si el usuario no autorizó nuestra aplicación.

Asegúrate de eliminar las rutas que se crearon automáticamente cuando ejecutaste el comando rails generate. No son necesarios para nuestro pequeño proyecto.

Abre tu archivo app/controllers/sessions_controller.rb y escribe el método create, así:

Esto se usa para asegurarte de que todo funcione. Apunta tu navegador a localhost:3000/auth/facebook y serás redirigido a Facebook para que puedas autorizar tu aplicación (muy bien, ¿no?). Autorízalo y serás redirigido a tu aplicación y verás un hash con algo de información. En el medio estará tu nombre, tu identificación de usuario de Facebook y tu correo electrónico, entre otras cosas.


Paso 5: Crear el modelo del usuario

El siguiente paso es crear un modelo de usuario para que los usuarios puedan registrarse usando sus cuentas de Facebook. En la consola de Rails (rails console), crea el nuevo modelo.

Por ahora, nuestro modelo de usuario solo tendrá un nombre (name) y un correo electrónico (email). Con eso fuera del camino, necesitamos una forma de reconocer al usuario la próxima vez que inicie sesión. Ten en cuenta que no tenemos ningún campo en el modelo de nuestro usuario para este propósito.

La idea detrás de una aplicación como la que estamos intentando construir es que un usuario pueda elegir entre usar Facebook o Twitter (o cualquier otro proveedor) para registrarse, por lo que necesitamos otro modelo para almacenar esa información. Vamos a crearlo:

Un usuario tendrá una o más autorizaciones, y cuando alguien intenta iniciar sesión usando un proveedor, simplemente miramos las autorizaciones dentro de la base de datos y buscamos una que coincida con los campos uid y provider. De esta manera, también permitimos que los usuarios tengan muchos proveedores, para que luego puedan iniciar sesión usando Facebook, Twitter o cualquier otro proveedor que hayan configurado.

Agrega el siguiente código a tu archivo app/models/user.rb:

Esto especifica que un usuario puede tener múltiples autorizaciones y que los campos de nombre y correo electrónico (name y email respectivamente) en la base de datos son obligatorios.

A continuación, en tu archivo app/models/authorization.rb, agrega:

Dentro de este modelo, designamos que cada autorización está vinculada a un usuario específico. También establecemos cierta validación.


Paso 6: Agregar un poco de lógica a nuestro controlador de sesiones

Agreguemos un código a nuestro controlador de sesiones para que registre a un usuario o le permita iniciar sesión, según el caso. Abre app/controllers/sessions_controller.rb y modifica el método create, así:

Este código claramente necesita una refactorización, pero nos ocuparemos de eso más adelante. Revisémoslo primero:

  • Verificamos si existe una autorización para ese provider y ese uid. Si existe, le damos la bienvenida a nuestro usuario.
  • Si no existe la autorización, registramos al usuario. Creamos un nuevo usuario con el nombre y correo electrónico que nos da el proveedor (Facebook en este caso), y asociamos una autorización con el proveedor y el uid que nos da.

¡Pruébalo! Ve a localhost:3000/auth/facebook y deberías ver "Te has registrado". Si actualizas la página, ahora deberías ver "Bienvenido de nuevo".


Paso 7: Habilitar varios proveedores

El escenario ideal sería permitir que un usuario se registre usando un proveedor y luego agregar otro proveedor para que pueda tener múltiples opciones para iniciar sesión. Nuestra aplicación no lo permite por ahora. Necesitamos refactorizar un poco nuestro código. Cambia el método create de sessions_controlller.rb para que se vea así:

Revisemos esto:

  • Si el usuario ya inició sesión, agregaremos el proveedor que está utilizando su cuenta.
  • Si no ha iniciado sesión, intentaremos encontrar un usuario con ese proveedor o crearemos uno nuevo si es necesario.

Para que el código anterior funcione, necesitamos agregar algunos métodos a nuestros modelos User y Authorization. Abre user.rb y agrega el siguiente método:

Si el usuario aún no tiene este proveedor asociado con su cuenta, lo agregaremos de manera simple. Ahora, agrega este método a tu archivo authorization.rb:

En el código anterior, intentamos encontrar una autorización que coincida con la solicitud y, si no tiene éxito, creamos un nuevo usuario.

Si deseas probar esto localmente, necesitarás un segundo proveedor de autenticación. Podrías usar el sistema OAuth de Twitter, pero, como señalé antes, necesitarás usar un enfoque diferente, ya que Twitter no permite usar "localhost" como el dominio de la URL de devolución de llamada (al menos no funciona para mi). También puedes intentar alojar tu código en Heroku, que es perfecto para un sitio simple como el que estamos creando.


Paso 8: Algunos ajustes adicionales

Por último, debemos, por supuesto, permitir que los usuarios cierren la sesión. Agrega este fragmento de código a tu controlador de sesiones:

También necesitamos crear la ruta aplicable (en routes.rb).

¡Es tan simple como eso! Si navegas a localhost:3000/logout, tu sesión debería borrarse y se cerrará la sesión. Esto hará que sea más fácil probar varias cuentas y proveedores. También necesitamos agregar un mensaje que se muestre cuando los usuarios niegan el acceso a nuestra aplicación. Si recuerdas, agregamos esta ruta cerca del comienzo del tutorial. Ahora, solo necesitamos agregar el método en el controlador sessions:

Y por último, pero no menos importante, crea la página de inicio de sesión, donde el usuario puede hacer clic en el enlace "Conectar con Facebook". Abre app/views/sessions/new.html.erb y agrega:

Si vas a localhost:3000/login, verás un enlace que te redireccionará a la página de autenticación de Facebook.


Conclusión

Espero que este artículo te haya proporcionado un breve ejemplo de cómo funciona Omniauth. Es una gema considerablemente poderosa y te permite crear sitios web que no requieren que los usuarios se registren, lo cual siempre es una ventaja. Puedes aprender sobre Omniauth en GitHub.

¡Avísanos si tienes alguna pregunta!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.