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

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

jQueryプラグインでNCMBの認証を簡単に導入しよう

f:id:mbaasdevrel:20171212211252p:plain

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)}`);
  }
);

すでにログインしている場合はすぐに一つ目のコールバックが実行されます。

カスタマイズ

モーダルをカスタマイズする場合にはiziModalBootstrapの書き方がそのまま使えます。

デモ

デモはこちらで試せます。

iziModal版

Bootstrap版

まとめ

なるべくコード量を少なく、目的が達成できる仕組みになっています。同様の仕組みでReact/Angular/Vueなどにも対応すれば、コンポーネントを使う感覚で認証機能が使えるようになるでしょう。ぜひお試しください!

中津川 篤司

中津川 篤司

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