会員登録とログイン処理を簡略化できるjQueryプラグインをBootstrapでも使えるように更新しました。ソースコードはNCMBMania/ncmb_login_jquery: ログイン処理のコードを簡略化できるフォームです。にて公開されています。
動作
動作は次のようになります。モーダルを使うので画面遷移なく実現できます。
使い方
会員登録は次のように実装します。モーダル要素に対して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">×</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で試せます。