アプリの運用をする際、ユーザーさんがパスワードを忘れてしまった場合を考慮して パスワードリセット機能を付けておきたいですよね。 今回はコピペで実装できるコード付きで方法を解説します!
はじめに
こんにちは。mobile backend企画担当の伊藤です。
本日は、アプリにはマストで欲しいパスワードリセット機能の実装方法をご紹介します⭐
今回は以下の想定で実装していきます!
- ID/パスワード認証
- マイページでメールアドレスを設定している人のみが更新できる
- JavaScript SDK
ID/パスワード認証をしている場合でももちろんパスワードリセット機能を実装することはできますが、 メールアドレス情報を会員管理に格納しておく必要はあるため、ご注意ください💡
では次から詳しく書いていきます!
管理画面での設定
まず、管理画面で以下の2つを設定してください。
- アプリ設定>会員認証設定>メールアドレス/パスワード認証から「許可する」を選択して保存
- アプリ設定>会員認証設定>メール設定>確認メールの送信から「送信する」を選択して保存
▼参考
マイページなどでメールアドレスを情報を格納する
ログイン自体は通常、ID/パスワードで行うことを想定しているので
ログイン後、メールアドレスをマイページから追加していきましょう。
以下にコードを貼っておきますのでご参照ください!
コード内に解説をコメントアウトで書いています📝
例)HTML
<h1>マイページ登録</h1> メールアドレス:<input type="email" id="mailAddress" size="30" maxlength="50"><br><br> <button onclick="regist()">送信</button>
例)JavaScript
function regist(){ //HTMLで入力した文字をidで持ってくる var mailAddress = document.getElementById("mailAddress").value; //ログイン中ユーザー var currentUser = ncmb.User.getCurrentUser(); //ログイン中の情報にメールアドレスの情報を追加 currentUser .set("mailAddress", mailAddress) //更新 .update() //コールバック .then(function(obj) { alert("再設定メール送信成功"); }) .catch(function(error) { alert("再設定メール送信失敗" + error); }); }
メールアドレスをリセットする
では、早速パスワードリセットの実装をしていきましょう!
こちらもコード内コメントアウトで解説しています📝
例)HTML
メールアドレスを入力してください<br> <input type="email" id="mailAddress" size="30" maxlength="50"><br><br> <button onclick="userPassSet()">送信</button>
例)JavaScript
function userPassSet(){ //HTMLで入力した文字をidで持ってくる var mailAddress = document.getElementById("mailAddress").value; var user = new ncmb.User(); user.set("mailAddress", mailAddress); //パスワードのリセット user.requestPasswordReset()//<-- メソッド使用 .then(function(data){ // 送信後処理 alert("送信完了"); }) .catch(function(err){ // エラー処理 alert("送信失敗"); }); }
完成!!
上記までを実装すると、登録したメールアドレス宛に パスワードリセットメールが送信されてきます📥
メールアドレス確認完了ページや会員パスワード変更ページの ページデザインや文言も変更可能ですので以下のURLをご参照ください⭐