Header Ads Widget

Ticker

6/recent/ticker-posts

Autenticación con Devise in Rails

 

Instalando 

Agregar gema de diseño
Agregue esto a su Gemfile:
gema 'diseñar', '~> 4.7'

luego ejecute el paquete para instalar la gema:
instalación del paquete

A continuación, debe ejecutar el generador:
rieles generan dispositivo: instalar

Generará automáticamente 2 archivos:
  • config / initializers / devise.rb
  • config / locales / devise.en.yml

Crear modelo de usuario por dispositivo

rieles generan usuario devise

Salida:
invocar active_record
  crear db / migrate / YYYYMMDDHHMMSS_devise_create_users.rb
  crear app / models / user.rb
invocar test_unit
  crear prueba / modelos / user_test.rb
  crear test / fixtures / users.yml
insertar app / models / user.rb
route devise_for: usuarios

Después de ejecutar el comando, genera:
  • Una migración para crear una tabla de usuario: AAAAMMDDHHMMSS_devise_create_users.rb
  • Modelo de usuario: app / models / user.rb
  • Agregue rutas para archivos de prueba y de usuario.
Modelo de usuario abierto ( app / models / user.rb ), puede ver los módulos de diseño predeterminados:
class Usuario <ApplicationRecord
   # Incluye módulos de dispositivos predeterminados. Otros disponibles son:
  #: confirmable,: bloqueable,: timeoutable,: trackable y: omniauthable
  devise: database_authenticatable,: registerable,
         : recuperable,: recordable,: 
final validable

Para esta demostración, usamos 2 módulos adicionales:
  • confirmable : los usuarios deberán confirmar sus correos electrónicos después del registro antes de poder iniciar sesión.
  • rastreable : rastrea el recuento de inicios de sesión, las marcas de tiempo y la dirección IP.
Modifique el modelo de usuario de esta manera:
devise: database_authenticatable,: registerable,
       : recuperable,: inmemorable,: validable,: confirmable ,: rastreable

Además, debe editar el archivo de migración ( db / migrate / YYYYMMDDHHMMSS_devise_create_users.rb )
Descomente las siguientes líneas así:
class DeviseCreateUsers <ActiveRecord :: Migration [5.2]
   def change
     create_table : los usuarios hacen | t |
      [...]

      ## T.integer
       rastreable: sign_in_count, predeterminado: 0, nulo: falso
       t.datetime: current_sign_in_at
      t.datetime: last_sign_in_at
      t.string: current_sign_in_ip
      t.string: last_sign_in_ip

      ##
       T.string confirmable: confirm_token
      t.datetime: confirmado_at
      t.datetime: confirm_sent_at
      t.string: unsonfirmed_email # Solo si se usa reconfirmable

      [...]
    fin

    add_index : usuarios ,: correo electrónico, único: verdadero
    add_index : usuarios,: reset_password_token, único: verdadero
    add_index: usuarios,: confirmación_token, único: verdadero
    # add_index: users,: unlock_token, unique: true
  fin
fin

Luego ejecute la migración para crear una tabla de usuario
rails db: migrar

Ver detalles Tabla de usuario en la consola de rieles:
class Usuario <ApplicationRecord {
                        : id =>: entero,
                     : correo electrónico =>: cadena,
        : contraseña_cifrada =>: cadena,
      : reset_password_token =>: cadena,
    : reset_password_sent_at =>: fecha y hora,
       : Remember_created_at =>: fecha y hora,
             : sign_in_count =>: entero,
        : current_sign_in_at =>: fecha y hora,
           : last_sign_in_at =>: fecha y hora,
        : current_sign_in_ip =>: inet,
           : last_sign_in_ip =>: inet,
        : confirmación_token =>: cadena,
              : confirmado_at =>: fecha y hora,
      : confirm_sent_at =>: fecha y hora,
         : correo_inconfirmado =>: cadena,
                : created_at =>: fecha y hora,
                : updated_at =>: fecha y hora
}

Consejos: uso la gema awesome_print para ver eso en la consola de rieles

Configurar dispositivo

Inicializar devise: config / initializers / devise.rb 
Idear. configuración hacer | config |
  [...]
  # ==> Configuración de correo
  # Configure la dirección de correo electrónico que se mostrará en Devise :: Mailer,
  # tenga en cuenta que se sobrescribirá si usa su propia clase de correo
  # con el parámetro predeterminado "desde".
  config.mailer_sender = ' your-email@mail.com '

  [...] # Más ajuste
fin

Configurar las opciones de URL predeterminadas para Devise Mailer
En el entorno de desarrollo: ( config / environment / development.rb )
config.action_mailer.default_url_options = {host: 'localhost', puerto: 3000}

En el entorno de producción, el host debe establecerse en el host real de su aplicación.

Debe reiniciar su aplicación después de cambiar las opciones de configuración de Devise (esto incluye detener el resorte). De lo contrario, se encontrará con errores extraños, por ejemplo, los usuarios no pueden iniciar sesión y los ayudantes de ruta no están definidos.

Dispositivo de uso para autenticación

Devise admite algunos ayudantes para usar dentro de sus controladores y vistas.
Para verificar si un usuario ha iniciado sesión, use el asistente:
user_signed_in?

Para el usuario que ha iniciado sesión actualmente, use este asistente:
usuario actual

Agregar enlaces Sign_up / Log_in / Log_out
Puede agregar el código HTML a continuación al encabezado de vista de la aplicación:
# app / views / layouts / application.html.erb
<% if user_signed_in? %>
  <li class = "nav-item">
    <% = link_to " Cerrar sesión ", destroy_user_session_path, método:: eliminar, clase: "nav-link text-nowrap"%>
  </li>
<% else %>
  <li class = "nav-item">
    <% = link_to " Iniciar sesión ", new_user_session_path, class: "nav-link text-nowrap"%>
  </li>
  <li class = "nav-item">
    <% = link_to " Registrarse ", new_user_registration_path, class: "nav-link text-nowrap"%>
  </li>
<% end %>

  • destroy_user_session_path : ruta de cierre de sesión, método : eliminar es el método HTTP predeterminado que se utiliza para cerrar sesión a un usuario
  • new_user_session_path : Ruta de acceso.
  • new_user_registration_path: Crea una nueva ruta de usuario

Registrarse: cree una nueva cuenta de usuario haciendo clic en el enlace Registrarse , verá la vista así:
Formulario de registro

Registro de flujo:
  • Ingrese el correo electrónico, la contraseña y la confirmación de la contraseña => Haga clic en el botón Registrarse
  • El usuario recibirá un correo electrónico de confirmación.
  • Haga clic en el enlace de confirmación para verificar la cuenta.
  • Listo, listo para iniciar sesión.

Para leer fácilmente el correo electrónico de confirmación, recomiendo instalar una gema, llamada Letter Opener , que nos ayuda a obtener una vista previa del correo electrónico en el navegador predeterminado en lugar de enviarlo.

Instalar la gema letter_opener:

Agregue la gema a su entorno de desarrollo y ejecute el comando bundle para instalarlo.
grupo: desarrollo hacer
  [...] 
  gema 'letter_opener' 
end

Luego, configure el método de entrega en config / environment / development.rb
config.action_mailer.delivery_method =: letter_opener
config.action_mailer.perform_deliveries = true

¡Reinicie el servidor! y comience a crear una nueva cuenta de usuario.

Un ejemplo de un correo electrónico con instrucciones de confirmación en el navegador después de usar letter_opener :
Correo electrónico de instrucciones de confirmación


Conectarse: Haga clic para Log_in enlace, verá la forma de esa manera:
Formulario de inicio de sesión


Autenticación para publicación

Queremos agregar las funciones de autenticación para la gestión de Publicaciones (Publicación CRUD) para Usuario. Eso significa que solo los usuarios que iniciaron sesión pueden administrar las publicaciones.

Para configurar la autenticación de usuario para un controlador, simplemente agregue esto before_action :
before_action : authenticate_user!

clase PostsController <ApplicationController
  [...]
  before_action : authenticate_user!
  [...]
fin

Cuando el usuario NO inicia sesión todavía y hace clic en ' Administrar publicaciones ', la aplicación redirecciona automáticamente al usuario a la página de inicio de sesión. Puede ver el registro en la consola de esta manera:
Comenzó GET "/ posts" para :: 1 en 2020-MM-DD 13:37:35 +0700
Procesamiento por índice de PostsController # como HTML
Completado 401 No autorizado en 2 ms (ActiveRecord: 0.0ms | Asignaciones: 349)

Ahora, para administrar las publicaciones CRUD, ya debe iniciar sesión en el sistema.

Agregar página de detalles de la publicación

Crea un controlador de Blog con la acción de mostrar :
rieles generan controlador Blogs muestran
Registros de salida:
Ejecutando a través del precargador Spring en proceso 23109
      crear app / controllers / blogs_controller.rb
       ruta obtener 'blogs / show'
      invocar erb
      crear aplicaciones / vistas / blogs
      crear app / views / blogs / show.html.erb
      invocar test_unit
      crear test / controllers / blogs_controller_test.rb
      invocar ayudante
      crear app / helpers / blogs_helper.rb
      invocar test_unit
      invocar activos
      invocar scss
      crear app / assets / stylesheets / blogs.scss

Actualizar rutas de Rails: (/ blogs /: id)
Rails.application.routes.draw do
  [...] 
recursos : blogs, solo: [: mostrar]  
fin


Actualizar el enlace Ver detalles' en la página de inicio:
Desde
<a href ="#" class ="btn btn-primary"> Ver detalles </a>
A
<% = link_to 'Ver detalles', blog_path (publicación) , clase: "btn btn-primary"%>

En el controlador del Blog:
class BlogsController <ApplicationController
   def show
     @post = Post.find (params [: id]) 
  end
fin

Interfaz de usuario de la página de detalles de la publicación:
Página de detalles de la publicación


En vista (app / views / blogs / show.html.erb)
<article class = "página de blog">
  <div class = "blog">
    <h2 class = "título">
      <% = @ post.title%>
    </h2>
    <div class = "contenido">
      <% = @ post.content%>
    </div>
  </div>
</artículo>

CSS de la página de detalles de la publicación:
Agregamos 2 archivos CSS: 
  • blogs.scss
  • trix_editor.scss (opcional): anula CSS de algunos elementos en el contenido de Trix:
blogss.scss: 
.blog-page {
  ancho máximo: 880px;
  margen: 0 automático;
  padding-top: 10px;

  .Blog {
    relleno: 40px 70px;
    img {
      radio del borde: 8px;
    }
    .title {
      tamaño de fuente: 34px;
      font-weight: negrita;
      fondo acolchado: 30px;
    }
  }
}

trix_editor.css:
.trix-content {
  tamaño de fuente: 18px;
  altura de línea: 34px;
  h1 {
    tamaño de fuente: 29px;
    peso de fuente: 800;
    altura de línea: 28px;
    margen inferior: 0.5em;
  }
  ol, ul {
    margen superior: 0;
    margen inferior: 1em;
    padding-left: 30px;
    > li {
      margen izquierdo: 0.5em;
      margen inferior: 0.25em;
    }
  }
  pre{
    relleno: 15px 20px;
    margen superior: 15px;
  }
  blockquote {
    color: rgba (0, 0, 0, 0.54);
    margen: 20px;
    padding-left: 20px;
  }
  fuerte{
    peso de fuente: 800;
  }
  .attachment__caption {
    padding-top: 10px;
  }
}

Importar trix_editor.scss y blogs.scss a application.scss (importar en la parte inferior del archivo)
[...]
 @import "trix_editor";
@importar "blogs";

¡Listo!

Conclusión

En este artículo, ya te guío sobre la gema Devise y cómo usar Devise para agregar funciones de autenticación como crear una nueva cuenta de usuario, iniciar sesión, cerrar sesión en la aplicación Rails.
Además, te ayudo paso a paso a agregar la página de detalles de la publicación a la aplicación Blog.

Publicar un comentario

0 Comentarios