rails deviseの使い方

mosanei

deviseとは

deviseはrailsのGemで、ユーザーのログイン機能などを簡単に実装できるGem。

他にも、メールアドレスを用いたパスワードの再設定もこのGemで、できたりと、拡張性が非常に高い！

しかし、その一方で、便利な機能を兼ね備えすぎている為、よく分からないまま使うと思わぬ事態を招く可能性もあるみたい。なので、使うか使わないかは人によるらしい。

deviseのインストール方法

Gemfileに、gemを追加する

gem 'devise' 　👈deviseのgem

gem 'devise-i18n'　👈deviseの日本語化をするgem
$ bundle install

deviseの設定

ターミナルで以下を打つだけ

$ rails g devise:install


deviseを適用したいモデルの追加

大体はuserモデルだと思います。

$ rails g devise user　👈これで、dbや、user.rb　routeが追加されます。


次にマイグレーションファイルをdbに適用します。

$ rails db:migrate

これで、deviseを用いた最低限のユーザーの新規登録や、ログイン機能が実装されました。

http://localhost:3000/users/sign_in

を見に行くと、英語でLog inと書かれたページが表示されるはずです！

※もし表示されず、route errorなどがでた場合は、一度railsを再起動させてみましょう。改善されるはずです（私がそうでした。笑）


deviseの日本語化

config/application.rbを開き、config.i18n.default_locale = :jaを追記

config.load_defaults 6.1
   config.i18n.default_locale = :ja　👈追記

これで、日本語化ファイルを読み込むことができるようになる。


次に 、

$ rails g devise:i18n:locale ja

これで、config/locales/devise.views.ja.ymlが作成される。

👇こんな感じのファイル

ja:
 activerecord:
   attributes:
     user:
       confirmation_sent_at: パスワード確認送信時刻
       confirmation_token: パスワード確認用トークン
       confirmed_at: パスワード確認時刻
       created_at: 作成日
       current_password: 現在のパスワード
       current_sign_in_at: 現在のログイン時刻

また、上記のファイルの日本語のテキストを変更することで、日本語のメッセージも変更することもできる。


viewの変更

ログインページなどのviewの変更も行うことができる。

$ rails g devise:views users

☝️これで、

create    app/views/users/shared
     create    app/views/users/shared/_error_messages.html.erb
     create    app/views/users/shared/_links.html.erb
     invoke  form_for
     create    app/views/users/confirmations
     create    app/views/users/confirmations/new.html.erb
     create    app/views/users/passwords


こんな感じにファイルが作られるので、必要なところをカスタマイズする。


カラムの追加

うっかりカラムの追加を忘れていても大丈夫です！

例えば、Usersテーブルにnameを追加したいときは、

$ rails g migration AddNameToUsers name:string

このようにするだけで、migrationファイルが作成されます。

$ rails db:migrate

マイグレーションファイルができたら、dbに適用するのを忘れないようにしましょう！


テストユーザーを作るときは

dbのseeds.rbに

users = ["tanaka", "ミキ", "近藤", "森友", "さと"]
users.each_with_index do |user, i|
 User.create(
   name: "#{user}",
   email: "#{i + 1}@hoge.com",
   password: "password"
 )
end

上記みたいな感じで書けばテストユーザーが作られる。


追加したカラムを登録できるようにする

deviseは追加したnameカラムなどを初期の状態では登録してくれない為、追加したカラムを登録できるようにする。

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])　👈サインアップ時にnameが登録できる
   devise_parameter_sanitizer.permit(:account_update, keys: [:name, :avator, :introduction])　👈アカウントedit時にname,avator,introductionが登録できる
 end
end


ログインしてみる

$ rails g devise:controllers users

これで、deviseのコントローラーを触れるようにする

そして、routes.rbに下記のように記述する

devise_for :users, controllers: {
   sessions: 'users/sessions'
 }


次に、

http://localhost:3000/users/sign_in

にアクセスすると、ログイン画面が表示される

また、ビューに以下を埋め込むとログイン画面の他にも遷移することもできる。

<%= link_to "ログイン", new_user_session_path %>

<%= link_to "ログアウト", destroy_user_session_path, method: :delete %>

<%= link_to "新しく登録する", new_user_registration_path %>


ユーザー編集画面を作る

deviseには、ユーザー編集画面がdefaultであるが、内容はemailとpasswordの変更のみとなっているので、この画面を残しつつ、ユーザーの名前は別の画面で作るようにする。

ユーザー情報のページ

ユーザー情報のページは、下記で作成

$ rails g controller Users show

作られた、app/views/users/show.html.erbに

<h3>ユーザー名</h3>
<%= @user.name %>
<h3>メールアドレス</h3>
<%= @user.email %>

同じく作られた、app/controllers/users_controller.rbに

def show
   @user = current_user　　👈これで、ログインしているユーザーの情報を取得している
 end

これで、ユーザー詳細ページは完了


deviseのユーザー情報ページ（元からあるやつ）の設定

routes.rbに

devise_for :users, controllers: {
   sessions: 'users/sessions',
   registrations: 'users/registrations' #追加
 }


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

<div class="container device">
 <div class="device_frame">
   <h2 class="mb-3">アカウント編集</h2>
   <div class="device_inner">
     <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
       <%= render "devise/shared/error_messages", resource: resource %>
       <div class="field">
         <div class="form-group">
           <%= f.label :email, "メールアドレス" %><br>
           <%= f.email_field :email, autofocus: true, autocomplete: "email", class:"form-control", placeholder: "メールアドレスを入力してください" %>
         </div>
       </div>
       <div class="field">
           <div class="form-group">
             <%= f.label :password, "変更後パスワード（変更する場合のみ入力）" %><br>
             <%= f.password_field :password, autocomplete: "password" , class:"form-control"%>
           </div>
       </div>
       <div class="field">
         <div class="form-group">
           <%= f.label :password_confirmation, "パスワード確認用（変更する場合のみ入力）" %><br>
           <%= f.password_field :password_confirmation, autocomplete: "password", class:"form-control" %>
         </div>
       </div>
       <div class="field">
         <div class="form-group">
           <%= f.label :current_password, "現在のパスワード" %><br>
           <%= f.password_field :current_password, autocomplete: "current-password", placeholder: "現在のパスワードを入力" , class:"form-control"%>
         </div>
       </div>
       <div class="actions">
         <%= f.submit "更新", class: "form-control btn-primary my-4" %>
       </div>
     <% end %>
     <%= link_to "戻る", :back, class: "btn btn-outline-secondary form-control"%>
   </div>
 </div>
</div>

これで、現在のパスワードを変えたりできる！


deviseのユーザー情報ページ（追加Ver）の設定

defaultのユーザー情報画面には、下記でアクセスできる。

<%= link_to "編集", edit_user_registration_path %>

routes.rbに

devise_scope :user do
  get 'profile_edit', to: 'users/registrations#profile_edit', as: 'profile_edit'
  patch 'profile_update', to: 'users/registrations#profile_update', as: 'profile_update'
end


app/controllers/users/registrations_controller.rbに

def profile_edit

end
 
def profile_update
  current_user.assign_attributes(account_update_params)
  if current_user.save
    redirect_to users_account_path, notice: "ユーザー情報を更新しました"      
  else
    render "profile_edit"
  end
end


app/views/users/registrations/profile_edit.html.erbを作成して

<%= form_for current_user, url: {action: 'profile_update'} do |f| %>
 <div class="field">
   <%= f.label :name %><br />
   <%= f.text_field :name %>
 </div>
 <div class="actions">
   <%= f.submit "Update" %>
 </div>
<% end %>

※form_forはform_withの方がいいそうです。

これで、deviseに元からあるeditページと、追加したprofile_editページでアカウントの情報を更新できる。


アカウントアップデートや、アカウント登録後にページ遷移させたいとき

deviseのdefaultでは、アカウントの登録や更新後は、root_pathに行くように設定されている。

これを変えたい（ユーザー情報ページなどにリダイレクトさせたい）ときは、

app/controllers/users/registrations_controller.rbには、

protected

# 登録後のリダイレクト先
 def after_sign_up_path_for(resource)
   users_account_path
 end
 # アカウント情報更新後のリダレクト先
 def after_update_path_for(resource)
   users_account_path
 end

これを追記する。

※ users_account_pathのところは、任意で変更できる。（users_show_pathなど）


app/controllers/users/sessions_controller.rbには、

#ログイン後のリダイレクト先
def after_sign_in_path_for(resource)
    users_account_path
end 

#ログアウト後のリダイレクト先
def after_sign_out_path_for(resource)
    root_path
end

を追記する。

これで、deviseの初期設定は完了！


まとめ

調べたら、deviseの設定方法はたくさんあった為、大変だなと感じた一方で、基本的な部分の設定が済んでしまえば簡単に認証機能ができるのが良いと感じました。

あとはビューをカスタマイズしたりしていきたいなと思います。

抜けているところなどがあればご指摘お願いいたします。

いいなと思ったら応援しよう！