FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

【会員管理】アプリからパスワードを変更する方法

f:id:mbaasblog:20210331102842p:plain

アプリの運用をする際、ユーザーさんがパスワードを忘れてしまった場合を考慮して パスワードリセット機能を付けておきたいですよね。 今回はコピペで実装できるコード付きで方法を解説します!

はじめに

f:id:mbaasblog:20181214102443j:plain

こんにちは。mobile backend企画担当の伊藤です。
本日は、アプリにはマストで欲しいパスワードリセット機能の実装方法をご紹介します⭐

今回は以下の想定で実装していきます!

  • ID/パスワード認証
  • マイページでメールアドレスを設定している人のみが更新できる
  • JavaScript SDK

ID/パスワード認証をしている場合でももちろんパスワードリセット機能を実装することはできますが、 メールアドレス情報を会員管理に格納しておく必要はあるため、ご注意ください💡

では次から詳しく書いていきます!

管理画面での設定

まず、管理画面で以下の2つを設定してください。

  • アプリ設定>会員認証設定>メールアドレス/パスワード認証から「許可する」を選択して保存
  • アプリ設定>会員認証設定>メール設定>確認メールの送信から「送信する」を選択して保存

▼参考 f:id:mbaasblog:20211213163339p:plain

マイページなどでメールアドレスを情報を格納する

f:id:mbaasblog:20211213164647p:plain

ログイン自体は通常、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);
              });
  }

メールアドレスをリセットする

f:id:mbaasblog:20211213164952p:plain

では、早速パスワードリセットの実装をしていきましょう!
こちらもコード内コメントアウトで解説しています📝

例)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をご参照ください⭐

会員管理・認証 (JavaScript) : メールアドレス認証 | ニフクラ mobile backend

f:id:mbaasblog:20181005111552p:plain

伊藤みなみ

mobile backend企画担当。2018年4月、富士通クラウドテクノロジーズに新卒で入社。大学は文系でプログラミングは全くの未経験ですが、日々勉強しております!