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

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

プッシュ通知を承認制にする【認証処理】

プッシュ通知は従来のマーケティング手法で言えばメールマーケティングに相当します。つまり一度配信してしまうと、後から取り消すのが難しい拡散方法ということです。そのため企業によっては一旦承認フローを経てからプッシュ通知を送りたいという要望も聞かれます。

そこで独自のプッシュ通知管理画面を作成して、承認フローを経るようにしてみたいと思います。作成していく過程をステップを踏んで説明していきますので、自社のフローに合わせてカスタマイズしてみてください。

今回は認証処理を作っていきます。

実際の処理について

このWebアプリケーションはVue.jsで構築されています。機能はコンポーネント化されています。今回はログイン機能をモーダル表示を使って作っていきます。

モーダル表示について

モーダル表示を行う際には、Contents Management System - ニフティクラウドmobile backendのモーダル表示をベースにします。このHTMLをベースにして、signin_form.vueというファイルのtemplateタグを作成します。

このHTMLはbodyタグの直下に生成されるのを前提としています。そして、認証が必要と考えられる処理で判定を行います。例えば承認者を設定するモーダルを表示する際に、ログインしていない場合はログイン画面を出すようにします。

created: function() {
  if (!this.ncmb.User.getCurrentUser()) {
    this.cancel();
    this.$emit('showModal', "signinForm");
    return;
  }
  window.addEventListener('keyup', this.cancel);
  this.updateList();
},

モーダル表示は複数パターンが考えられますので、前回の承認者設定用モーダルの方法を踏襲してモーダルの種類(今回はinstallationManager)を指定できるようにしておきます。

export default {
  name: 'app',
  data: function() {
    return {
      ncmb: ncmb,
      error: null,
      success: null,
      modal: null // 追加
    };
  },
    :
  methods: {
      :
    showModal: function(modal) {
      this.modal = modal;
    },
    closeModal: function() {
      this.modal = null;
    },
  },
  :
}

このように this.modal に文字列を入れるようにします。閉じる場合は this.modal = null にするだけです。

Appのテンプレート側では次のように記述します。modalがinstallationManagerの時だけ表示します。

<template>
  <div>
    <signin-form
      id="installation-manager"
      :ncmb="ncmb"
      v-on:errorMessage="errorMessage"
      v-on:successMessage="successMessage"
      v-on:closeModal="closeModal"
      v-on:login="login"
      v-if="modal == 'signinForm'" 
    />
      :
  </div>
</template>

これでボタンを押した際にモーダルが表示されます。

モーダルを閉じる

次にモーダルを閉じる機能を実装します。これはAppにあるcloseModalを this.$emit で呼び出すだけです。なお、クリックだけでなくESCキーでも閉じられるようにしています。

module.exports = {
    :
  methods: {
    cancel: function(e) {
      if (typeof e == 'undefined' || e.type == 'click' || (e.type == 'keyup' && e.keyCode == 27)) {
        
      }else{
        return true;
      }
      this.$emit('closeModal');
    }
  }
}

ログイン画面を作成する

ログイン画面はuserNameとpasswordを設定します。

<input type="text" autocomplete="off" v-model="userName" style="width:100%;">
  :
<input type="password" autocomplete="off" v-model="password" style="width:100%;">

ログインする

ログイン処理は signin_form.vue ではなく App にて行います。そこで $emit を使ってメッセージを送ります。

module.exports = {
    :
  methods: {
      :
    signIn: function(e) {
      this.$emit('login', this.userName, this.password);
    }
  }
}

もちろんAppではイベントを購読しておきます。

<template>
  <div>
    <signin-form
      id="installation-manager"
      :ncmb="ncmb"
      v-on:errorMessage="errorMessage"
      v-on:successMessage="successMessage"
      v-on:closeModal="closeModal"
      v-on:login="login"
      v-if="modal == 'signinForm'" 
    />
      :
  </div>
</template>

そしてログイン処理を行います。なお、ログイン処理を行って ncmb.User の内部が書き換わってもうまく通知されませんでした。そこでlocation.reloadを使って再読込処理をしています。

login: function(userName, password) {
  var me = this;
  this.ncmb.User.login(userName, password)
    .then(function(user) {
      me.successMessage("ログイン成功しました");
      me.closeModal();
      location.reload();
    })
    .catch(function(err) {
      me.errorMessage("ログイン失敗しました");
    })
},

メニューを変更する

ログイン状態に応じてヘッダーメニューの表記を変更します。ログインしていない場合は未ログインと表示するようにします。

<a href="#" id="accout-menu" @click="openMenu">
  <span class="icon header-user"></span>
  <span class="text" v-if="user">{{user.userName}}&nbsp;</span>
  <span class="text" v-if="!user">未ログイン&nbsp;</span>
  <span class="icon arrow arrow-down white"></span>
</a>

ログアウト処理を実装する

最後にログアウト処理を実装します。これはメニューから呼び出しますが、ログインと同様に $emit を使ってAppにて行います。

logout: function() {
  this.$emit('logout');
},

実際の処理は次のようになります。こちらもログインと同様、変数の変化を感知できなかったので location.reload を使っています。

logout: function() {
  let me = this;
  this.ncmb.User.logout()
    .then(() => {
      location.reload();
    })
    .catch(() => {
      location.reload();
    });
}

ここまでの処理でプッシュ管理アプリにおいて認証処理を挟めるようになりました。アプリ全体で認証状態を管理するので、Appオブジェクト内で処理を行うのがポイントです。

ここまでのコードはNCMBMania/pushManager at v0.4にアップロードされています。実装時の参考にしてください。