Como Administrar los Usuarios con Device--Ruby on Rails

Por:, en:

ES:This tutorial assumes you have already completed:

  1. Path: Setting Things Up

Device es una gema extraordinaria que nos ahorrará mucho trabajo. La utilizaremos para permitir que los usuarios creen cuentas en nuestra página Web, modifiquen sus perfiles, inicien o cierren su sesión, o también que les enviemos recordatorios de sus contraseñas y más. Todo esto es seguro y fácil de configurar. Podemos poner a mano todas las funcionalidades que Device proporciona, pero no lo haremos por dos razones: Primero, toma mucho tiempo y en segundo, el nivel de arreglo que necesitamos para nuestro proyecto no es tan complicado. Por lo tanto, una disposición estándar Device es más que suficiente.

Nota: Este tutorial es un poco largo, toma tu tiempo para terminarlo.

Paso 1: Lee Devise's Github y agrega Gem Devise

Vayamos a la página de Devise's github page.Te recomiendo que leas la documentación. Todo lo que necesitas saber está allí. En los próximos tutoriales, modificaremos Device así que necesitaremos regresar a esta página. Por ahora, toma tu tiempo y chécalo.

Primero, necesitamos agregar Device a nuestro Gemfile. El Gemfile es la lista de todos los “plugins” o como los llamamos en la comunidad de Ruby “gems.” Gems son los mini-programas autónomos que se construyen en una manera que permita que las combinemos fácilmente con nuestra aplicación. Device es una de esas “gems”. Así que abre to  Gemfile:

Gemfile


source 'https://rubygems.org'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.0'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.3'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer',  platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0',          group: :doc

# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring',        group: :development

# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

# Use debugger
# gem 'debugger', group: [:development, :test]

Cada línea que comienza con “#” es ignorada por nuestro software. De esta manera, podemos hacer los comentarios en el mismo código de Ruby.

En el archivo de gem ya puedes encontrar un par de gems. Estas agregarán armazones del jQuery Javascript a tu aplicación, configuraran la base de datos en tu ordenador y más. A continuación agreguemos la gema de Device al final de nuestro Gemfile:

Gemfile


    gem 'devise'

Paso 2: Agrupa las Gemas

Ahora necesitamos agrupar Device con nuestra aplicación. Eso significa que el encargado de la gema - llamado bundler - descargará todas las gemas necesarias del Internet. Este proceso puede tomar un rato dependiendo del tamaño de la gema o si es la primera vez que lo haces.

Para agrupar las gemas con la aplicación, abre tu terminal, ve adentro de la carpeta donde está tu aplicación y escribe el siguiente comando:


$ bundle install


Your bundle is complete!
Use `bundle show [gemname]` to see where a bundled gem is installed.

Paso 3: Genera el archivo de Configuration

En el siguiente paso necesitamos generar un archivo de configuración para Devise. En la terminal, escribe:


$ rails generate devise:install


create  config/initializers/devise.rb
      create  config/locales/devise.en.yml
===============================================================================

Some setup you must do manually if you haven't yet:

  1. Ensure you have defined default url options in your environments files. Here
     is an example of default_url_options appropriate for a development environment
     in config/environments/development.rb:

       config.action_mailer.default_url_options = { host: 'localhost:3000' }

     In production, :host should be set to the actual host of your application.

  2. Ensure you have defined root_url to *something* in your config/routes.rb.
     For example:

       root to: "home#index"

  3. Ensure you have flash messages in app/views/layouts/application.html.erb.
     For example:

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

  4. If you are deploying on Heroku with Rails 3.2 only, you may want to set:

       config.assets.initialize_on_precompile = false

     On config/application.rb forcing your application to not access the DB
     or load models when precompiling your assets.

  5. You can copy Devise views (for customization) to your app by running:

       rails g devise:views

===============================================================================

Lee el mensaje cuidadosamente. Te dirá lo que exactamente tienes que hacer.

Paso 4.1: Configura los archivos de Environments

Veamos paso por paso las instrucciones del mensaje:

Step 4.2: Modifica el archivo de Application 

 

  1. Dentro del archivo de config/environments hay otros tres archivos. Uno por cada entorno. Cada uno se puede establecer con diferentes configuraciones.

    En la línea de Devise nos está proponiendo que debemos ir dentro de  development.rb y test.rb

    config/environments/development.rb config/environments/test.rb

    config.action_mailer.default_url_options = { host: 'localhost:3000' }
            

    Dentro de nuestro archivo de production.rb necesitamos poner un verdadero URL que empareje nuestro dominio. Si estás utilizando Heroku, éste sería el nombre de dominio de Heroku, por ejemplo: http://your-demo-application.herokuapp.com. Si ya has conectado tu heroku con un dominio de encargo, este sería http://www.custom-domain.com.

    Esto es importante porque todos los emails que Devise le esté enviando a los usuarios - reajustes de contraseña, confirmaciones de cuenta, etc. - señalarán a esta dirección.

    config/environments/development.rb config/environments/production.rb

    config.action_mailer.default_url_options = { host: 'http://your-app-on-heroku.herokuapp.com' }
            

    Step 4.3: Crea "Static Pages"

  2. Si sigues el tutorial completo de  "creating static pages tutorial" ya estás listo. Sino, regresa y has ese tutorial 

 Step 4.4: Agrega los Mensjes Flash

3. Las aplicaciones de Rails usan mensajes de flash para notificarnos sobre acontecimientos. Nosotros usaremos muchos mensajes de flash en el futuro, así que queremos que tengan buen aspecto. El ejemplo propuesto por Devise funcionara, pero pronto llegará a ser insuficiente para nuestra aplicación. Utilizaremos un código diferente. Navega a  app/views/layouts/application.html.erb

4. app/views/layouts/application.html.erb


<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

        

"<%= yield %>" será substituida por nuestras plantillas, de modo que no necesitemos escribir todo el código necesario del HTML que tenga que aparecer en cada página. Deseamos mostrar los mensajes sobre “yield”:


<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
</head>
<body>

<% flash.each do |key, value| %>
    <div class="alert alert-<%= key %> alert-dismissable">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
        <%= value %>
    </div>
<% end %>

<%= yield %>

</body>
</html>

        

Este código está escrito para que tome ventaja de TwitterBootstrap CSS. En el paso 4 no se tiene que hacer nada ya que tenemos la última versión de Rails. Y lo mismo con el paso 5, no estaremos haciendo cambios a la vista (views) así que ya terminamos.

Paso 5: Configura los correos electrónicos

Ya casi terminamos con la configuración. La última cosa que tenemos que establecer es el sistema de correo electrónico para que nuestra aplicación pueda enviar correos electrónicos, como para los de restablecer contraseñas. Para empezar, abre el archivo initializer de Devise:

 

config/initializers/devise.rb


config.mailer_sender = 'please-change-me-at-config-initializers-devise@example.com'

¿Puedes ver esto? Cámbialo al email de la aplicación que utilizarás para registrar los correos electrónicos. En el siguiente paso, configuraremos el sistema de correo electrónico para que Gmail envié esos emails. Si utilizas Gmail, puedes poner tu propio correo electrónico, si no usas Gmail, abre un cuenta aqui.

Asimismo, asegúrate de que esta línea no este comentada:

config/initializers/devise.rb


config.secret_key = '1788ecf9deaa49646a8cf657d2c00faedd63033f8bfe3e16c7ddc0808502482a11b640c5b0a9f1089696477e7f3199a9861a1594422fccfa4222bb5d151b60fc'

Mira este archivo. Aquí hay muchas opciones para Devise.

Paso 6: Modifica la configuración de producción y desarrollo

A continuación, agregaremos una configuración para enviar mensajes de correo electrónico reales. En la carpeta config/environments modificaremos ambas configuraciones development y production:

/config/environments/development.rb


config.action_mailer.default_url_options = { :host => 'localhost:3000' }
config.action_mailer.delivery_method = :smtp
config.action_mailer.smtp_settings = {
      address: "smtp.gmail.com",
      port: 587,
      authentication: "plain",
      enable_starttls_auto: true,
      user_name: "your_email@gmail.com",
      password: "your_password"

  }

/config/environments/production.rb


config.action_mailer.default_url_options =   { :host => 'your_app.herokuapp.com' }
config.action_mailer.delivery_method = :smtp
config.action_mailer.smtp_settings = {
      address: "smtp.gmail.com",
      port: 587,
      authentication: "plain",
      enable_starttls_auto: true,
      user_name: "your_email@gmail.com",
      password: "your_password" 

  }

Paso 7: Ejecuta Rails Server

En este punto, es una buena idea reiniciar la aplicación. El generador que acabamos de correr, ha creado un nuevo archivo inicializador. Todos los inicializadores se cargan durante el inicio de la aplicación, así que si estás ejecutando tu servidor en este momento hazlo comenzar de nuevo. En la terminal presiona en el teclado "control + C" y escribe:


$ rails server

Abre una ventana de terminal diferente a la que está ejecutando el servidor y el escribe:


$ rails generate devise user

Con este comando, Rails creará nuevos archivos:


invoke  active_record
create    db/migrate/20140506090012_devise_create_users.rb
create    app/models/user.rb
invoke    test_unit
create      test/models/user_test.rb
create      test/fixtures/users.yml
insert    app/models/user.rb
route  devise_for :users

Paso 8: Checa a la base de datos y ejecuta "Rake Routes"

El primer archivo es un archivo de migración: 20140506090012_devise_create_users.rb piensa en el como una instrucción para hacer cambios en la base de datos. Utilizaremos nuestra base de datos por primera vez. Abre el archivo checa lo que dice:  

db/migrate/20140506090012_devise_create_users.rb


class DeviseCreateUsers < ActiveRecord::Migration
  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
    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

¡Cuidado! Debido a razones desconocidas, a veces los archivos de migración se generan sin la extensión *.rb. Si la extensión .rb no está presente, la migración no se ejecutará y tendrás todo tipo de problemas. Así que si tu archivo de migración no tiene *.rb – agrégalo.

En este tutorial, usaremos la configuración predeterminada. Pero si estás interesado en cambiar los valores predeterminados, ve a la página de github y lee la documentación.

A continuación, el documento que se ha creado es el modelo de usuario. Modelo define la naturaleza de nuestros registros. Mientras construimos nuestra aplicación entenderás con más claridad sus funciones. Por ahora, ¡simplemente échale un vistazo!

app/models/user.rb


class User < ActiveRecord::Base
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable
end

En la primera y última línea está la apertura y el cierre de nuestra declaración de modelo. Todo relacionado con el usuario lo escribiremos en el código que esta entre esas las dos líneas. Device ha añadido un par de líneas en el archivo:


# Include default devise modules. Others available are:
# :confirmable, :lockable, :timeoutable and :omniauthable
devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable

Estas declaraciones dan algunas habilidades especiales a nuestros usuarios. Se pueden inscribir (: registerable), iniciar su sesión (: database_authenticatable) recuperar la contraseña (:recoverable), agregar una casilla de verificación para que el sitio web los recuerde (: rememberable), podemos ver cuando entraron o salieron (: trackable); y en el registro, podemos comprobar si los datos que han proporcionado son válidos (: validatable).

También hemos creado archivos de prueba que no utilizaremos por ahora. La última línea ("Itinerario devise_for: users") indica que Device altero nuestros archivo de  routes.rb.

/config/routes.rb


Rails.application.routes.draw do
  devise_for :users

  root 'static_pages#home'

  #more lines of commented out code
end

Esta línea de código nos permite utilizar varias rutas para administrar a los usuarios. Echémosle un vistazo. En la terminal, desde donde está la carpeta de nuestra aplicación, escribe:

bash


$ rake routes


new_user_session GET    /users/sign_in(.:format)       devise/sessions#new
            user_session POST   /users/sign_in(.:format)       devise/sessions#create
    destroy_user_session DELETE /users/sign_out(.:format)      devise/sessions#destroy
           user_password POST   /users/password(.:format)      devise/passwords#create
       new_user_password GET    /users/password/new(.:format)  devise/passwords#new
      edit_user_password GET    /users/password/edit(.:format) devise/passwords#edit
                         PATCH  /users/password(.:format)      devise/passwords#update
                         PUT    /users/password(.:format)      devise/passwords#update
cancel_user_registration GET    /users/cancel(.:format)        devise/registrations#cancel
       user_registration POST   /users(.:format)               devise/registrations#create
   new_user_registration GET    /users/sign_up(.:format)       devise/registrations#new
  edit_user_registration GET    /users/edit(.:format)          devise/registrations#edit
                         PATCH  /users(.:format)               devise/registrations#update
                         PUT    /users(.:format)               devise/registrations#update
                         DELETE /users(.:format)               devise/registrations#destroy
                    root GET    /                              static_pages#home

Paso 9: Añade el enlace al Master Layout

Ahora, vamos a utilizar las rutas y ponerles un enlace para iniciar la sesión en nuestro diseño maestro:

/app/views/layouts/application.html.erb


<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
</head>
<body>

<% flash.each do |key, value| %>
<div class="alert alert-<%= key %> alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <%= value %>
</div>
<% end %>

<%= link_to 'Login', new_user_session_path %>

<%= yield %>

</body>
</html>

Puedes ver cómo hemos utilizado la primera columna de las rutas "new_user_session" que apunta a la URL "localhost:3000/users/sign_in" se va para devise/sessions controller y crea una "nueva" acción. Vamos a ver cómo funciona. Inicia el servidor si aún no lo has hecho:

bash


rails server

=> Booting WEBrick
=> Rails 4.1.0 application starting in development on http://0.0.0.0:3000
=> Run `rails server -h` for more startup options
=> Notice: server is listening on all interfaces (0.0.0.0). Consider using 127.0.0.1 (--binding option)
=> Ctrl-C to shutdown server
[2014-05-07 11:06:08] INFO  WEBrick 1.3.1
[2014-05-07 11:06:08] INFO  ruby 2.1.1 (2014-02-24) [x86_64-darwin13.0]
[2014-05-07 11:06:08] INFO  WEBrick::HTTPServer#start: pid=22386 port=3000

Y abre una página web en el navegador: localhost:3000

devise missing migration error

¿Qué es eso? ¿Recuerdas cómo creamos los usuarios con Device? Esto genera un archivo de migración. Sin embargo, aún no hemos usado ese archivo de migración  para actualizar nuestra base de datos. Por esta razón nos dice: Migrations are pending. To resolve this issue, run: bin/rake db:migrate RAILS_ENV=development. Puedes arreglar este problema rápidamente mediante la ejecución de "migración". Abre una nueva ventana de tu terminal y navega a tu aplicación. En Mac, fácilmente puedes hacerlo pulsando comando + t en el teclado:

bash


$ rake db:migrate

== 20140506090012 DeviseCreateUsers: migrating ================================
-- create_table(:users)
   -> 0.0040s
-- add_index(:users, :email, {:unique=>true})
   -> 0.0014s
-- add_index(:users, :reset_password_token, {:unique=>true})
   -> 0.0008s
== 20140506090012 DeviseCreateUsers: migrated (0.0064s) =======================

Vuelve al navegador y actualiza el navegador.

devise login screen 1devise login screen 2devise login screen 3devise login screen 4

Paso 10: Añade Registro e inicio de sesión. 

¡Excelente! Ahora podemos registrar e iniciar la sesión. Casi hemos terminado con este tutorial. Todo lo que necesitamos ahora es cerrar la sesión. Abramos nuestro archivo application.html.erb y cambiemos un poco nuestro enlace. Nosotros podemos borrar: <%= link_to 'Login', new_user_session_path %> y reemplazarlo con el código de abajo.

/app/views/layouts/application.html.erb


<% if current_user %>
    <%= link_to 'Logout', destroy_user_session_path, method: :delete %>
<% else %>
    <%= link_to 'Login', new_user_session_path %>
<% end %>

Si ahora actualizas el sitio web, deberás de ver un enlace para cerrar la sesión. Comprueba si funciona

devise logout screen 1devise logout screen 2

Observa cómo usamos "current_user."Este método es proporcionado por Devise, si el usuario está conectado, current_user nos devolverá su récord. Podríamos escribir un código que <%= current_user.email %> y ponerlo en el layout. El problema es que cuando un usuario no está conectado, entonces current_user nos dará "nil”(nulo) y el código <%= current_user.email %> will evaluate to <%= nil.email %> y colgara nuestro sitio Web. Por lo tanto, debemos envolverlo dentro de la cláusula que comprueba si current_user está presente, o si el usuario inicio la sesión.

/app/views/layouts/application.html.erb


<% if current_user %>
    Welcome <%= current_user.email %> <%= link_to 'Logout', destroy_user_session_path, method: :delete %>
<% else %>
    <%= link_to 'Login', new_user_session_path %>
<% end %>

Practica con él. Si ya configuraste tu correo electrónico, la aplicación también debe enviarte un email para restablecer tu contraseña.

Paso 11: Compromete a Git and Depliega en Heroku

Por último, todo se compromete a git y se despliega en heroku:

bash


$ git add .
$ git commit -m "added devise users"

[master c8666a9] added devise
 9 files changed, 250 insertions(+), 29 deletions(-)
 create mode 100644 app/models/user.rb
 create mode 100644 db/migrate/20140506090012_devise_create_users.rb
 create mode 100644 db/schema.rb
 create mode 100644 test/fixtures/users.yml
 create mode 100644 test/models/user_test.rb


$ git push


$ git push heroku master

Después de empujar todo, tienes que migrar la base de datos en Heroku


$ heroku run rake db:migrate

¡Buen trabajo! ahora la autenticación está funcionando. Es hora de construir algo.

Si tu Inicio de sesión serás capaz de marcar esto tutorial Como vas avanzando tu progreso



Comentarios

  • en: Brunitob escribió:

    Such a wonderful guide!!!
  • en: Brunitob escribió:

    I had a minor issue when deploying to heroku, logout didn´t work. I solved -> http://stackoverflow.com/a/23317324
  • en: Mayurkumar escribió:

    thank you very much for such a wonderfull guide..

  • en: nate escribió:

    Lots of tutorials are great for diving deep and learning. These are great for building. Love it! I am wondering how to safely push to an open source repository like github if the email password is in the production.rb and development.rb files? Can't wait to work with these more.

  • en: COConsulting escribió:

    @nate I use the Figaro gem to help hide passwords when pushing my code to a public repository like github.

  • en: COConsulting escribió:

    I was a little misled by the title of this tutorial. It would be better titled "How to support users with Devise", or "How to allow users with Devise". The current title of, "How to manage users with Devise" made me think that this would be a tutorial showing how you can actually manage the users on your website using Devise. This is something that I am trying to implement on my site. I have Devise working and users are able to signup, login, update their profile, etc. And I even have multiple security levels (one being admins). Now, I want to allow a user that is an admin the ability to manage the other users on the site to reset passwords, or update the client's information. Unfortunately, that is not what this tutorial does.

    Other than a misleading title, it was a very thorough tutorial. Thank you.

Comentar

Tú puedes Inicio de sesión Comentar