Onsen UIはハイブリッドアプリを作るのに最適なUIライブラリです。多数のコンポーネントが用意されており、複雑な画面でも簡単に定義することができます。
そこで今回はOnsen UI用の認証画面ライブラリを作ってみました。まずはVue.js用になります。
使い方
ライブラリを読み込んで、カスタムタグを記述するだけです。
<template> <v-ons-auth :show="show" :ncmb="ncmb" @close="close" /> </template> <script> import Auth from './Auth' const NCMB = require('ncmb') const config = require('../config') export default { name: 'home', // コンポーネント適用 components: { 'v-ons-auth': Auth }, data () { return { msg: 'Welcome', // モーダルの表示、非表示の切り替え show: false } }, created () { this.ncmb = new NCMB(config.applicationKey, config.clientKey) }, // 省略 } </script>
showを有効、無効にすることで認証ダイアログの表示/非表示を切り替えられます。後はダイアログを閉じた時に close イベントが発生するので、それを購読します。
デモ
そうすると認証ダイアログを表示して、ユーザ登録処理とログイン処理が可能です。
注意点
ログイン処理をAuth.vueの中で行っているため、propsで指定しているncmbの内部が直接書き換わっています。ダイアログが閉じた後、 this.ncmb.User.getCurrentUser()
で正しい値が取れているのは確認できていますが、何らかの問題になる可能性があります。
このライブラリを使う際には、標準のJavaScript SDKではなく、Vue2対応版にする必要があります。
$ npm install github:NCMBMania/ncmb_js#master --save
まとめ
Auth.vue を使うことで、簡単にユーザ登録とログイン機能が実装できます。ほぼコーディングレスとも言えるので、ぜひ使ってみてください。