[monaca x mBaaS] 3分でアプリにユーザー登録、ログイン機能を作ります！

Monaca x NIFTYCLOUD mobile backend(mBaaS) ユーザー登録、ログイン、ログアウトサンプル

Overview

元の記事：リンク

こちらはMonacaを利用して、mBaaSサーバーを活用して、ユーザー登録、ログイン、ログアウト機能を実装するサンプルです。

• Android, iOSアプリをHTML, JavaScriptで簡単に作れるツールMonaca
• アプリのサーバー機能を簡単に作れるツールNifty cloud mobile backend

MonacaとmBaaS初めての方にお勧めです、
約5分ぐらいで、monacaで作るアプリにユーザー管理機能ができるようにする
サンプルGithubに公開しました。
ログインフォーム、登録フォームはmonaca-jquery-mobileによって作成しました！まとまった形で丸っと試します。

ささっとインポートし、アプリキー、クライアントキーを入れるだけで、アプリにログイン機能追加できます！
皆さんがこれから、アプリでユーザーごと何か管理したいものあれうば、ぜひ活用してみてください！
例えば、コメント機能、チャット、スコア保存などです＾＾！

Demo

MonacaでgithubのURL (Download zip file)をインポートし、
アプリキーとクライントキーを設定し、アプリを起動（プレビュー）します。

最初にログイン画面が出て、「登録」ボタンを押し、登録画面に行きます。
登録画面にて、「ユーザー名」＋「パスワード」を入力し、ユーザー登録を行います。

ログイン画面に戻り、登録した「ユーザー名」＋「パスワードの組み合わせで」
ログインができることを確認します。

※mBaaS管理画面にて、ユーザー登録されていることを確認できます。

• ユーザー新規登録画面

• ログイン画面

Requirement

• Monaca環境
• Nifty cloud mobile backend Javascript SDK version 1.2.6　ダウンロード：Javascript SDK
• ※version 2.0.0はまだ準備中です。

Installation

• Monacaで新規アプリ作成し、プロジェクトをインポートする。
  • monacaの利用登録する
    Monaca

• monacaで新規プロジェクトを作成する

• mobile backendでアプリ作成する
  • mobile backendで利用登録する
    Nifty cloud mobile backend

• mobile backendでアプリ作成する: プロジェクトインポートを選択し、URLからインポートする。
  URLがhttps://github.com/ncmbadmin/monaca_login_template/archive/master.zip
  で選択する。

• monacaで作成したアプリをmobile backendサーバーと連携させる
  • monacaでアプリキー、クライアントキーを設定し、初期化を行う

キーをコピーし、追記します。

• monacaで動作確認する

Description

• コードの説明

File: www/js/app.js

• 初期化設定

var appKey    = "YOUR_APPKEY";
var clientKey = "YOUR_CLIENTKEY";
var ncmb = new NCMB(appKey, clientKey);

上記のコードでアプリケーションキーとクライアントキーを指定し、
NCMB(appKey, clientKey)　でmBaaSサーバと連携を行います。

• ユーザ登録

NCMB.Userクラスを利用して、ユーザ登録を行います。

最初にuserという変数をNCMB.Userクラスのインスタンスとして作成します。
userに対し、set("key", "value")というメソッドを利用して、username, passwordをセットします。
他の属性（たとえば年齢や性別など）も、同様の形でセットできます。

セット後、signUpByAccount()メソッドを利用し、ユーザ登録を非同期にて行います。
メソッドチェインを行い、then(), catch() それぞれの場合の処理を定義します。
成功の場合、alertを出し、currentLoginUserをセットしてから、#DetailPageに遷移させます。

//入力フォームからusername, password変数にセット
var username = $("#reg_username").val();
var password = $("#reg_password").val();

var user = new ncmb.User();
user.set("userName", username)
    .set("password", password);

// 任意フィールドに値を追加
user.signUpByAccount()
    .then(function(user) {
        alert("新規登録に成功");
        currentLoginUser = ncmb.User.getCurrentUser();
        $.mobile.changePage('#DetailPage');
    })
    .catch(function(error) {
        alert("新規登録に失敗！次のエラー発生：" + error);
    });

• ユーザーログイン

ncmb.Userクラスを利用し、ユーザログインを行います。
ncmb.Userのloginメソッドを利用し、username, passwordを渡し、非同期にてログインを行います。
メソッドチェインを行い、then(), catch() それぞれの場合の処理を定義します。
ログイン成功した場合、alertを出し、currentLoginUserをセットしてから、#DetailPageに遷移します。

var username = $("#login_username").val();
var password = $("#login_password").val();
// ユーザー名とパスワードでログイン
ncmb.User.login(username, password)
    .then(function(user) {
        alert("ログイン成功");
        currentLoginUser = ncmb.User.getCurrentUser();
        $.mobile.changePage('#DetailPage');
    })
    .catch(function(error) {
        alert("ログイン失敗！次のエラー発生: " + error);
    });

• ユーザーログアウト

ncmb.Userクラスを利用し、ユーザログアウトを行います。
ncmb.Userのlogoutメソッドを利用し、ログアウトを行います。
ログアウトの後、currentLoginUserをリセットし、#LoginPageに遷移します。

ncmb.User.logout();
alert('ログアウト成功');
currentLoginUser = null;
$.mobile.changePage('#LoginPage');

Usage

サンプルコードをカスタマイズする、key, value変数を変更していただきます。
以下のドキュメントを参照し、データ保存・検索・プッシュ通知を入れることができる。

• ドキュメント
• ドキュメント・データストア
• ドキュメント・会員管理
• ドキュメント・プッシュ通知