ニフクラ mobile backend（mBaaS）お役立ちブログ

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

Web/Monaca用認証モーダルをjQueryライブラリ化する

技術情報 会員管理 TypeScript jQuery Monaca

f:id:mbaasdevrel:20200920183600g:plain

先日紹介したWeb/Monaca用の認証モーダルですが、外部ライブラリへの依存性がなく、自由にライブラリと組み合わせて利用できます。しかし、世の中にはまだまだjQueryが数多く使われており、利用している人も多いでしょう。

そこで簡易的にjQuery向けにラッピングして使えるようにしました。

NCMBの認証モーダルについて

まず最初に認証モーダルについて紹介します。認証モーダルはNCMBの次の機能を提供するUIコンポーネントです。

  • ID/パスワードログイン
  • メールアドレス/パスワードログイン
  • パスワードリマインダー
  • メールアドレス会員登録

動作デモ

モーダルを開いて、その中で認証処理やパスワードリマインダーを実行できます。

f:id:mbaasdevrel:20200920183537g:plain

簡単な入力チェックを行えます。

f:id:mbaasdevrel:20200920183600g:plain

認証が成功するとモーダルを閉じます。コールバックで認証したユーザ情報を受け取れます。

f:id:mbaasdevrel:20200920183624g:plain

使い方

公式リポジトリ： NCMBMania/AuthComponent: ニフクラ mobile backendの会員機能をWebアプリケーションに簡単に組み込めるUIコンポーネントです。 へいき、dist/main.bundle.js をダウンロードします（直リンク）。jQuery向けのライブラリはこちらに公開していますので、こちらもダウンロードしてください。

この main.bundle.js をWebアプリケーションで読み込んでください。

<script src="/main.bundle.js"></script>
<script src="/jquery-lib.js"></script>

認証コンポーネントを初期化します。

// NCMBのアプリケーションキーとクライアントキーです
const applicationKey = 'YOUR_APPLICATION_KEY';
const clientKey = 'YOUR_CLIENT_KEY';

// オプションです
const options = {
  auth_type: AuthType.ID
};

// 初期化します
$(document).NCMBAuth.initialize(applicationKey, clientKey, options);

認証用モーダルを呼び出します。これはボタンのクリックなど、適当なイベント処理の中で行ってください。Promiseが返ってきますので、認証成功時をthenでつないだり、async/awaitで結果を受け取れます。

$('#auth').on('click', async (e) => {
  try {
    const user = await $(document).NCMBAuth.open();
    $('#user').html(user.get('userName'));
  } catch (error) {
    console.log(error);
  }
});

認証情報はlocalStorageに保存されます。公式JavaScript SDK互換になります。 getCurrentUser メソッドで認証したユーザの情報が得られます。

const user = $(document).NCMBAuth.getCurrentUser();
if (user) {
  $('#user').html(user.get('userName'));
}

ログアウト処理は次のように実装します。

$('#logout').on('click', (e) => {
  $(document).NCMBAuth.logout();
  $('#user').html('');
});

オプション

現状のオプションです。

AuthOptions {
  auth_type?: AuthType;    // AuthType.ID (ユーザID認証) / AuthType.Email （メールアドレス認証）
  password_min?: number; // パスワードの最低文字数（デフォルト8文字）
  title?: string; // モーダルのタイトル
}

デモ

デモは以下のように実行できます。

git clone git@github.com:NCMBMania/AuthComponent.git
cd AuthComponent
npm i
npm run demo

実行したら http://localhost:8000/demo/jquery.html でデモが表示されます。

注意点

認証していれば $(document).NCMBAuth.getCurrentUser() で情報が得られますので、その有無で認証済みかどうかを判定できます。なお、ほかのNCMBの機能を呼び出す場合には、以下のオブジェクトを利用してください。

  • データストア： NCMBObject と NCMBQuery
  • ACL : NCMBAcl
  • 会員 : NCMBUser
  • NCMB全体 : NCMB

使い方は NCMBMania/ncmb_deno: deno用のSDKです を参照してください。

まとめ

認証コンポーネントはサイズが大きい（300KB超）ですが、読み込むだけでCSSの設定なども不要でモーダル表示が可能です。jQueryと組み合わせれば、簡単に認証機能をWebアプリケーションやMonacaアプリに組み込めます。

ほかにもmBaaSでよく使われる機能について、コンポーネント化していく予定です。ぜひご活用ください！

中津川 篤司

中津川 篤司

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