Uso de Devise en su aplicación Ruby on Rails [Guía paso a paso]

Autenticación. No siempre desea que sus usuarios tengan sesiones sin rostro que abran su aplicación sin dejar ningún rastro.

Por supuesto, hay algunas aplicaciones en las que no necesita cuentas para sus usuarios, pero en la gran mayoría de los casos, necesitará administrar algunos usuarios y contraseñas.

Si eres un principiante con Ruby on Rails, es posible que ya estés pensando cómo hacerlo. Cree un modelo de usuario, agregue algunos campos a su modelo de usuario, incluido un campo de contraseña cifrada.

Guarde la sesión de su usuario de alguna manera para que pueda permanecer en línea incluso después de cambiar las ventanas de la aplicación, guarde algunas cookies para que pueda permanecer en línea incluso después de cerrar el navegador. Sabes, esas cosas son bastante repetitivas si creas nuevas aplicaciones con frecuencia, y si algo es repetitivo, puedes hacer un algoritmo que lo haga por ti.

Sin embargo, lo especial de Internet es que la mayor parte de lo que piensas en crear ya fue creado por otra persona. En el caso de la autenticación para Ruby on Rails, hay una joya para eso.

Devise es una joya muy completa que hace todo el trabajo de autenticación por ti, o la mayor parte si estás pensando en una característica muy específica que te gustaría implementar.

Cuando lo usé por primera vez, solo quería crear un inicio de sesión básico para mis usuarios y agregar algunas funciones adicionales al proceso de registro. Me tomó un par de horas leer la documentación y agregar lo que quería, y desearía haber encontrado un tutorial más básico para guiarme.

Quiero hacerme un favor a mí mismo y hacer un breve tutorial sobre cómo crear una aplicación Rails, agregar algunos campos adicionales al modelo de usuario y modificar las vistas predeterminadas de la gema.

Vamos a empezar. Cree un proyecto primero si aún no lo ha hecho.

E inmediatamente después, agregue dispositivo al archivo gemfile.

 gem 'devise'

Luego ejecute la instalación del paquete en su terminal.

 $ bundle install

Espere a que todo se instale y cuando termine, ejecute este otro comando en su terminal:

 $ rails generate devise:install

Puedes ver que tenemos algunas instrucciones con este.

El primero se refiere a la configuración del correo. Para un entorno de desarrollo, debe especificar su URL predeterminada. Esto no le causará problemas si no va a enviar correo a sus usuarios, pero copiemos y peguemos la línea en el archivo development.rb en caso de que necesitemos enviar correo a nuestros usuarios.

El segundo punto nos pide que definamos un root_url para algo. Dejaré esto para más adelante, realmente no necesita nada en la ruta raíz de su aplicación para que Devise funcione. Esta es solo la gema que te recuerda que hagas una página de inicio.

El tercer punto nos pide que nos aseguremos de tener mensajes flash en nuestro archivo application.html.erb. ¿Por qué? Bueno, esto les permitirá saber a los usuarios si están haciendo algo mal.

Los mensajes predeterminados ya están incluidos en la gema del dispositivo para que no tenga que escribirlos. Simplemente copie y pegue lo que el dispositivo le muestre en el terminal donde quiera que sea visible.

El último punto es, en mi opinión, el más importante. Nos dice que generemos las vistas del dispositivo para su personalización. Ejecutaremos el comando ahora y modificaremos los archivos más tarde.

¡Excelente! Ahora podemos generar nuestro modelo. Puedes llamar a tu modelo de dispositivo como quieras, yo lo llamaré "Usuario". Es un nombre genérico entendible por cualquiera. Ejecutemos el comando ahora.

 $ rails generate devise User

Y antes de migrar nuestra base de datos, revisemos el archivo de migración.

 # frozen_string_literal: true class DeviseCreateUsers < ActiveRecord::Migration[6.0] def change create_table :users do |t| ## Database authenticatable t.string :email , null: false , default: "" t.string :encrypted_password , null: false , default: "" ## Recoverable t.string :reset_password_token t.datetime :reset_password_sent_at ## Rememberable t.datetime :remember_created_at ## Trackable # t.integer :sign_in_count, default: 0, null: false # t.datetime :current_sign_in_at # t.datetime :last_sign_in_at # t.string :current_sign_in_ip # t.string :last_sign_in_ip ## Confirmable # t.string :confirmation_token # t.datetime :confirmed_at # t.datetime :confirmation_sent_at # t.string :unconfirmed_email # Only if using reconfirmable ## Lockable # t.integer :failed_attempts, default: 0, null: false # Only if lock strategy is :failed_attempts # t.string :unlock_token # Only if unlock strategy is :email or :both # t.datetime :locked_at t.timestamps null: false end add_index :users , :email , unique: true add_index :users , :reset_password_token , unique: true # add_index :users, :confirmation_token, unique: true # add_index :users, :unlock_token, unique: true end end

Aquí, puede descomentar los campos que desea utilizar, por ejemplo, si desea poder confirmar a sus usuarios enviándoles un correo electrónico, puede descomentar las cuatro líneas debajo de # Confirmable. La gema del dispositivo hará el resto (además de alguna configuración propia que tendrá que investigar, ya que no se tratará en este tutorial).

Agreguemos un nombre y apellido a nuestros usuarios, solo para darle un ejemplo de cómo hacerlo. Usaremos el mismo dispositivo de modelo creado para agregar los campos que desee, pero necesitaremos hacer algunas modificaciones más adelante. Vamos a crear una nueva migración ahora.

 $ rails generate migration add_name_to_users name:string surname:string

Esto generará un nuevo archivo de migración que agregará algunas columnas a la tabla de usuarios. Vamos a revisar el archivo de migración.

 class AddNameToUsers < ActiveRecord :: Migration [6.0] def change add_column : users , : name , : string add_column : users , : surname , : string end end

Recuerde, no escribí nada de esto en el archivo de migración, fue generado por Rails. Todo parece estar bien, así que podemos hacer la migración de la base de datos. En su terminal, puede hacer

 $ rails db:migrate

O también puedes escribir:

 $ rake db:migrate

Cualquiera de los dos funcionará. Después de realizar la migración, revisemos el formulario de registro en nuestra aplicación. No hemos hecho nada en este momento, por lo que necesitaremos acceder manualmente escribiendo la ruta. En primer lugar, ejecute su servidor

 $ rails server

Luego, vaya a cualquier navegador de Internet que tenga en su computadora y vaya a esta dirección: http://localhost:3000/users/sign_up . Lo que verá es su formulario de registro, generado automáticamente por devise. No tiene ningún estilo especial, pero puedes encargarte de eso. Lo que me preocupa es otra cosa. ¡Agregamos un nombre y apellido a nuestros usuarios y no está aquí! Vamos a cambiar eso. Vaya a la carpeta de vistas. ¿Recuerdas que ejecutamos el comando rails g devise:views? Será útil ahora. En nuestra carpeta de vistas, tenemos otra carpeta llamada dispositivo. Ábralo y busque la carpeta de registros. Aquí tienes los archivos nuevos y editados. Abramos el archivo new.html.erb.

 < h2 > Sign up </ h2 > <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= render "devise/shared/error_messages" , resource: resource %> < div class = "field" > <%= f.label :email %> < br /> <%= f.email_field :email , autofocus: true , autocomplete: "email" %> </ div > < div class = "field" > <%= f.label :password %>
    <% if @minimum_password_length %> < em > ( <%= @minimum_password_length %> characters minimum) </ em > <% end %> < br /> <%= f.password_field :password , autocomplete: "new-password" %> </ div > < div class = "field" > <%= f.label :password_confirmation %> < br /> <%= f.password_field :password_confirmation , autocomplete: "new-password" %> </ div > < div class = "actions" > <%= f.submit "Sign up" %> </ div > <% end %>

<%= render "devise/shared/links" %>

Este es el formulario de registro, sí. Pero le faltan los dos campos que queríamos para nuestro usuario. Vamos a agregarlos, en realidad, vamos a agregar estos dos campos tanto a los archivos nuevos como a los de edición. El archivo de edición, por cierto, es para usuarios antiguos que desean cambiar su información, como su correo electrónico o contraseña.

 < div class = "field" > <%= f.label :name %> < br /> <%= f.text_field :name %> </ div > < div class = "field" > <%= f.label :surname %> < br /> <%= f.text_field :surname %> </ div >

Acabo de imitar el estilo establecido por el formulario de registro generado automáticamente desde Devise. Puede diseñarlo más tarde con su propio css. Veamos cómo se ve.

Debe hacer lo mismo con el archivo edit.html.erb mientras lo hace. Por ahora, probemos nuestro formulario de registro. No he agregado más funciones a esta aplicación, pero deberíamos poder agregar algo a nuestra base de datos con este formulario. Primero ejecutemos la consola y verifiquemos si tenemos algo allí.

Puede ver que obtenemos una matriz vacía cuando usamos el comando User.all en la consola. Volvamos al formulario de registro y... regístrese.

Después de hacer clic en el botón Registrarse, se nos envía de vuelta a la ruta raíz. Este es el comportamiento previsto. Revisemos la consola nuevamente y veamos qué obtenemos cuando buscamos a todos los usuarios. Solo deberíamos tener un usuario y debería ser mister foo bar.

¿Notaste algo? No se guardaban los campos de nombre y apellidos en la ficha de usuario. Esto se debe a que necesitamos decirle explícitamente a Rails que acepte estos dos campos en el formulario. Vamos a hacer eso ahora. En la carpeta de controladores, abra el archivo application_controller.rb y actualícelo para que se vea así.

 class ApplicationController < ActionController::Base protect_from_forgery with: :exception before_action :update_allowed_parameters , if: :devise_controller? protected def update_allowed_parameters devise_parameter_sanitizer.permit( :sign_up ) { |u| u.permit( :name , :surname , :email , :password )} devise_parameter_sanitizer.permit( :account_update ) { |u| u.permit( :name , :surname , :email , :password , :current_password )} end end

Déjame ir a la consola y borrar el primer usuario de allí. Ahora probemos esto nuevamente, después de los cambios, deberíamos poder registrarnos y tener todos nuestros campos de usuario insertados en la base de datos.

Estoy usando las mismas credenciales que la última vez. Nuevamente, ya borré la primera barra de mister foo de la base de datos, por lo que no debería ser un problema. Ahora hagamos clic en Registrarse y verifiquemos la base de datos en la consola.

Lo tenemos ahora.

Felicitaciones, ahora sabe cómo instalar Devise en sus aplicaciones, agregar un modelo con Devise, agregar algunos campos a esos modelos y personalizar las vistas de Devise. Ahora puede continuar con el resto de su aplicación web.

¡Gracias por leer!