Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ruby
Code

Cómo Usar OmniAuth-Twitter en una Aplicación Rails

Difficulty:BeginnerLength:MediumLanguages:

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

En este tutorial, aprenderás cómo permitir a los usuarios de tu aplicación iniciar sesión usando su cuenta de Twitter. Hacer esto ha sido facilitado con herramientas como OAuth.

Harás uso de OmniAuth-Twitter, que contiene la estrategia Twitter para OmniAuth.

¡Sumerjámonos!

Comenzando

Comienza generando tu aplicación Rails. Desde tu terminal, ejecuta el comando para hacerlo:

Abre tu Gemfile y agrega la gem bootstrap.

Instala la gem ejecutando el comando:

Renombra app/assets/stylesheets/application.css a app/assets/stylesheets/application.scs.

Cuando esté hecho, agrega las siguientes líneas de código para importar bootstrap.

Crea un parcial nombrado _navigation.html.erb para sostener tu código de navegación; el parcial debería ser ubicado en el directorio app/views/layouts.

Ingresa el código debajo en un IDE. Este usa Bootstrap para crear una barra de navegación para tu aplicación.

Para que la navegación sea usada, necesitas generarla en el diseño de tu aplicación. Modifica el diseño de tu aplicación para que luzca como lo que tengo abajo.

Genera un PagesController con una acción índice ingresando el comando de abajo a tu terminal.

En la vista index generada, edita para que luzca así.

En el código de arriba, hacemos uso de una clase llamada jumbotron---este es un componente Bootstrap que nos permite extender la ventana de visualización para mostrar un mensaje de marketing. Puedes encontrar más acerca de este en la documentación Bootstrap.

Abre tu archivo routes para agregar tu root_path.

Configurando OmniAuth-Twitter

Necesitas crear una nueva aplicación Twitter. Ve a esta página en las páginas de Desarrollador Twitter para crear una. Ingresa todos los detalles necesarios, similar a lo que tengo en la captura de pantalla de abajo.

Twitter Application Management

Para la URL callback, ingresa la dirección de tu sitio web más "auth/twitter/callback". Si estás en una máquina local, tu URL callback debería ser esta: http://127.0.0.1:3000/auth/twitter/callback.

Serás redireccionado a la página de información en Twitter. Navega a la pestaña Keys and Access Tokens para obtener tus llaves. Copia la Consumer Key y Consumer Secret y pégalas en un lugar seguro---haremos uso de ellas dentro de poco.

La URL callback es la URL a donde un usuario será re-dirijido dentro de la aplicación después de autentificación exitosa y autorización aprobada (la petición también contendrá los datos y token del usuario). Todas las estrategias OmniAuth esperan que la URL callback sea igual a “/auth/:provider/callback”. :provider toma el nombre de la estrategia. En este caso, la estrategia será "twitter" como listarás en el inicializador.

Abre tu Gemfile para agregar la gem omniauth-twiiter.

Ahora crea un inicializador para OmniAuth en tu directorio config/initializers. Esto mantendrá la configuración para OmniAuth. Hazlo lucir como lo que tengo abajo.

En este punto necesitarás hacer uso de las llaves y tokens de acceso que almacenaste de manera segura. Necesitas mantener estas seguras ya que no quieres empujarlas a un repositorio público cuando hagas commit a tu código.

Usarás una gem para esto. Abre tu Gemfile de nuevo y agrega la gem abajo. Agrégala a tu Gemfile así:

Para instalar la gem, ejecuta.

En el directorio home de tu aplicación, crea un archivo llamado .env.

Ábrelo y agrega tus llaves y tokens así:

Abre .gitignore y agrega el archivo que creaste.

¡Con esto hecho, tus llaves y tokens de acceso están seguras! Para aprender más sobre cómo usar dotenv -rails, refiérete a la página GitHub.

Tiempo de trabajar en tu ruta. Abre tu archivo routes y agrega la ruta de abajo.

Necesitas agregar el enlace para inicio de sesión Twitter a tu navegación. Abre tu archivo de navegación y modifícalo para lucir como esto.

De lo de arriba, quieres mostrar el enlace para mostrar el inicio de sesión con Twitter solo cuando el usuario no haya iniciado sesión.

Creando Sesiones

Necesitarás un controlador de sesión para manejar el inicio de sesión de usuarios. Crea un archivo para eso en tu directorio de controladores; así es como debería lucir.

La acción create ayuda a crear una sesión para usuarios para que puedan iniciar sesión en tu aplicación. Sin esto, los usuarios no tienen manera de iniciar sesión.

Necesitarás un método current_user en este punto. Esto te ayudará a revisar si un usuario inicia o termina sesión.

Abre app/controllers/application_controller.rb y agrega lo siguiente.

Modelo Usuario

Ahora genera un modelo para tus Usuarios. Ejecuta el comando para hacerlo.

Esto debería generar un archivo de migración que luce como esto.

Ahora migra tu base de datos ejecutando:

Abre tu modelo Usuario y hazlo lucir como esto:

El código de arriba almacena alguna información perteneciente al usuario. Esto incluye el nombre, imagen_perfil, token, y secreto del usuario. Si tu aplicación requiere más que esto, puedes revisar la página OmniAuth-Twitter.

Borrando Sesiones

En tu aplicación, quieres proporcionar a los usuarios la habilidad de cerrar sesión. Necesitarás una acción destroy en tu SessionsController para que esto funciones. Después un enlace será agregado a tu navegación.

Agrega la acción destroy a tu SessionsController.

Después agrega este enlace para cerrar sesión a tu navegación, de manera que tu navegación luzca así.

Abre tu config/routes.rb para actualizar tus rutas con la acción que recién creaste.

Inicia tu servidor rails y apunta a tu navegador a http://localhost:3000 para ver lo que tienes.

Conclusión

En este tutorial has aprendido cómo habilitar OmniAuth-Twitter en tu aplicación Rails. Viste cómo obtener datos de usuarios usando OmniAuth-Twitter, lo que hiciste en tu modelo Usuario. Pudiste crear SessionControllers para manejar el inicio y cierre de sesión de usuarios de tu aplicación. 

Espero que lo hayas disfrutado. En el futuro, verás cómo hacer lo mismo para Facebook, Google, y LinkedIn.

Advertisement
Advertisement
Advertisement
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.