Edited at

devise にusername カラムを追加し、usernameを登録できるようにする。

More than 1 year has passed since last update.

deviseはデフォルトではemailカラムとpasswordカラムしか持っていないためusernameが入っているアカウント情報を登録できない。

deviseを使う際にusernameを登録できるようにしなくてはいけなくなったため、やり方をメモしていく。

まずdeviseのインストール

Gemfile



gem 'devise', '4.1.1'

terminal

bundle install

rails g devise install

Running via Spring preloader in process 30712
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', port: 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

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

マイグレーションファイルを追加し、usernameカラムを追加していきます。

rails g migration add_username_to_users username:string

rake db:migrate

次にstrong parameterの追加


application_controller.rb

class ApplicationController < ActionController::Base

protect_from_forgery with: :exception
before_action :configure_permitted_parameters, if: :devise_controller?

protected

  def configure_permitted_parameters
added_attrs = [ :username, :email, :password, :password_confirmation ]
devise_parameter_sanitizer.permit :sign_up, keys: added_attrs
devise_parameter_sanitizer.permit :account_update, keys: added_attrs
devise_parameter_sanitizer.permit :sign_in, keys: added_attrs
end
end


参考

https://github.com/plataformatec/devise/wiki/How-To:-Allow-users-to-sign-in-using-their-username-or-email-address

次にviewをカスタマイズできるようにしていく。

rails g devise:views


devise.rb

...

config.scoped_views = true
...

viewにusername欄を追加していく。


views/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 class="field">
<%= f.label :username %><br />
<%= f.text_field :username, autofocus: true %>
</div>

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

<div class="field">
<%= f.label :password %>
<% if @minimum_password_length %>
<em>(<%= @minimum_password_length %> characters minimum)</em>
<% end %><br />
<%= f.password_field :password, autocomplete: "off" %>
</div>

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

<div class="actions">
<%= f.submit "Sign up" %>
</div>
<% end %>

<%= render "devise/shared/links" %>


これで表示してみると

スクリーンショット 2016-09-30 11.14.37.png

うまく表示できてるみたいですね。

登録はどうだろう...

signupしてusernameを表示してみると


top_pages/show.html.erb

<%= @user.username %>


スクリーンショット 2016-09-30 11.25.31.png

うまく登録できてるみたいですね!

以上