先日紹介したWeb/Monaca用の認証モーダルですが、外部ライブラリへの依存性がなく、自由にライブラリと組み合わせて利用できます。しかし、世の中にはまだまだjQueryが数多く使われており、利用している人も多いでしょう。
そこで簡易的にjQuery向けにラッピングして使えるようにしました。
NCMBの認証モーダルについて
まず最初に認証モーダルについて紹介します。認証モーダルはNCMBの次の機能を提供するUIコンポーネントです。
- ID/パスワードログイン
- メールアドレス/パスワードログイン
- パスワードリマインダー
- メールアドレス会員登録
動作デモ
モーダルを開いて、その中で認証処理やパスワードリマインダーを実行できます。
簡単な入力チェックを行えます。
認証が成功するとモーダルを閉じます。コールバックで認証したユーザ情報を受け取れます。
使い方
公式リポジトリ: 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でよく使われる機能について、コンポーネント化していく予定です。ぜひご活用ください!