ニフクラmBaaSお役立ちブログ

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

JavaScript SDKを使ったメールアドレス更新方法

ニフティクラウド mobile backendではメールアドレスを使った認証をサポートしています。その際にはメールアドレスの存在確認が必要になるでしょう。そこで今回はJavaScript SDKを題材として、メールアドレス登録や更新の方法について紹介します。

管理画面での設定

まず管理画面のアプリ設定、会員認証設定において

  • メールアドレス/パスワード認証
  • 確認メールの送信

を有効にしてください。

メールアドレス登録について

ユーザ登録のフローですが、

  1. メールアドレス入力
  2. メールアドレス宛に会員登録URL送信
  3. URLのクリック先でパスワードを登録

という流れになります。そのためアプリ側ではメールアドレスだけの入力になります。JavaScriptは次のようになります。 $("#email").val() がメールアドレスになります。

$(".register").on("click", function(e) {
  e.preventDefault();
  ncmb.User.requestSignUpEmail($("#email").val())
    .then(function() {
      $("#status").text("メールアドレス宛にユーザ登録の案内を送信しました");
    }).catch(function(err) {
      $("#status").text(err);
    });
});

そうすると次のようなメールが届きます。メールの内容は自由に変更できます。

そしてこのURLをクリックすると、次のようなHTMLが表示されます。

ここでパスワードを2回入力して会員登録が完了します。ユーザIDにて適当な文字列が入ります。

メールアドレスを使ったログインについて

会員登録が完了するとログインができるようになります。JavaScriptは次のようになります。 $("#email").val()$("#password").val() がメールアドレスとパスワードになります。

$(".login").on("click", function(e) {
  e.preventDefault();
  // メールアドレスとパスワードでログイン
  ncmb.User.loginWithMailAddress($("#email").val(), $("#password").val())
    .then(function(user){
      // ログイン後処理
      $("#status").text(user.mailAddress);
    })
    .catch(function(err){
      // エラー処理
      $("#status").text(err);
    });
});

メールアドレスの更新について

最後にメールアドレスを更新する場合です。この時のフローは次のようになります。

  1. メールアドレスを入力
  2. ユーザ情報を更新
  3. 新しいメールアドレス宛にメールが届く
  4. 表示されているURLをクリックすると更新が反映

2の時点ではまだ会員情報データは書き換わっていませんのでご注意ください。 $("#email").val() がメールアドレスで、updateメソッドを使います。

JavaScriptは次のようになります。

$(".update").on("click", function(e) {
  e.preventDefault();
  var user = ncmb.User.getCurrentUser();
  user.mailAddress = $("#email").val();
  user.update()
    .then(function() {
      $("#status").text("メールアドレス宛にメールアドレス更新の案内を送信しました");
    }).catch(function(err) {
      $("#status").text(err);
    });
});

この時、ユーザ向けに届くメールはユーザ登録時と同じテンプレートが使われます。そのため件名や本文は会員登録、メールアドレス更新のいずれでも問題ないような表記としてください。


アプリを広めていく上で会員管理機能を使いたいと思うことは多いかと思います。mBaaSを使えばサーバサイドの仕組みは一切不要でデータ、メールの仕組みが整います。ぜひご利用ください!