mBaaSは皆さんのアプリ開発を簡単にする仕組みです。サーバサイドが不要になることでサーバサイドのコードはゼロになりますが、その代わりにクライアント側のコードが増えてしまいがちです（ロジックをすべて実装するため）。そこでよく使われる機能、処理フローについてはコンポーネント化することでさらに簡単に使えるようになります。
認証周りを簡単に行うためのjQueryプラグイン ncmb_login_jquery のテンプレートをライブラリ側に持たせることによって、もっと簡単に使えるようにしました。
使い方
ncmb_login_jquery は iziModal.js または Bootstrap に対応しています。このどちらかとjQueryを読み込みます。
<script src="jquery.min.js"></script> <script src="iziModal.min.js"></script> <!-- または --> <script src="bootstrap.bundle.min.js"></script> <script src="ncmb_login_jquery.js"></script>
そしてまずアプリケーションキー、クライアントキーで初期化をします。
$(document).initialize({ applicationKey: applicationKey, clientKey: clientKey });
後は何かのイベントに合わせて signUp または signIn メソッドを実行します。例えば signIn を使えばログインフォームを表示して、1つ目の引数がログイン成功時のコールバック、2つ目の引数が失敗時のコールバックになります。
$(document).signIn( (user) => { $('#result').text(`ログインしました。userName -> ${user.userName}`); }, (err) => { $('#result').text(`エラー -> ${JSON.stringify(err)}`); } );
すでにログインしている場合はすぐに一つ目のコールバックが実行されます。
カスタマイズ
モーダルをカスタマイズする場合にはiziModal、Bootstrapの書き方がそのまま使えます。
デモ
デモはこちらで試せます。
iziModal版
Bootstrap版
まとめ
なるべくコード量を少なく、目的が達成できる仕組みになっています。同様の仕組みでReact/Angular/Vueなどにも対応すれば、コンポーネントを使う感覚で認証機能が使えるようになるでしょう。ぜひお試しください！
