ログイン認証機能
それでは、前回作成した次の画面に、ログイン認証機能を実装していきましょう。
まず、認証画面（login.html）を次のように作成します。
<body>
<div id="loginPage" data-role="page" data-theme="b">
<div data-role="header" data-position="fixed">
～中略～
</div>
<div role="main" class="ui-content">
<div class="ui-field-contain">
<label for="username">ID:</label>
<input type="text" id="username">
</div>
<div class="ui-field-contain">
<label for="password">パスワード:</label>
<input type="password" id="password">
</div>
<div class="ui-field-contain">
<button id="loginBtn" class="ui-btn">ログイン</button>
<button id="cancelBtn" class="ui-btn">キャンセル</button>
</div>
</div>
<div data-role="footer" data-position="fixed">
～中略～
</div>
</div>
</body>
次に、ログインボタンを押すと実行される認証処理を記述するためのJavaScriptのファイル（app.js）をjsフォルダの配下に作成します。
$(function(){
$(document).on('click', '#loginBtn', function(){
// 1. 変数の定義
var MC = monaca.cloud;
var id = $('#username').val();
var pass = $('#password').val();
// 2. Monacaバックエンドの認証を行う
MC.User.login(id, pass)
// 3. 認証成功
.done(function(){
MC.User.getProperty("address")
.done(function(result){
console.log(result);
})
.fail(function(err){
console.log(err);
})
monaca.pushPage("success.html");
})
// 4. 認証失敗
.fail(function(err){
alert('認証失敗');
});
});
プログラムの説明をします。
1．変数定義
変数MCにMonacaバックエンドを使用するためのオブジェクトを定義します。認証に使うユーザ名とパスワードは、画面から入力された値を取得します。例えば$("#username").val()で画面に配置されたid属性がusernameの要素の値を取得できます。
2．Monacaバックエンドの認証を行う
ログイン認証は、Monacaバックエンドのmonaca.cloud.User.login()を使用します。引数には、画面から取得したusernameとpasswordを指定します。
3．認証成功
ユーザ名とパスワードが一致したら、pushPageメソッドで成功画面（success.html）に遷移します。
このdone()はコールバック関数で、認証処理が正しく完了したときに実行されます。認証に成功したら、登録済みのroleやaddressなどのユーザ属性を取得することもできます。ユーザ属性を取得するには、getPropertyメソッドまたはgetPropertiesメソッドを使います。サンプルでは、getPropertyメソッドを使って、ユーザ属性であるaddressの値をコンソールログに出力しています。ユーザ情報をまとめて複数取得するときは、getPropertiesメソッドを使います。
4．認証失敗
何らかの理由で認証に失敗したら、アラートを表示します。そのときは、失敗時のコールバック関数であるfail()にアラートを表示する命令を書きます。ほかにも、認証に成功または失敗のいずれかが返ってきたときに、always()が実行されます。
Monacaでは、通常のWebアプリのように画面遷移を行うためのpushPageメソッドのほかにも、トップ画面（index.html）や1つ前のページに戻るAPIなどが用意されています。詳細については以下のドキュメントを参照してください。
ユーザ登録機能
Monacaバックエンドの機能は、値を参照するだけでなく、アプリから登録することも可能です。ここでは、ユーザ登録機能を作ってみます。画面や処理部分のコードはさきほどのログイン認証とほぼ同じなので、詳細についてはサンプルを参照してください。
バックエンド機能を使った登録処理を行うには、次のようなコードを書きます。
$(function(){
～中略～
$(document).on('click', '#registerBtn', function(){
～中略～
// 1. Monacaバックエンドの登録処理を行う
MC.User.register( username , password,
{"address": address ,
"role": role,
"zip": zip })
// 2. 登録成功
.done(function(result){
monaca.pushPage('success.html');
})
// 3. 登録失敗
.fail(function(err){
alert("登録失敗");
});
});
});
プログラムの説明をします。
1．Monacaバックエンドの登録を行う
ユーザ登録は、Monacaバックエンドのmonaca.cloud.User.registerメソッドを使用します。引数には、画面から取得したusernameとpasswordを指定し、残りの属性はJSON形式で指定します。
2．登録成功
ユーザ名とパスワードが一致したら、成功画面（success.html）に遷移します。
このdone()はコールバック関数で、認証処理が正しく完了したときに実行されます。
3．登録失敗
何らかの理由で登録に失敗したら、アラートを表示します。そのときは、失敗時のコールバック関数であるfail()にアラートを表示する命令を書きます。
