Monaca + NCMBでカメラメモアプリを作る【その2：認証を作る】

MonacaとNCMBで簡単なアプリを作ってみるハンズオンの資料です。今回はカメラメモアプリを作ってみます。カメラで写真を撮影し、そこにメモ書きを追加して保存しておくというアプリです。この記事では認証周りを解説します。なおコードはNCMBMania/camera_appにて公開しています。

アプリ全体の処理

まず www/js/app.js の中で、NCMBを初期化します。これはアプリ全体に関わる処理なので、JavaScriptファイルに記述しています。

const applicationKey = 'YOUR_APPLICATION_KEY';
const clientKey = 'YOUR_CLIENT_KEY';
const ncmb = new NCMB(applicationKey, clientKey);

認証の判定

まず大事なのは認証の判定です。今回は次のように実装しています。これは www/camera.html に実装しています。

ons.getScriptPage().onShow = async function() {
  const user = ncmb.User.getCurrentUser();
  if (!user) {
    document.querySelector('#nav').pushPage('login.html');
  }
  try {
    await ncmb.DataStore('Hello').fetch();
  } catch (e) {
    localStorage.removeItem(`NCMB/${ncmb.apikey}/CurrentUser`);
    ncmb.sessionToken = null;
    document.querySelector('#nav').pushPage('login.html');
  }
}

ここで大事なのは、まず ncmb.User.getCurrentUser() でユーザデータの存在を確認しています。データがなければ未ログイン状態なのでログイン/新規登録画面 login.html へ遷移します。さらにもしデータがあったとしてもセッションが有効かどうかはリクエストしてみないと分かりません。そこで適当なクラス（今回はHello）へリクエストしています。ここでエラーが出る場合はセッションが無効になっています。

この無効な状態だとログアウト処理も失敗します。そこでlocalStorageに保存されているデータを直接削除し、さらにセッショントークンも削除してログイン/新規登録画面に遷移します。

ログイン/新規登録画面

ログイン/新規登録画面（login.html）ではユーザ名とパスワードを入力しています。今回は処理を簡略化するため、新規登録とログイン処理を一つにまとめています。

認証処理

認証を実行する処理は #login をクリックした際のイベントで作成していきます。

ons.getScriptPage().onInit = function() {
  this.querySelector('#login').onclick = signInOrLogin.bind(this);
}

async function signInOrLogin() {
  // この中に実装します
}

まず最初に必要な変数を揃えます。

const userName = this.querySelector('#userName').value;
const password = this.querySelector('#password').value;

次にユーザ登録処理を行います。もしすでに登録されている場合はエラーになりますので、try/catchでエラーが出ないようにします。

try {
  await registerUser(userName, password);
} catch (e) {
}

// 新規ユーザ登録処理です
async function registerUser(userName, password) {
  const user = new ncmb.User();
  user
    .set('userName', userName)
    .set('password', password)
  return await user.signUpByAccount();
}

そしてユーザ登録が済んだら、そのユーザ名とパスワードでログイン処理を実行します。こちらはエラーをハンドリングします。エラーになるとしたら、パスワードの不一致になるでしょう。ユーザ名は表示してもいいように、Aclを誰でも表示可としています。ログイン処理が完了したら日報入力画面 form.html に戻ります。

try {
  // ログイン実行
  await ncmb.User.login(userName, password);
  document.querySelector('#nav').resetToPage('camera.html');
} catch (e) {
  ons.notification.alert('ログイン失敗しました。ユーザ名、パスワードを確認してください');
  return false;
}

全体の処理は次のようになります。

ons.getScriptPage().onInit = function() {
  this.querySelector('#login').onclick = signInOrLogin.bind(this);
}

async function signInOrLogin() {
  // この中に実装します
  const userName = this.querySelector('#userName').value;
  const password = this.querySelector('#password').value;
  try {
    await registerUser(userName, password);
  } catch (e) {
  }
  try {
    // ログイン実行
    await ncmb.User.login(userName, password);
    document.querySelector('#nav').resetToPage('camera.html');
  } catch (e) {
    ons.notification.alert('ログイン失敗しました。ユーザ名、パスワードを確認してください');
    return false;
  }
}

// 新規ユーザ登録処理です
async function registerUser(userName, password) {
  const user = new ncmb.User();
  user
    .set('userName', userName)
    .set('password', password)
  return await user.signUpByAccount();
}

まとめ

ここまでの処理で、認証されていなかった場合に新規登録/ログイン画面に遷移して、ログインしたら元の画面に戻るまでの処理ができあがりました。次回はカメラを使った入力処理を作成します。

Monaca + NCMBでカメラメモアプリを作る シリーズリンク

中津川 篤司

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