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

bubbleチュートリアルver1第9章 パスワードの再設定、パスワードリセット機能を実装してみる
監修者

監修者

著者の写真

竹村貴也

株式会社ファンリピートCEO

ベンチャー企業でのシステム開発経験を経て、フリーランスとして多数の企業のプロジェクトマネジメントに携わる。2019年に株式会社ファンリピートを設立し、ローコード開発、AIを活用した業務効率化ソリューションの開発・提供を手がける。
著書:「ChatGPTによるPythonプログラミング入門. AI駆動開発で実現する社内業務の自動化


ノーコード/ローコードやAI関連の情報をお届け
無料のBOLTメールマガジン

不定期でノーコード/ローコードやAI関連のお役立ち情報をお届けするメルマガです。

  • ノーコード/ローコードの基礎・応用情報がわかる
  • 個人利用やビジネスで生かせるAI活用方法がわかる
  • 限定オファーや資料公開、ウェビナー情報がいち早く届く

ノーコード/ローコードを用いたシステム開発やAI利活用に興味がある方はぜひご登録ください!

目次

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章では、いよいよ投稿に関する実装を行っていきます。

\ 高品質×高速開発 /
ノーコード・ローコード開発ならBOLT

「Webアプリケーション開発を高品質かつ高速で依頼したい…」そんな方に弊社のBOLTをご提案します。

  • 企画・提案力を武器にした上流工程支援
  • 高品質と高速を両立する開発支援
  • お客様第一の進行管理
  • 継続的なアップデート体制

システム開発の内製化やDXでお悩みの方はぜひご相談ください!

  • URLをコピーしました!

お役立ち資料



資料請求はこちら

資料請求

お問い合わせはこちら

お問い合わせ
目次