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

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

Onsen UI用のmBaaS認証ライブラリの紹介

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 イベントが発生するので、それを購読します。

デモ

そうすると認証ダイアログを表示して、ユーザ登録処理とログイン処理が可能です。

f:id:mbaasdevrel:20180704220515g:plain

注意点

ログイン処理をAuth.vueの中で行っているため、propsで指定しているncmbの内部が直接書き換わっています。ダイアログが閉じた後、 this.ncmb.User.getCurrentUser() で正しい値が取れているのは確認できていますが、何らかの問題になる可能性があります。

このライブラリを使う際には、標準のJavaScript SDKではなく、Vue2対応版にする必要があります。

$ npm install github:NCMBMania/ncmb_js#master --save

まとめ

Auth.vue を使うことで、簡単にユーザ登録とログイン機能が実装できます。ほぼコーディングレスとも言えるので、ぜひ使ってみてください。

中津川 篤司

中津川 篤司

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