Deviseをインストール

何と言ってもまずは、このgemをinstallするところから全ては始まります。

deviseのインストール

% gem'devise'
% bundle install
% rails g devise:install

これでdeviseのインストールが完了です。

devise関連のファイル

modelを生成

rails g devise user

ユーザーモデルとマイグレーションファイルが生成されます。
またこのコマンドを実行するとconfig/routes.rbに自動でdeviseのルーティングが設定されます。

config/routes.rb

Rails.application.routes.draw do
  devise_for :users
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

viewを生成

rails g devise:views

このコマンドを実行すると自動的に必要な機能のビューファイルをあっという間に生成してくれます。

各ファイルの編集

マイグレーションファイル

今回は新規登録画面において以下の情報をテーブルに送ります。

db/migrate/025412010...

lass DeviseCreateUsers < ActiveRecord::Migration[6.0]
  def change
    create_table :users do |t|
      ## Database authenticatable
      t.string :name,               null: false
      t.string :email,              null: false, default: ""
      t.string :encrypted_password, null: false, default: ""
      t.string :last_name,          null: false
      t.string :first_name,         null: false
      t.string :kana_last,          null: false
      t.string :kana_first,         null: false
      t.date   :birthday,           null: false
      ... (省略)

これで事前にテーブル設計しておいた情報を記述したので後はmigrateしてusersテーブルの完成です。

% rails db:migrate

エラーとバリデーションの設定

app/views/devise/registrations/new.html.erbファイルに記載したフォームでサーバーにリクエストを送りテーブルに保存されるが、正しく情報が保存される為にバリデーションとエラーメッセージの設定を行います。

users.rbに以下を記述

users.rb

class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable
  validates :name, presence: true
  validates :email, presence: true
  #変数VALID_PASSWORD_REGEXに６文字以上の半角英数字混同させるオプションを代入する
  VALID_PASSWORD_REGEX = /\A(?=.*?[a-z])[a-z\d]{6,}+\z/
  validates :password, presence: true, length: { minimum: 6 }, format: { with: VALID_PASSWORD_REGEX}
  #ヘルパーに全角ひらがな、カタカナ、漢字で入力させるオプションを記述
  validates :last_name, :first_name, presence: true, format: { with: /\A(?:\p{Hiragana}|\p{Katakana}|[ー－]|[一-龠々])+\z/ }
  #全角カタカナで入力させるオプションを記述
  validates :kana_last, :kana_first, presence: true, format: { with: /\A[\p{katakana}ー－&&[^ -~｡-ﾟ]]+\z/ }
  validates :birthday, presence: true
end

これで新規登録の際にユーザーの個人情報を上記の形で保存させることができる。

application.controller.rbに以下を記述

application.controller.rb

class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  before_action :configre_permitted_parameters, if: :devise_controller?

  def configre_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:name, :last_name, :first_name, :kana_last, :kana_first, :birthday])
  end
end

deviseに関するコントローラーの処理の時だけ作動するconfigure_permitted_parametersメソッドで、
keys:以降の値が入力されていないと、保存できない処理にすることができる
※ちなみにdeviseは、emailとpasswordをデフォルトで受け取ることができます！

ログイン・アウトの実装

ここまでくれば後は、ログイン・アウト機能を実装するだけです。

・headerファイルを編集

devise/shared/header

＃user_signed_in?でログインの有無で表示が変わるように設定します
      <% if user_signed_in? %>
        <li><%= link_to "#{current_user.name}", class: "user-nickname" %></li>
        <li><%= link_to 'ログアウト', destroy_user_session_path , method: :delete, class: "logout"%> </li>
      <% else %>
        <li><%= link_to 'ログイン', new_user_session_path, class: "login" %></li>
        <li><%= link_to '新規登録', new_user_registration_path, class: "sign-up" %></li>
      <% end %>

link_to "#{current_user.name}"で、ログインしているユーザーの名前をDBのカラムから取得することができます。

これでlocalhost:3000/users/sign_inもしくは、users/sign_upに接続すればログイン、新規登録ができます。

もちろんこれらはdevieに関するファイル編集になるので、ご自分でコントローラーを用意し、トップページからこれらの機能が使えるかどうか、試してみてください。

もしエラーになったら、一度サーバーの接続を断って接続し直せばつながると思うのでやってみてください。

初心者として初めての公開になりますので、もし理解が間違っていたりもっとこうしたら良いよというのがありましたら、いつでもお待ちしておりますので宜しくお願いします。

Deviseを使ってユーザー管理機能を実装