Como Agregar campos personalizados para Devise

Por:, en:

ES:This tutorial assumes you have already completed:

  1. Simple HTML Refactoring

Una vez que hayas configurado Devise, pronto te darás cuenta que se tiene que permitir a los usuarios guardar más información sobre si mismos. Así como el nombre, el género o la fecha de nacimiento. A veces se necesita un poco más que un correo electrónico.

Paso 1: Ejecuta "Rails Generate Devise"

Si exploras cuidadosamente app/views en tu te darás cuenta que no hay plantillas de HTML para iniciar la sesión, registrarse, o formularios para recordar contraseñas. Esto se debe a que todas los formularios estan dentro de Devise gem. Si nosotros queremos modificar estos formularios, tenemos que preguntarle a Devise que exporte las plantillas a nuestra carpeta de views. 

Dentro de la carpeta donde está tu aplicación, escribe en tu terminal:

bash

$ rails generate devise:views users

Después de ejecutar este comando, encontrarás un montón de nuevas carpetas dentro de app/views/users. Estos son los formularios que usaremos para registrar usuarios y restablecer contraseñas. Podemos intentar editar una de las plantillas y ver qué pasa.

app/views/users/registrations/new.html.erb

<h2>Sign up</h2>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= devise_error_messages! %>

  <div><%= f.label :email %><br />
      <%= f.email_field :email, autofocus: true %></div>

  <div><%= f.label :password %>

      <%= f.password_field :password, autocomplete: "off" %></div>

  <div><%= f.label :password_confirmation %>

      <%= f.password_field :password_confirmation, autocomplete: "off" %></div>

  <div><%= f.submit "Sign up" %></div>
<% end %>
<%= render "users/shared/links" %>

Paso 2: Cambia y Guarda el Titular

Cambiemos el titular de la página “Sign up” a “Regístrate”

app/views/users/registrations/new.html.erb

<h2>Register</h2>

Ahora, si cierras tu sesión y tratas de registrarte, esperarías ver el nuevo título de la página "Regístrate". Sin embargo, seguirás viendo "Sign up." Esto es porque tenemos que ajustar la configuración del dispositivo. Go to config/initializers/devise.rb and look for the line:

config/initializers/devise.rb

  # config.scoped_views = false

descomenta la línea y cambia a "true":


  config.scoped_views = true

Reinicia la aplicación utilizando rails server en tu terminal y vuelve a la página de registro. Esta vez veras el título de "Regístrate”.

Paso 3: Ejecuta "Migration"

Muy bien, ahora  nos podemos enfocar en añadir más información en el formulario de usuarios. Antes de modificar el formulario, tenemos que asegurarnos de que nuestro modelo puede tomar el formulario. Por el momento, nuestros usuarios pueden tener un email y una contraseña del cual ambos fueron generados por Devise. Necesitamos añadir “name” a la base de datos para los usuarios. Lo haremos con “migration”- un archivo especial que actualiza la estructura de la base de datos. En la terminal, escribe:

bash


$: rails generate migration add_name_to_users name:string

    invoke  active_record
    create    db/migrate/20140519054104_add_name_to_users.rb

Paso 4: Checa y Modifica el arhivo de Migration 

Asegúrate que el archivo generate es correcto. Asegúrate de que se vea así:

db/migrate/20140519054104_add_name_to_users.rb

class AddNameToUsers < ActiveRecord::Migration
  def change
    add_column :users, :name, :string
  end
end


 En este punto  puedes editar libremente este archivo de migration. Por ejemplo, todavía puedes agregar otros campos como el género o la fecha de nacimiento. Los incluiremos aquí en caso de que también te gustaría hacerlo. Intentaremos utilizar diferentes formatos de datos:


class AddNameToUsers < ActiveRecord::Migration
  def change
    add_column :users, :name, :string
    add_column :users, :date_of_birth, :datetime
    add_column :users, :is_female, :boolean, default: false
  end
end

Observa cómo usamos el valor booleano (verdadero o falso) para el género en lugar de utilizar un string (cadena de caracteres). Por supuesto, si deseas permitir más géneros, no dudes en implementarlos de manera diferente.

Step 5: "Migrate" la Base de Datos

Ahora podemos migrar nuestra base de datos:

bash


$ rake db:migrate

    == 20140519054104 AddNameToUsers: migrating =======================
    -- add_column(:users, :name, :string)
    -> 0.0016s
    -- add_column(:users, :date_of_birth, :datetime)
    -> 0.0005s
    -- add_column(:users, :is_female, :boolean, {:default=>false})
    -> 0.0029s
    == 20140519054104 AddNameToUsers: migrated (0.0052s) ==============

Step 6: Modifica a los Usuarios

Ahora podemos editar los usuarios existentes. Empecemos añadiendo el enlace de la página donde podemos editar el perfil de los usuarios:

app/views/layouts/_menu.html.erb

<nav class="navbar navbar-default" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <%= link_to "Demo App", root_path, class: 'navbar-brand' %>
        </div>

        <div class="collapse navbar-collapse" id="navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><%= link_to 'Posts', '#' %></li>
                <% if current_user %>
                    <li><%= link_to 'Edit Profile',edit_user_registration_path %></li>
                    <li><%= link_to 'Logout', destroy_user_session_path, method: :delete %></li>
                <% else %>
                    <li><%= link_to 'Login', new_user_session_path %></li>
                <% end %>
            </ul>
        </div>
    </div>
</nav>

Y añade los nuevos campos a este página:

app/views/users/registrations/edit.html.erb


    <h2>Edit <%= resource_name.to_s.humanize %></h2>

    <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
    <%= devise_error_messages! %>

    <div><%= f.label :name %><br />
        <%= f.text_field :name, autofocus: true %></div>

    <div><%= f.check_box :is_female, {}, true %> <%= f.label :is_female, "Female" %> </div>
    <div><%= f.check_box :is_female, {}, false %> <%= f.label :is_female, "Male" %> </div>

    <div><%= f.label :date_of_birth %><br />
        <%= f.date_select :date_of_birth %></div>

    <div><%= f.label :email %><br />
        <%= f.email_field :email %></div>

    <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
    <div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
    <% end %>

    <div><%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br />
        <%= f.password_field :password, autocomplete: "off" %></div>

    <div><%= f.label :password_confirmation %><br />
        <%= f.password_field :password_confirmation, autocomplete: "off" %></div>

    <div><%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />
        <%= f.password_field :current_password, autocomplete: "off" %></div>

    <div><%= f.submit "Update" %></div>
    <% end %>

    <h3>Cancel my account</h3>

    <p>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete %></p>

    <%= link_to "Back", :back %>


Step 7: Guarda la Informacion 

Ahora, intentemos modificar nuestro perfil con alguna información precisa y tratar de guardar los cambios.

editing custom fields in user profile

Después de guardar la información, regresa a la misma página y verás que ninguno de los campos personalizados se han guardado:

 

failed to save custom information

Esto se debe a la forma en que Rails 4 se ocupa de “mass assigment.” Por razones de seguridad, tenemos que permitir explícitamente los parámetros dentro de cada controller. Que también  preocupa a los controladores construidos en Devise Nosotros no los personalizaremos por el momento, en cambio seguiremos pautas proporcionadas por el equipo de Devise y agregaremos permisos a la aplicación del controller:
 

app/controllers/application_controller.rb


class ApplicationController < ActionController::Base
    # Prevent CSRF attacks by raising an exception.
    # For APIs, you may want to use :null_session instead.
    protect_from_forgery with: :exception

    before_filter :configure_permitted_parameters, if: :devise_controller?

    protected

        def configure_permitted_parameters
            devise_parameter_sanitizer.for(:sign_up) { |u| u.permit(:name, :email, :password) }
            devise_parameter_sanitizer.for(:account_update) { |u| u.permit(:name, :email, :password, :current_password, :is_female, :date_of_birth) }
        end
end

Cada vez que quieras editar permisos para tus usuarios, tendrás que hacerlo aquí. Observa cómo estamos especificando los permisos por separado para inscripciones y actualizaciones de la cuenta. Después de guardar estos cambios podrás modificar tu perfil de nuevo. Esta vez funcionará.

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



Comentarios

  • en: D escribió:

    The gender returns a true or false instead of male or female on my show page. How do I get the selections to show? Thanks
  • en: Brunitob escribió:

    Im having some problem with heroku, I get: We're sorry, but something went wrong.

  • en: Brunitob escribió:

    I forgot to run: heroku run rake db:migrate

  • en: Suresh Kumar R escribió:

    Hi

    Could you please the gender (male and female) as radio buttons please instead of check boxes?

  • en: Suresh Kumar R escribió:

    Hi Lucasz,

    Can I use radio buttons as follows?

              <%= f.radio_button :is_female, '1' %> <%= f.label :is_female, "Female" %>
              <%= f.radio_button :is_female, '0' %> <%= f.label :is_female, "Male" %
    
  • en: zhu_jinlong escribió:

    of course you can

  • en: Hendrix escribió:

    Hola segui los pasos que indicaste y no me funciona el login ahora.

  • en: Fabiola Cabrera escribió:

    Hola Hendrix, disculpa que te respondamos tan tarde. Cual es el error que te aparece?

  • en: Hendrix escribió:

    Hola Fabiola Cabrera, ya resolvi. Gracias.

  • en: Giancarlo escribió:

    Pero mi css se distorsiona!

  • en: Fabiola Cabrera escribió:

    Como que se te distorsiona? Que es lo que te aparece?

  • en: Pablo escribió:

    Hola que tal, seguí los pasos que indicas para agregar un nuevo campo pero cuando lo imprimo desde el controlador SessionsController me sale vacío, si imprime el correo y la clave encriptada pero el campo que agregue no. Por favor Ayuda...

  • en: carolina escribió:

    Hola!! gracias por los tutoriales están muy buenos!!!, pero no me esta generando los campos que agregue al formulario no realiza ningún cambio como el titulo, cambie el nombre pero sigue igual que puede ser? estoy usando ruby 2.0.0 y rails 4.2.4

  • en: Armando escribió:

    Excelente tutorial, claro y preciso. Gracias!!!

  • en: Tunde Adetula escribió:

    i have validated the custom fields i want in my users but now when i try to signup, it keeps asking me for that validation i.e DOB no present is there a way around that that please. A way to exempt DOB when user wants to sign up

  • en: Roy escribió:

    Buenisimo!!! gracias xD!!!

  • en: Carles Bas escribió:

    Para Rails 4 han cambiado algunos parámetros para application_controller

    The Parameter Sanitaizer API has changed for Devise 4 class ApplicationController < ActionController::Base beforeaction :configurepermittedparameters, if: :devisecontroller?

    protected

    def configurepermittedparameters

    devise_parameter_sanitizer.**permit**(:sign_up, keys: [:username])
    

    end end

    via: stackoverflow

Comentar

Tú puedes Inicio de sesión Comentar