Cómo agregar autenticación de usuario usando Devise (Bootstrap en Rails 7)

La autenticación de usuarios es una característica de seguridad esencial para las aplicaciones web, especialmente aquellas que manejan datos confidenciales de los usuarios o brindan acceso restringido a ciertas funciones. Al solicitar a los usuarios que se autentiquen antes de acceder a la aplicación, los desarrolladores pueden asegurarse de que solo los usuarios autorizados puedan ver o modificar los datos y la funcionalidad de la aplicación.

¿Qué es Devise?

Devise es una gema de Ruby que proporciona funciones de autenticación y autorización de usuarios para aplicaciones Rails. Reduce el proceso de agregar funciones de registro, inicio de sesión y cierre de sesión a su aplicación sin tener que escribir todo desde cero.

Tiene funciones integradas como restablecimiento de contraseña y confirmación de cuenta. Admite varias estrategias de autenticación, como correo electrónico y contraseña, OAuth, OpenID y más.

Devise tiene documentación detallada que cubre funciones básicas y avanzadas.

En este tutorial, crearemos una aplicación Rails simple con Devise que permite a los usuarios crear cuentas, iniciar sesión y cerrar sesión en sus cuentas. También cubriremos cómo agregar estilo a la aplicación usando Bootstrap.

requisitos previos

Antes de comenzar este tutorial, debe tener una buena comprensión de los conceptos básicos de Ruby y Rails. Además, debe tener el siguiente software instalado en su computadora:

• Ruby: si no ha instalado Ruby en su máquina, puede descargar la última versión del sitio oficial sitio web rubí .
• Ruby on Rails: debe configurar su entorno de desarrollo local siguiendo los rieles guía.
• Node.js: Instalar Nodo.js para administrar la canalización de activos y ejecutar código JavaScript.
• Hilo
• SQLite3
• Un editor de texto como Visual Studio Code
• Un navegador como Google Chrome

También cubriremos cómo usar Bootstrap en Rails 7 más adelante en el tutorial.

Paso 1: Cree una nueva aplicación de Rails

• Para crear una nueva aplicación de rieles, abra una terminal en su directorio preferido y ejecute el comando:

 rails new authApp

Esto generará una nueva aplicación Rails llamada authApp en un directorio authApp . Abra este directorio en su editor de texto preferido.

• Navegue al directorio de la aplicación escribiendo: cd authApp
• En su terminal, inicie su servidor Rails ejecutando: rails server
• Abra http://127.0.0.1:3000/ en su navegador para acceder a la página de bienvenida de Rails.

Paso 2: crea una página de destino

• Genere un nuevo controlador que manejará la solicitud a la ruta raíz usando el comando: $rails generate controller home index

  Esto crea un nuevo controlador llamado `Home` con una acción `index`.

• Agregue la ruta raíz al archivo routes.rb en la carpeta 'config' agregando la siguiente línea: root 'home#index'

• En el directorio app/views/home , encontrará un nuevo archivo llamado index.html.erb . Esta vista contendrá el código HTML de su página de destino.

• Reinicie el servidor y verifique el host local en su navegador web para ver su página de destino recién creada.

Paso 3: Instalar y configurar Bootstrap

• En esta sección, usaremos mapas de importación , que cargan JS. Primero, verifique si tiene mapas de importación instalados ejecutando cat config/importmap.rb . Si no lo hace, ejecute rails importmap:install
• A continuación, agregue Bootstrap 5 JS a Rails a través de mapas de importación: $ bin/importmap pin bootstrap . Esto agrega JS, bootstrap y popperjs a config/importmap.rb .
• Importe Bootstrap en app/javascript/application.js usando import 'bootstrap'; .
• Agregue gem 'bootstrap', '~> 5.1.3' a su Gemfile y ejecute bundle install .
• En app/assets/stylesheets/application.css , importa Bootstrap usando @import "bootstrap"; y cambie el nombre del archivo a application.scss .
• Asegúrese de que su archivo app/views/layouts/application.html.erb contenga:

 <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> <%= javascript_importmap_tags %>

• Agregue estilos como prefiera en su archivo app/views/home/index.html.rb .
• Vuelva a cargar el servidor y vea los cambios.

Paso 4: Instalar y configurar el dispositivo

• Navegue hasta Gemfile y agregue la gema Devise usando el comando:

  gem 'devise', github: 'heartcombo/devise', branch: 'main'

• Ejecute bundle install para instalar Devise.

• Ejecute rails g devise:install para configurar Devise en su proyecto. Esto genera varios archivos de inicio para Devise y proporciona instrucciones en la terminal.

• Quite el comentario de la línea config.navigational_formats = ['*/*', :html, :turbo_stream] en el archivo devise.rb . Esto agrega turbo_stream como un formato de navegación, que es necesario para que Devise 4.9.2 funcione con Rails 7. De lo contrario, se generará un error undefined method user_url .

• Abra app/layouts/applications.html.erb y agregue las siguientes líneas para avisos y mensajes de alerta:

 <p class="notice"><%= notice %></p> <p class="alert"><%= alert %></p>

Paso 5: Crear un modelo de usuario con Devise

• Para crear un modelo de usuario con Devise, ejecute rails g devise user en la terminal. Esto generará los archivos necesarios y la configuración necesaria para implementar la autenticación de usuario.

• Cree la tabla de usuarios ejecutando el comando de migración: rails db:migrate .

• Reinicie el servidor para cargar el nuevo archivo de inicialización de Devise y configure todo para que funcione la autenticación de usuario.

• Vaya a http://localhost:3000/users/sign_up en su navegador para acceder al formulario de registro para crear una cuenta ingresando un correo electrónico y una contraseña.

  
  

• Navegue hasta el archivo index.html.erb y agregue las siguientes líneas de código:

 <% if user_signed_in? %> <p>Welcome, <%= current_user.email %>!</p> <%= link_to "Sign out", destroy_user_session_path, method: :delete %> <% else %> <%= link_to "Sign in", new_user_session_path %> <% end %>

Estas líneas crean enlaces de registro, inicio de sesión y cierre de sesión para su aplicación. user_signed_in es un método auxiliar proporcionado por Devise que devuelve verdadero si el usuario actual ha iniciado sesión y falso en caso contrario.

• Actualice su página en el navegador para revisar los cambios.

• Para revisar los cambios, simplemente actualice la página en su navegador. Si aún no ha iniciado sesión, habrá un botón de inicio de sesión visible en la pantalla. Haga clic en él y complete el proceso de registro. Una vez que se haya registrado con éxito, se le dirigirá a la página de destino donde podrá ver la dirección de correo electrónico del usuario que ha iniciado sesión actualmente, un mensaje de bienvenida y un botón de cierre de sesión.

  
  

Al seguir estos pasos, ha integrado con éxito la gema Devise y ha configurado la autenticación de usuario para su aplicación.

Conclusión

En este tutorial, usamos Devise para agregar autenticación de usuario a nuestra aplicación Rails. Desarrollamos una aplicación donde los usuarios pueden crear cuentas, registrarse y cerrar sesión. También integramos Bootstrap para mejorar la apariencia del proyecto. Para ampliar su conocimiento de Devise y explorar más ayudantes y métodos, consulte el archivo README en el repositorio de Devise GitHub.