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 guía. los rieles Node.js: Instalar para administrar la canalización de activos y ejecutar código JavaScript. Nodo.js 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 en un directorio . Abra este directorio en su editor de texto preferido. authApp authApp Navegue al directorio de la aplicación escribiendo: cd authApp En su terminal, inicie su servidor Rails ejecutando: rails server Abra en su navegador para acceder a la página de bienvenida de Rails. http://127.0.0.1:3000/ 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 en la carpeta 'config' agregando la siguiente línea: routes.rb root 'home#index' En el directorio , encontrará un nuevo archivo llamado . Esta vista contendrá el código HTML de su página de destino. app/views/home index.html.erb Reinicie el servidor y verifique el en su navegador web para ver su página de destino recién creada. host local Paso 3: Instalar y configurar Bootstrap En esta sección, usaremos , que cargan JS. Primero, verifique si tiene mapas de importación instalados ejecutando . Si no lo hace, ejecute mapas de importación cat config/importmap.rb rails importmap:install A continuación, agregue Bootstrap 5 JS a Rails a través de mapas de importación: . Esto agrega JS, bootstrap y popperjs a . $ bin/importmap pin bootstrap config/importmap.rb Importe Bootstrap en usando . app/javascript/application.js import 'bootstrap'; Agregue a su Gemfile y ejecute . gem 'bootstrap', '~> 5.1.3' bundle install En , importa Bootstrap usando y cambie el nombre del archivo a . app/assets/stylesheets/application.css @import "bootstrap"; application.scss Asegúrese de que su archivo contenga: app/views/layouts/application.html.erb <%= 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 para instalar Devise. bundle install Ejecute para configurar Devise en su proyecto. Esto genera varios archivos de inicio para Devise y proporciona instrucciones en la terminal. rails g devise:install Quite el comentario de la línea en el archivo . 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 . config.navigational_formats = ['*/*', :html, :turbo_stream] devise.rb undefined method user_url Abra y agregue las siguientes líneas para avisos y mensajes de alerta: app/layouts/applications.html.erb <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 en la terminal. Esto generará los archivos necesarios y la configuración necesaria para implementar la autenticación de usuario. rails g devise user 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 en su navegador para acceder al formulario de registro para crear una cuenta ingresando un correo electrónico y una contraseña. http://localhost:3000/users/sign_up Navegue hasta el archivo y agregue las siguientes líneas de código: index.html.erb <% 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. es un método auxiliar proporcionado por Devise que devuelve verdadero si el usuario actual ha iniciado sesión y falso en caso contrario. user_signed_in 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.
