【Rails】devise ユーザ名とパスワードでログインする方法

deviseでユーザ名とパスワードでログインでする方法

DMM webcampの課題3では、ユーザ名とパスワードでログインできるようにします。
「rails devise ユーザ名 ログイン」、「rails devise 名前ログイン」で調べて実装します。
自分の理解を深めるために解説をしていきます！

deviseのインストール

1. Gemfileの1番下にDeviseのGemを追加

Gemfile

gem 'devise'

2. bundle installコマンドを実行してDeviseのGemをインストール

ターミナル

bundle install

3. Deviseの初期設定ファイルを生成するために、rails generate devise:installコマンドを実行

ターミナル

rails g devise:install

Modelの作成

Deviseを使用したユーザーモデルを生成するために、rails generate devise MODELコマンドを実行。

ターミナル

rails g devise User

モデル名は「User」とします。
このコマンドにより、Deviseが提供する認証関連の機能が含まれたモデルが作られます。

通常のモデル作成では、rails g model モデル名で作成します。
devise を使うと、記述が変わることに注意。rails g devise モデル名の記述は、devise 独自のルール。

ユーザーテーブルのカスタマイズ

• ユーザーモデルに名前のカラムを追加

ターミナル

rails g migration add_name_to_users name:string:null:false

ユーザーの名前を保存し、ユーザーが名前を使用してログインできるようになるために追加します。
null:falseの記述を入れることで、nameカラムが空のままになることを防ぎます。

• 生成されたマイグレーションファイルをデータベースに適用

ターミナル

rails db:migrate

Viewファイル作成

ターミナルに以下を入力します。

ターミナル

rails g devise:views

app/views以下にdeviseのフォルダが作成されました。

Sign up画面の編集

1. フォームを作成するヘルパーとしてform_forが使用されているので、form_withへ変更します。
2. ユーザー登録の際にnameも登録するため、フォームを追加します。この時、autofocus: trueを記載します。
3. autofocusがemailのフォームに入っているため削除します。

autofocus属性を使用すると、ページが読み込まれたときに自動的にフォームの入力フィールドにフォーカスが当てられます。つまり、ページが表示されるとすぐにそのフィールドに入力できる状態になります。
今回はnameを先に入力できるようにするため、nameを指定します。

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

 <h2>Sign up</h2>

+ <%= form_with model: @user, url: user_registration_path do |f| %>
- <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>

 <%= render "devise/shared/error_messages", resource: resource %>

+ <div class="field">
+   <%= f.label :name %><br>
+   <%= f.text_field :name, autofocus: true, autocomplete: "name" %>
+ </div>

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

:
:

• アクセスして動作を確認します。

Controllerの編集

初期状態の devise は、サインアップ、サインイン時に「email」と「パスワード」しか受け取ることを許可されていません。
したがって、現状では name を入力しても、データとして保存することができません。

ここで、こちらで指定したデータは保存できるよう、許可を与える必要があります。
これはストロングパラメータと同じ機能です。

以下のように記述します。

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: [:name, :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: [:name, :email])
end

configure_permitted_parametersメソッドでは、devise_parameter_sanitizer.permitメソッドを使うことでsign_upアクション（新規登録）時に、ユーザー名（:name）とメールアドレス(:email）のパラメータを許可しています。

この設定により、新しいユーザーが登録する際に名前を入力できるようになります。
名前が正常に保存され、後続の処理で使用することができます。

• protected vs private
  protected：他のコントローラからも参照することができる
  private：記述をしたコントローラ内でしか参照できない

protectedを使っているけど、ここではprivateでもよさそう。調べて後日追記します。

ログイン画面の変更

ログイン画面もnameを送るフォームに修正します。
また、Sign up画面同様に、フォームを作成するヘルパーとしてform_forが使用されているので、form_withへ変更します。

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

 <h2>Log in</h2>

+ <%= form_with model: @user, url: user_session_path do |f| %>
- <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
 
+ <div class="field">
+   <%= f.label :name %><br />
+   <%= f.text_field :name, autofocus: true, autocomplete: "name" %>
+ </div> 
 
- <div class="field">
-   <%= f.label :email %><br />
-   <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
- </div>

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

emailのフォームを削除し、nameのフォームを追加しました。

devise初期設定ファイルの修正

認証キーの#コメントアウトを外し、email→nameに変更します。

config/initializers/devise.rb

+ config.authentication_keys = [:name]
-  # config.authentication_keys = [:email]

バリデーション設定

ユーザ名が空でなく、かつ2文字以上の名前を要求するよう設定します。

app/models/user.rb

validates :name, presence: true, length: { minimum: 2 }

以上で名前とパスワードでログインできるようになりました。

まとめ

ポイントは以下の通りです。

1. deviseをインストールしモデルを作成
2. nameのカラムを追加しマイグレーション
3. コントローラを編集し、nameのパラメータを送れるようにする
4. 新規登録画面、ログイン画面の編集
5. 認証キーをnameに変更