MENU

第9章 パスワードの再設定、パスワードリセット機能を実装してみる

目次-全章

目次

9.1 パスワードリセット・送信ページでパスワードリセット処理を実装

パスワードリセット処理を実装

パスワードリセットメールを送信する

パスワードを忘れたとき、パスワードリセットメールを送信してユーザーにパスワードを再設定してもらう処理を実装していきます。

password_resetページのビジュアルエディタで、「パスワードリセットメールを送信する」ボタンからワークフローを開始します。

アクションは Account > Send password reset email を選択します。

図9.1.1 Account > Send password reset email を選択

パスワードリセットメールは、メールアドレス認証のメールと異なり、ワークフロー上でメールの内容を変更できます。

Email to reset に Input の内容を設定し、タイトルと本文を変更します。

図9.1.2 パスワードリセットメールの変更例

パスワードリセットリンクの文言を変更する

パスワードリセットリンクは、パスワードリセットメールの文末に自動的に挿入されます。文言は Settings > Languages タブで設定できます。

Reset hereの内容がリンクになって挿入されるため、内容を変更します。

図9.1.3 パスワードリセットリンクは変更例

メール送信後に表示を変更する

パスワードリセットメール送信後、グループ「Group SendEmail」を非表示にし、グループ「Group SentEmail」を表示させるアクションを追加します。

図9.1.4 ElementにGroup Sentemailを設定

リンク先を変更する

Group SendEmailとGroup SentEmailの「ログインはこちら」のリンク先をloginに変更しておきます。

図9.1.5 Destination pageをloginに変更
図9.1.6 Destination pageをloginに変更

パスワードリセットページを編集する

パスワードリセットメールのリンクにアクセスすると、reset_pwページが開きます。

第3章でreset_pwページは編集していなかったため、デフォルトのデザインが崩れた状態になっています。

図9.1.7 デフォルトのreset_pwページ
図9.1.8 reset_pwの設定

ページの設定を他のページと同じになるように変更し、全てのエレメントを削除します。

loginページからGroup Loginの内容をそのままコピーし、reset_pwページにペーストします。

図9.1.9 Group LoginのCopy

不要なリンク2つを削除し、名称と表示テキストを変更します。

図9.1.10 各エレメントの設定

もともとInput Emailだった要素のContent formatをPasswordに忘れずに変更してください。

図9.1.11 Content formatをPasswordに設定

パスワードリセット処理を実装

パスワードを変更するボタンからワークフローを開始します。

アクションは Account > Reset password を選択し、それぞれinputの値を設定します。

図9.1.12 Reset passwordの設定

パスワードリセットリンクから遷移してきた場合、ログイン状態になっているため、パスワードリセット後に、homeページへ遷移するアクションを追加します。

図9.1.13 homeページへの遷移条件の追加

このとき、ログインページからエレメントをコピーしてきたため、エレメントのConditionalの設定が残っていることに注意してください。

パスワード入力欄が2つとも入力されていないと、変更するボタンがクリックできなくなっています。設定としては問題ないため、このままにします。

プレビューで確認する

ログインしていない状態で、password_resetページをプレビューします。

図9.1.14 password_resetページのpreview画面

メールアドレスを入力し、送信するボタンをクリックします。

図9.1.15 パスワードリセット完了の動作例

「ログインはこちら」をクリックするとログインページに遷移することが確認できます。

入力したメールアドレスに以下のようにメールが届いていることが確認できます。

図9.1.16 パスワードリセット完了メール例

メールのリンクをクリックし、遷移したページで新しいパスワードを入力し、変更するをクリックします。

図9.1.17 新しいパスワードへの変更する動作例

homeページに遷移することが確認できます。

このあと、ログアウトして、新しいパスワードでログインできることを確認してください。

9.2 最後に

パスワードのリセットは、ユーザーがパスワードを忘れた場合に必要な対応なので必ず設定するようにしましょう。

アクションのReset passwordでは、以下のような場合に自動的にエラー(アラート)が表示されます。

・2つのパスワードが異なっていた場合

・パスワードがパスワードポリシーを満たしていなかった場合

これらの場合のエラー表示はアプリケーションの要件に合わせて、自作するかデフォルトのものを利用するか選択するようにしましょう。

第9章までで、ユーザー登録に関連する一通りの処理を実装しました。

ここまでの処理はどんなアプリケーションでも同じように実装することが多いため、覚えておきましょう。

第10章では、いよいよ投稿に関する実装を行っていきます。

【未経験・経験者】システムエンジニア募集中!

当社では現在一緒に働くメンバー募集しています!
正社員でシステムエンジニアとして当社のシステム開発業務に携わってみませんか?
未経験者から経験者まで広く募集しているのでぜひエントリーをお待ちしています。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

私たち株式会社ファンリピートは、ITを通じてお客様の課題解決を行うスタートアップベンチャーです。ノーコード・ローコードを用いたDX支援事業を主軸に、スピード感を持ってお客様のご要望にお応えしています。

2019年の創業から、出版業界・広告業界をはじめ、幅広い業界のデジタル施策を支援。財務管理・顧客管理などの基幹・業務システムから、新規Webサービスなど開発前検証フェーズのシステム導入支援まで、ワンストップでサポートを実施しています。この先も本質的なご提案を通じて、お客様の課題を解決し続けます。

コメント

コメントする

目次