😺

Rails｜deviseのパスワードの再設定機能を実装

2023/09/19に公開

Rails

開発環境

ruby 3.1.2p20
Rails 6.1.7.4
Cloud9

前提

deviseを導入済み
boostrapを導入済み

目標

ログイン画面にて、「パスワードを忘れた方はこちら」ボタンを作成。
ボタンクリック後、パスワード再設定用メールアドレスを入力。
入力されたメールアドレスがDBにある場合に限り、
そのメールアドレスにパスワード再設定用リンクを送信。
受信したメールに記載のリンクをクリックし、パスワードの再設定を行う。

deviseの設定

Userモデルの deviseモジュールの中に recoverableを追記。

user.rb

class User < ApplicationRecord

  devise :database_authenticatable, :registerable,
         :rememberable, :validatable, :confirmable, :recoverable #←これ
	 
  (以下略)

ルーティング

ルーティングの devise_for 部分に、passwords: 'public/passwords'を追記。

routes.rb

  devise_for :users, controllers: {
    registrations: "public/registrations",
    sessions: 'public/sessions',
    passwords: 'public/passwords' ##←これ
  }

ビューの編集

newは、パスワード再設定用のリンクを送付するメールアドレスの入力画面。

views/public/passwords/new.html.erb

<div class="container p-5">
  <div class="row">
    <div class="col-md-12">

    <h5>パスワードの再設定</h5>

    <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
      <%= render "public/shared/error_messages.html.erb", resource: resource %>

      <div class="field mt-3">
        <%= f.label :ご登録のメールアドレス, class: "translatable-text" %>
        <%= f.email_field :email, autofocus: true, placeholder: "sample@example.com", class: "form-control w-25" %>
      </div>

      <div class="actions mt-3">
        <%= button_tag(type: 'submit', class: "btn btn-secondary translatable-text") do %>
          パスワード再設定用リンクを送信
        <% end %>
      </div>

    <% end %>

    </div>
  </div>
</div>

editは、実際に新しいパスワードを入力する画面。

views/public/passwords/edit.html.erb

<div class="container p-5">
  <div class="row">
    <div class="col-md-12">

      <h5>パスワード再設定</h5>

      <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
        <%= render "public/shared/error_messages", resource: resource %>
        <%= f.hidden_field :reset_password_token %>

        <div class="field mt-3">
          <%= f.label :新しいパスワード, class: "translatable-text" %>
          <% if @minimum_password_length %>
            (<%= @minimum_password_length %> 文字以上)
          <% end %>
          <%= f.password_field :password, autofocus: true, class: "form-control w-25" %>
        </div>

        <div class="field mt-3">
          <%= f.label :新しいパスワード（確認用）, class: "translatable-text" %>
          <%= f.password_field :password_confirmation, class: "form-control w-25" %>
        </div>

        <div class="actions mt-3">
        <%= button_tag(type: 'submit', class: "btn btn-success translatable-text") do %>
          パスワード変更
        <% end %>
      </div>
      <% end %>



    </div>
  </div>
</div>