認証処理はよく使われます。そのため何度も実装するのが面倒に感じる部分でもあります。
そこで会員登録とログイン処理をjQueryプラグイン化してみました。ソースコードはncmb_login_jquery/ncmb_login_jquery.js at master · NCMBMania/ncmb_login_jqueryにあります。
使い方
動作は次のようになります。
会員登録は次のように実装します。モーダル要素に対して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で試せます。