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

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

会員登録/ログイン処理を簡略化するjQueryプラグインがBootstrapに対応しました

f:id:mbaasdevrel:20180214180352p:plain

会員登録とログイン処理を簡略化できるjQueryプラグインをBootstrapでも使えるように更新しました。ソースコードはNCMBMania/ncmb_login_jquery: ログイン処理のコードを簡略化できるフォームです。にて公開されています。

動作

動作は次のようになります。モーダルを使うので画面遷移なく実現できます。

f:id:mbaasdevrel:20180214190215g:plain

使い方

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

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

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

<div class="modal" tabindex="-1" role="dialog" id="loginForm">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">サインアップ</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form class="form">      
        <div class="modal-body">
          <div class="form-group">
            <label for="inputUserName">ユーザ名</label>
            <input type="text" id="userName" value="jqueryuser9" class="form-control" />
          </div>
          <div class="form-group">
            <label for="inputPassword">パスワード</label>
            <input type="password" id="password" value="jqueryuser9" class="form-control" />
          </div>
          <div class="form-group" id="password_confirmation_field">
            <label for="inputPasswordConfirmation">パスワード(確認入力)</label>
            <input type="password" id="password_confirmation" value="jqueryuser9" class="form-control" />
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">サインアップ</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">キャンセル</button>
        </div>
      </form>
    </div>
  </div>
</div>

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

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

依存性

Bootstrapのモーダル機能をそのまま使えます。BootstrapもjQueryに依存していますので、安心できます。

使い方

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

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

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

$('#loginForm').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」活動をスタート。