UnityでmBaaSを使っている方の多くがランキングコンポーネントを利用しています。Unityではプレハブと呼ばれる仕組みがあり、まとまった機能を手軽にアプリの中に導入できます。
そのプレハブ同様にWebアプリケーションの中にmBaaSの機能を簡単に組み込めるUIコンポーネントを開発中です。今回は認証モーダルを紹介します。
NCMBの認証モーダルについて
NCMBの次の機能を提供するUIコンポーネントです。
- ID/パスワードログイン
- メールアドレス/パスワードログイン
- パスワードリマインダー
- メールアドレス会員登録
デモ
モーダルを開いて、その中で認証処理やパスワードリマインダーを実行できます。
簡単な入力チェックを行えます。
認証が成功するとモーダルを閉じます。コールバックで認証したユーザ情報を受け取れます。
使い方
公式リポジトリ: 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でよく使われる機能について、コンポーネント化していく予定です。ぜひご活用ください!