ニフクラ mobile backend（mBaaS）お役立ちブログ

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

Monaca × ニフティクラウド mobile backendによるWeb技術でのスマホアプリ開発（認証編）

認証 過去記事 javascript Monaca Tips

MonacaというのはHTML5/JavaScriptを使ってiOS/Androidアプリを開発できるサービスです。これまで慣れ親しんできたWeb技術を使ってネイティブアプリが開発できます。

しかし、これまでサーバサイドありきで開発してきたWebシステムだけに、スマートフォンアプリになると多少勝手が違います。特にデータの保存先が大きな違いで、サーバサイドがあった方がこれまでと同じように開発ができるでしょう。

もちろん自分でサーバサイドを開発しても良いですが、アプリもサーバも作るとなると時間も工数もかかってしまいます。そこで使ってみて欲しいのがニフティクラウド mobile backendです。Monacaとニフティクラウド mobile backendはシームレスに連携しており、すぐに連携アプリが開発できます。

前回は写真アップロード、前々回はTodoアプリを紹介しました。今回はデモ版の最後になります、認証アプリを紹介します。

管理画面上でユーザ作成

まず最初にニフティクラウド mobile backend上でユーザを作成します。JavaScript SDKにもユーザ登録機能はありますが、デモアプリでは認証機能のみ提供されていますのでログインできるユーザをあらかじめ作成しておく必要があります。

ユーザの作成は管理画面の 会員管理 を使って行います。userNameとpasswordを登録すれば完了です。

動作確認

ではまずは Monaca ビューワーを使って動作を確認します。ユーザID、パスワードを入力します。

ログインをタップするとダイアログが出ます。

ユーザ名やユーザ作成日などの情報が表示されます。

動画ではこのような動きになります。

https://www.youtube.com/watch?v=P7C38nVvgpo

プログラミングコードを確認

では実際のプログラミングコードを見ていきましょう。ログイン画面のHTMLフォームは次のようになっています。

<div class="table">
  <div class="table-body">
    <div class="table-cell tappable">
      <div class="table-cell-inner">
        <p class="form-label">ユーザーID</p>
        <input type="text" id="user-name" />
      </div>
    </div>
    <div class="table-cell tappable">
      <div class="table-cell-inner">
        <p class="form-label">パスワード</p>
        <input type="password" id="password" />
      </div>
    </div>
  </div>
</div>
<div class="no-border-button tappable" id="login">
  ログイン
</div>

そしてログイン処理を行う LoginPageController(www/js/login.js) は次のようになっています。

var LoginPageController = {
  init : function() {
    $(function() {
      LoginPageController.prepare();
    });
  },
  prepare : function() {
    $('#login').on('tappable-tap', function() {
      LoginPageController.login();
    });
    :
  },

#login をタップするイベントで、 LoginPageController.login() を実行しています。

login : function() {
  var userName = $('#user-name').val();
  var password = $('#password').val();
  NCMB.User.logIn(userName, password, {
    success : function(user) {
      // 成功
      alert("ログインに成功しました");
      location.href = 'user.html';
    },
    error : function(user, error) {
      // エラー
      alert("ログインに失敗しました");
      console.log(JSON.stringify(arguments));
    }
  });
}

ログイン処理はこのようになっています。 #user-name、#password の値を使って、 NCMB.User.logIn を実行しています。ログイン成功の場合はsuccessが、失敗した場合はerrorが呼ばれるようになっています。

ログインに成功したら、 user.html というファイルに遷移しています。

ユーザ情報の表示

user.html ではログイン処理した時に受け取ったデータを表示しています。例えばこのようなHTMLになります。

<div class="table-cell">
  <div class="table-cell-inner">
    <p class="label">ユーザー名</p>
    <div class="table-cell-content-right">
      <p class="bold" id="user-name"></p>
    </div>
  </div>
</div>

JavaScriptではNCMB.User.current()でログインしているユーザの情報が取得できます。

var currentUser = NCMB.User.current();
if (currentUser) {
  console.log(currentUser);
  $('#user-name').text(currentUser.get('userName'));
  $('#create-date').text(currentUser.get('createDate'));
  $('#memo').text(currentUser.get('memo'));
} else {
  alert("ログインしていません");
}

このように currentUser.get(‘userName’) を使ってユーザ名が取得できます。ユーザ情報のオブジェクトは次のような形式になっています。

{
  "userName":"moongift",
  "authData":null,
  "mailAddress":"atsushi@moongift.jp",
  "mailAddressConfirm":false,
  "createDate":"2014-06-18T05:39:17.256Z",
  "updateDate":"2014-06-18T05:41:55.429Z",
  "objectId":"DLi8YT3PlJ8UbZIQ"
}

後は自由にテンプレートを使って描画できるはずです。

ログアウト

ログアウトは NCMB.User.logOut(); をコールするだけです。

logout : function() {
  NCMB.User.logOut();
  location.href = 'login.html';
}

いかがでしょうか。ニフティクラウド mobile backendを使えば、アプリ単体では難しい認証機能も簡単に実現できます。そうすれば個人のデータを保存したり、他のユーザとシェアしたりとアプリの幅が大きく広がるのではないでしょうか。

ニフティクラウド mobile backendはmBaaSなのでサーバ構築が不要であり、Monacaはアプリの開発環境構築が不要になります。この二つを組み合わせれば、Webブラウザだけですぐにでもスマートフォンアプリ開発がはじめられますよ！

f:id:mbaasblog:20180927104348p:plain