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

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

# Overview

元の記事：[リンク](https://github.com/ncmbadmin/monaca_login_template)

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

* Android, iOSアプリをHTML, JavaScriptで簡単に作れるツール[Monaca](https://ja.monaca.io/)
* アプリのサーバー機能を簡単に作れるツール[Nifty cloud mobile backend](http://mb.cloud.nifty.com/)

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

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

![overview](https://raw.githubusercontent.com/ncmbadmin/monaca_login_template/master/readme-img/overview.JPG "概要図")

## Demo

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

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

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

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

* ユーザー新規登録画面

![demo2](https://raw.githubusercontent.com/ncmbadmin/monaca_login_template/master/readme-img/demo3.JPG "登録完了")

* ログイン画面

![demo1](https://raw.githubusercontent.com/ncmbadmin/monaca_login_template/master/readme-img/demo2.JPG "起動画面")


## Requirement

* Monaca環境
* Nifty cloud mobile backend Javascript SDK version 1.2.6　ダウンロード：[Javascript SDK](http://mb.cloud.nifty.com/doc/1.2.6/introduction/sdkdownload_javascript.html?utm_source=community&utm_medium=referral&utm_campaign=sample_monaca_data_registration)
* ※version 2.0.0はまだ準備中です。

## Installation

* Monacaで新規アプリ作成し、プロジェクトをインポートする。
  - monacaの利用登録する
    [Monaca](https://ja.monaca.io/)

![monaca](https://raw.githubusercontent.com/ncmbadmin/monaca_login_template/master/readme-img/monaca.JPG "新規プロジェクト")
  - monacaで新規プロジェクトを作成する

![create](https://raw.githubusercontent.com/ncmbadmin/monaca_login_template/master/readme-img/monaca_new_project.JPG "新規プロジェクト")

![create](https://raw.githubusercontent.com/ncmbadmin/monaca_login_template/master/readme-img/monaca_new_project_2.JPG "新規プロジェクト")

* mobile backendでアプリ作成する
  - mobile backendで利用登録する
    [Nifty cloud mobile backend](http://mb.cloud.nifty.com/)

![register](https://raw.githubusercontent.com/ncmbadmin/monaca_login_template/master/readme-img/register.JPG "登録画面")
  - mobile backendでアプリ作成する: プロジェクトインポートを選択し、URLからインポートする。
 URLがhttps://github.com/ncmbadmin/monaca_login_template/archive/master.zip
 で選択する。

![newapp](https://raw.githubusercontent.com/ncmbadmin/monaca_login_template/master/readme-img/newapp.JPG "新規アプリ作成")

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

![initialize2](https://raw.githubusercontent.com/ncmbadmin/monaca_login_template/master/readme-img/appKeyClientKey.JPG "初期化")
キーをコピーし、追記します。

![initialize](https://raw.githubusercontent.com/ncmbadmin/monaca_login_template/master/readme-img/appKeyClientKey_setting.JPG "初期化")
  - monacaで動作確認する

![demo](https://raw.githubusercontent.com/ncmbadmin/monaca_login_template/master/readme-img/demo2.JPG "動作確認")

## Description

* コードの説明

File: www/js/app.js

 - 初期化設定

```JavaScript
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に遷移させます。

```JavaScript
//入力フォームから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に遷移します。

```JavaScript
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に遷移します。

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

## Usage

サンプルコードをカスタマイズする、key, value変数を変更していただきます。
以下のドキュメントを参照し、データ保存・検索・プッシュ通知を入れることができる。
* [ドキュメント](http://mb.cloud.nifty.com/doc/current/)
* [ドキュメント・データストア](http://mb.cloud.nifty.com/doc/current/sdkguide/javascript/datastore.html)
* [ドキュメント・会員管理](http://mb.cloud.nifty.com/doc/current/sdkguide/javascript/user.html)
* [ドキュメント・プッシュ通知](http://mb.cloud.nifty.com/doc/current/sdkguide/javascript/push.html)