【Railsでアプリ開発中】プログラミング初心者の勉強ブログ #48
deviseで「パスワードを忘れてしまった方」に対応できる、パスワード再設定機能を搭載する。「views/devise/passwords」に当たる部分の設定と流れ確認のまとめです。deviseの理解を深めるシリーズ。
はじめに
この記事は、railsフレームワークでオリジナルwebアプリ「免許学科試験学習サイト」作成中の僕が、プログラミングをしている中で気づいたことや学んだことを書いております。プログラミング初心者なので知識は少ないですが、現在通っているプログラミングスクール「DIVE INTO CODE」で学んでいることや、ネットで見つけた様々な記事を参考に記事を作成しております。
目次
目次
deviseとは
定義
「devise」とは、「Railsフレームワークで利用できるGemの1つ」であり、「ログイン機能に関するコードが用意されてるもの」です。Railsは、作成したブログアプリ等に対し、自らコーディングすることでもログイン機能を実装することが可能ですが、「devise」をRails内でインストールする事で、自らコードを書き込まなくてもログイン機能の実装が行えます。
deviseの必要性
「ログイン機能を実装する」ってRails初学者の登竜門みたいな感じですが、言っても色々なメソッドが必要になります。入力内容が合わない（メールアドレスが末尾が「.com」とか「ne.jp」とかでない）ときに入力内容を弾くコードを書いたり、リアルタイムでログインしているユーザーのidを取得するためのメソッドをコーディングしたりと、一回一回全部１から実装していくのは時間がかかります。ましてや「パスワードを忘れてしまった方」への救済措置や、今回取り上げる「エラーメッセージ」なども実装するとなると、deviseをうまく利用して行く必要性は十分にあります。
いきなりログイン機能を「devise」使って実装し始めてしまうと、ログインの仕組みについて、確かに理解が追いつかないかもしれません。最初は１から自分でコーディングして理解する必要があります。しかし、徐々に「devise」を使いこなせるようにシフトして行くことで開発にかかる時間は格段に下がります。本格的に一人でアプリ開発をするためには、「devise」の理解は必須だと考えます。
今回の実装
パスワード再設定機能の実装です。deviseでデフォルトとして存在する「views/devise/passwords」にあたる部分を使って実装していきます。
※メール自動送信はletter_opener_webを使用しております。開発環境での実装です。letter_opener_webの実装については省略してます。
deviseのパスワード再設定の流れ
deviseのパスワード再設定の流れは以下の通りです。
- 「パスワードを忘れてしまった方はこちら」ページを追加
- 「1.」のページで、登録したメールアドレスを入力してもらう
- メールにて「パスワード再設定」ページのリンクURLを送信
- 「パスワード再設定」ページにて新パスワードを入力してもらう
- 新パスワード設定完了
自分で特に設定しなくても大丈夫でした。用意されてるviewを編集し整えるだけです。ただ、メールの自動送信機能の実装は必須となります。
「パスワードを忘れてしまった方はこちら」ページを追加
これはviewでいうと、「views/devise/passwords/new.html.erb」にあたります。deviseを使っていればディレクトリが生成されているはずです。ここでユーザーに登録メールアドレスを入力してもらいます。
views/devise/passwords/new.html.erb
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<%= devise_error_messages! %> <div class="title_background"> <div class="page-header"> <h2>パスワードを<br>忘れてしまった方へ</h2> </div> <p>以下の欄に登録したメールアドレスをご入力ください。<br> パスワード再設定について、メールでご連絡いたします。 </p> </div> <div class="pass_new_background"> <div class="pass_new"> <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %> <div class="email"> <%= f.label :email %><br /> <p class="in_field"><%= f.email_field :email, autofocus: true, autocomplete: "email" %></p> </div> <div class="actions"> <p class="in_field"><%= f.submit "パスワード再設定メールを送る",:class=>"form_login_btn col-xs-12" %></p> </div> <% end %> </div> </div> |
メールにて「パスワード再設定」ページのリンクURLを送信
入力してもらったメールアドレス宛に、パスワード再設定画面へ飛ぶURLが貼ってあるメールが送信されます。
メール画面の編集は「views/devise/mailer」ディレクトリ内です。デフォルト表記を日本語にしたり、好きに編集できます。
views/devise/mailer/reset_password_instructions.html.erb
|
1 2 3 4 5 6 7 8 9 10 |
<p><%= User.find_by(email: @resource.email).name %>様</p> <p>登録メールアドレス：<%= @resource.email %></p> <p>パスワードの再設定を行います。以下のURLより設定を行なってください。</p> <p><%= link_to 'パスワード再設定', edit_password_url(@resource, reset_password_token: @token) %></p> <p>このメールに心当たりが無い場合や、パスワード変更するのをやめる場合は何もする必要はございません。</p> <p>上記URLで設定を完了するまで、パスワードは変更されません。</p> <p>サイト運営 supunic</p> |
「パスワード再設定」ページにて新パスワードを入力してもらう
URLをクリックするとパスワード再設定画面に遷移します。
この画面は「devise/passwords」のeditアクションが対応してます。
views/devise/passwords/edit.html.erb
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<%= devise_error_messages! %> <div class="title_background"> <div class="page-header"> <h2>パスワード再設定</h2> </div> <p>パスワードを再設定します。<br> 新しいパスワードを入力してください。 </p> </div> <div class="registrations_background"> <div class="registrations"> <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %> <%= f.hidden_field :reset_password_token %> <div class="email"> <%= f.label :password, "新しいパスワード" %><br /> <% if @minimum_password_length %> <em>(<%= @minimum_password_length %> 文字以上)</em><br /> <% end %> <p class="in_field"><%= f.password_field :password, autofocus: true, autocomplete: "new-password" %></p> </div> <div class="password_confirmation"> <%= f.label :password_confirmation, "新しいパスワード再入力" %><br /> <p class="in_field"><%= f.password_field :password_confirmation, autocomplete: "off" %></p> </div> <div class="actions"> <p class="in_field"><%= f.submit "パスワード再設定",:class=>"form_login_btn col-xs-12" %></p> </div> <% end %> </div> </div> |
新パスワード設定完了
ユーザーが新パスワード設定を行い、「パスワード再設定」ボタンを押すと変更が完了します。
挙動としては、ログイン状態でアプリのルートパス（ホーム画面）にリダイレクトされ、「notice」で「パスワードが正しく変更されました。」と表示されます。
一回ログアウトして、変更したパスワードでログインできるか確認して見てください。以上で完了です。
deviseのエラーメッセージなどの表示については、
こちらで載せてます。「notice」も同じです。
まとめ
deviseのパスワード再設定についての記事が調べても、ほぼほぼ無かったのでまとめました。
こういう機能もiPhone Xの顔認証とかが普通になってきたらいらなくなってくるんですかね。その前に指紋認証か。
「登録した顔を忘れた方」ページ面白そうですよね。deviseで簡単に実装できちゃったりして。
「あなたの顔が変更されました。」のnoticeが出るわけですよ。
だからなんだって話ですけど。
以上ありがとうございました。