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

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

会員登録/ログイン処理を簡略化するjQueryプラグインを作りました

f:id:mbaasdevrel:20180214180352p:plain

認証処理はよく使われます。そのため何度も実装するのが面倒に感じる部分でもあります。

そこで会員登録とログイン処理をjQueryプラグイン化してみました。ソースコードはncmb_login_jquery/ncmb_login_jquery.js at master · NCMBMania/ncmb_login_jqueryにあります。

使い方

動作は次のようになります。

f:id:mbaasdevrel:20180214180145g:plain

会員登録は次のように実装します。モーダル要素に対してsignUpメソッドを実行します。

$('#signupForm').on('click', (e) => {
  $('#modal-default').signUp(
    (user) => {
      $('#result').text(`サインアップしました。userName -> ${user.userName}`);
    },
    (err) => {
      $('#result').text(`エラー -> ${JSON.stringify(err)}`);
    }
  );
});

モーダルは次のようになっています。

<div id="modal-default" data-izimodal-title="サインアップ">
  <p>
    <form>
      ユーザID : <input type="text" id="userName" value="jqueryuser5"/><br />
      パスワード : <input type="password" id="password" value="jqueryuser3" /><br />
      <span id="password_confirmation_field">
        パスワード確認 : <input type="password" id="password_confirmation" value="jqueryuser3" /><br />
      </span>
      <button>      
      サインアップ
      </button>
    </form>
  </p>
</div>

さらにログインは次のようになります。会員登録とほぼ変わりません。

// ログイン
$('#loginForm').on('click', (e) => {
  $('#password_confirmation_field').hide();
  $('#modal-default').signIn(
    (user) => {
      $('#result').text(`ログインしました。userName -> ${user.userName}`);
    },
    (err) => {
      $('#result').text(`エラー -> ${JSON.stringify(err)}`);
    }
  );
});

依存性

現在のところ、iziModal.jsに依存していますので、これも設置する必要があります。

使い方

まず iziModal.js とncmb_login_jquery/ncmb_login_jquery.js at master · NCMBMania/ncmb_login_jqueryを読み込みます。

<script src="jquery.min.js"></script>
<script src="iziModal.min.js"></script>
<script src="ncmb_login_jquery.js"></script>

そして ncmb_login_jquery.js を初期化します。アプリケーションキー、クライアントキーはそれぞれ自分のアプリのものを指定します。

$('#modal-default').initialize({
  applicationKey: applicationKey,
  clientKey: clientKey
});

オプションはこの他、以下が使えます。

  • userName
    ユーザ名入力用のフィールドをid指定します。デフォルトは #userName。
  • password
    パスワード入力用のフィールドをid指定します。デフォルトは #password。
  • password_confirmation
    パスワード確認入力用のフィールドをid指定します。デフォルトは #password_confirmation。

処理内容

処理としてはモーダルを表示し、フォームの送信処理をフックして会員登録またはログイン処理を行っています。モーダル表示なので画面遷移する必要もありませんし、返り値はログイン後のユーザ情報になっています。

まとめ

jQueryプラグイン化することで処理が隠蔽化されつつ、手軽に使えるようになります。ぜひお試しください。

このデモはJSFiddleで試せます。

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。