FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

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

mBaaSを簡単に使えるUIコンポーネントの紹介(認証モーダル)

f:id:mbaasdevrel:20200920183600g:plain

UnityでmBaaSを使っている方の多くがランキングコンポーネントを利用しています。Unityではプレハブと呼ばれる仕組みがあり、まとまった機能を手軽にアプリの中に導入できます。

そのプレハブ同様にWebアプリケーションの中にmBaaSの機能を簡単に組み込めるUIコンポーネントを開発中です。今回は認証モーダルを紹介します。

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 をダウンロードします(直リンク)。

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

<script src="/main.bundle.js"></script>

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

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

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

// 初期化します
const authComponent = new AuthComponent(applicationKey, clientKey, options);

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

// Promiseの場合
authComponent.openModal()
  // ログイン成功時
  .then(user => {
    console.log(user);
  })
  // 認証失敗時
  .catch(err => {
    console.error(err);
  });

// async/awaitの場合
try {
  const user = await authComponent.openModal();
  console.log(user);
} catch (err) {
  console.error(err);
}

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

const user = authComponent.getCurrentUser();
if (user) {
  // 表示
  document.querySelector('#user').innerHTML = user.get('userName');
}

オプション

現状のオプションです。

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/ でデモが表示されます。

注意点

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

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

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

まとめ

認証コンポーネントはサイズが大きい(300KB超)ですが、読み込むだけでCSSの設定なども不要でモーダル表示が可能です。jQueryもなく、依存性はありません。現在は素のHTMLに対して適用しますが、Onsen UIも対応予定です。

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

中津川 篤司

中津川 篤司

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