新規登録画面、ログイン画面の作成

新規登録画面・ログイン画面は、deviseの導入により作成されている。

しかし、今回作成するアプリケーションでは、デフォルトにないnameを登録時、ログイン時に使用する。

それぞれ下記のように設定を変更する。

新規登録時には、nameの登録を追加。
ログイン時には、emailの部分をnameに変更。

Usersテーブルの確認

nameを使用するためには、Usersテーブルにnameカラムが必要である。

以前のdeviseの導入時に作成済みのため、db/schema.rbの記載を確認する。

db/schema.rb

(省略)
create_table "users", force: :cascade do |t|
    t.string "email", default: "", null: false
    t.string "encrypted_password", default: "", null: false
    t.string "reset_password_token"
    t.datetime "reset_password_sent_at"
    t.datetime "remember_created_at"
    t.string "name"                   # nameカラム
    t.text "introduction"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
    t.index ["email"], name: "index_users_on_email", unique: true
    t.index ["reset_password_token"], name: "index_users_on_reset_password_token", unique: true
  end
(省略)

deviseの初期設定を変更する

deviseの設定ファイルである/config/initializers/devise.rbの設定を変更してく。

今回変更するのは、新規登録・ログインに使用するカラムの変更であるため、下記の手順に沿って、変更していく。

Configuration for any authentication mechanismの項目を探す(49行目付近)
Configuration for any authentication mechanismの少し下にある、# config.authentication_keys = [:email]のコメントを解除する(コメントアウトを外す。)
config.authentication_keys = [:email]をconfig.authentication_keys = [:name]に変更する

config/initializers/devise.rb

(変更前) # config.authentication_keys = [:email]

(変更後) config.authentication_keys = [:name]

この記述を変更することにより、デフォルトでemailを使用していたログイン機能が、

nameを使用して新規登録・ログインするように設定変更される。

ただし、この状態ではemailは新規登録時に認証されなくなり、使えなくなる。

今回は、新規登録時にemail登録もするため、emailも認証できるように設定を追加していく。

新規登録時にemailを認証する

app/controllers/application_controller.rbに記述をしていく。

app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
  before_action :configure_permitted_parameters, if: :devise_controller?

  protected

  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:email])
  end
end

内容の確認

before_action :configure_permitted_parameters, if: :devise_controller?

上記の記述により、deviseの機能を利用する前に、configure_permitted_parametersメソッドが実行される。

def configure_permitted_parameters
  devise_parameter_sanitizer.permit(:sign_up, keys: [:email])
end

configure_permitted_parametersメソッドでは、devise_parameter_sanitizer.permitメソッドを使うことでユーザー登録(sign_up)の際に、メールアドレス(email)のデータ操作を許可しています。

ビューの編集

上記の設定で新規登録・ログイン時にname, emailが使用できるようになったため、viewを編集していく。

app/views/devise/registrations/new.html.erb　（新規登録画面）

<h2>Sign up</h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= render "devise/shared/error_messages", resource: resource %>

  # 追加
  <div class="field">
    <%= f.label :name %><br />
    <%= f.text_field :name %>
  </div>

  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
  </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: "new-password" %>
  </div>

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

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

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

app/views/devise/sessions/new.html.erb　（ログイン画面）

(変更前)
  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
  </div>

(変更前)
  <div class="field">
    <%= f.label :name %><br />
    <%= f.text_field :name %>
  </div>

表示ビュー（新規登録画面）

表示ビュー（ログイン画面）

以上。

アプリケーションの作成参考URL　作成するアプリケーションについて - takifugu’s blog