【Ruby on Rails】deviseを使ってユーザー認証の実装

Ruby on Railsでdeviseを使って、ログイン機能を追加してみた際のメモです。

deviseとはRubyのgem(ライブラリ)の1つで、ログイン機能の実装を簡単にしてくれるgemです。

今回はある程度基本機能がついてあるアプリにdeviseで機能を追加していくのを想定しています。

まずはdevise gemの追加。

# Gemfile
gem 'devise'

bundle installを実行。

$ rails generate devise:install

これでdeviseの機能がインストールされる。

config/environments/development.rb にデフォルトのURLの設定する下記を記述。

# config/environments/development.rb
config.action_mailer.default_url_options = { host: 'localhost:3000' }

app/views/layouts/application.html.erb にログインした時とできなかった時のアラートを設定。

<%= yield %>の上に追加。

<% if notice %>
  <p class="alert alert-success"><%= notice %></p>
<% end %>
<% if alert %>
  <p class="alert alert-danger"><%= alert %></p>
<% end %>

app/views/ideas/show.html.erb 等にある

<p id="notice"><%= notice %></p>

を適時削除。

app/views/layouts/application.html.erb に下記を記述。

<p class="navbar-text pull-right">
  <% if user_signed_in? %>
    Logged in as <strong><%= current_user.email %></strong>.
    <%= link_to 'Edit profile', edit_user_registration_path, class: 'navbar-link' %> |
    <%= link_to "Logout", destroy_user_session_path, method: :delete, class: 'navbar-link'  %>
  <% else %>
    <%= link_to "Sign up", new_user_registration_path, class: 'navbar-link'  %> |
    <%= link_to "Login", new_user_session_path, class: 'navbar-link'  %>
  <% end %>
</p>

ログインしている場合はプロフィールの編集とログアウトボタンを表示。

ログアウトしている場合は新規登録とログインボタンを表示。

app/controllers/application_controller.rb に下記を記述して、ログインしないとホームを見れに様にする。

before_action :authenticate_user!

authenticate_user!はログインしていない場合にログインページにリダイレクトさせるヘルパーメソッド。

deviseの導入で使えるようになる。

下記コマンドで app/views/devise とapp/controllers/usersを作成。

どちらもデフォルトでは隠れているので必須作業。

# app/views/devise作成
$ rails g devise:views
# app/controllers/users作成
$ rails g devise：controllers users 

User情報をいれるマイグレーションファイルを追加。

$ rails g migration add_username_to_users

できたマイグレーションファイルに下記を記述、適時必要なユーザー情報を追加。

今回は名前、郵便番号、住所、自己紹介の4つ設定。

class AddUsernameToUsers < ActiveRecord::Migration[6.1]
  def change
    add_column :users, :username, :string #名前
    add_column :users, :postal_code, :string #郵便番号 
    add_column :users, :address, :text # 住所
    add_column :users, :description, :text # 自己紹介
  end
end

その後

rails db:migrate

でマイグレーション実行。

views/devise/registrations/new.html.erb に追加したUser情報を表示する。

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

# 下記を追加
<div class="field">
    <%= f.label :username %><br />
    <%= f.text_field :username, autofocus: true, autocomplete: "username" %>
  </div>

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

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

  <div class="field">
    <%= f.label :description %><br />
    <%= f.text_area :description, autofocus: true, autocomplete: "description" %>
  </div>

views/devise/registrations/edit.html.erb にも追加したUser情報を表示する。

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

# 下記を追加
<div class="field">
    <%= f.label :username %><br />
    <%= f.text_field :username, autofocus: true, autocomplete: "username" %>
  </div>

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

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

  <div class="field">
    <%= f.label :description %><br />
    <%= f.text_area :description, autofocus: true, autocomplete: "description" %>
  </div>

画面出力👇

良い感じ。

$ rails generate devise user
$ rails db:migrate

でUser modelを作成。

作ったmodels/user.rb にバリデーションを設定。

# models/user.rb

class User < ApplicationRecord
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable
# 下記を追加
  validates :username, presence: true, length: { minimum: 3, maximum: 20 }
  validates :address, length: { maximum: 100 }
  validates :description, length: { maximum: 250 }
end

最小文字や最大文字数をvalidates設定。

app/controllers/users_controller.rbを作成して下記を記述。

# users_controller作成
$ rails g controller Users show

# app/controllers/users_controller.rb

# 下記を追加
def show
  @user = User.find(params[:id])
end

app/views/layouts/application.rb の基本画面にユーザー詳細画面へのリンクを設定。

# app/views/layouts/application.rb

# 下記を追加
<%= link_to t('layouts.my_page'), current_user, class: 'navbar-link' %>

次にapp/views/users/show.html.rbを作成してに表示画面の設定。

# app/views/users/show.html.erb

<h1>ユーザー情報</h1>
<p>名前 : <%= @user.username %></p>
<p>メールアドレス : <%= @user.email %></p>
<p>郵便番号 : <%= @user.postal_code %></p>
<p>住所 : <%= @user.address %></p>
<p>プロフィール : <%= @user.description %></p>

画面出力👇

自分の詳細画面が表示できた。

app/views/layouts/application.rb の基本画面にユーザー一覧画面へのリンクを設定。

# app/views/layouts/application.rb

# 下記を追加
<%= link_to t('layouts.user_list'), users_path, class: 'navbar-link' %> |

app/views/users/index.html.rbを作成してに表示画面の設定。

<h1>ユーザー一覧</h1>
<% @users.each do |user| %>
  <li>
    <%= link_to user.username, user %>
  </li>
<% end %>

app/controllers/users_controller.rb に一覧画面のコントローラーを設定。

# app/controllers/users_controller.rb

# 下記を追加
USER＿PAGINATION = 30 # kaminariを設定している場合はページネーションを設定
  def index
    @users = User.order(:id).page(params[:page]).per(PER)
  end

画面出力👇

これで基本的なログイン機能は完成！