rails deviseの使い方
deviseとは
deviseはrailsのGemで、ユーザーのログイン機能などを簡単に実装できるGem。
他にも、メールアドレスを用いたパスワードの再設定もこのGemで、できたりと、拡張性が非常に高い！
しかし、その一方で、便利な機能を兼ね備えすぎている為、よく分からないまま使うと思わぬ事態を招く可能性もあるみたい。なので、使うか使わないかは人によるらしい。
deviseのインストール方法
Gemfileに、gemを追加する
gem 'devise' 👈deviseのgem
gem 'devise-i18n' 👈deviseの日本語化をするgem$ bundle installdeviseの設定
ターミナルで以下を打つだけ
$ rails g devise:installdeviseを適用したいモデルの追加
大体は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'
endapp/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
endapp/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の設定方法はたくさんあった為、大変だなと感じた一方で、基本的な部分の設定が済んでしまえば簡単に認証機能ができるのが良いと感じました。
あとはビューをカスタマイズしたりしていきたいなと思います。
抜けているところなどがあればご指摘お願いいたします。
この記事が気に入ったらサポートをしてみませんか？