チュートリアル（JavaScript & Monaca）
プッシュ通知
会員管理・認証
SNS連携
データストア
位置情報検索
ファイルストア
スクリプトMonacaアプリから会員管理・認証機能を使う
概要
このチュートリアルでは、架空の「中古品交換アプリ」を例に
Monacaアプリから以下の機能を利用する方法について紹介していきます。
- 会員管理・認証機能
- ファイルストア機能
中古品交換アプリは、アプリの利用者同士で自分が持っている中古品を交換できるものとします。
アプリに必要な機能としては以下のようなものが考えられます。
- 会員の管理
- 会員の登録
- 会員のログイン・ログアウト
- 中古品情報の管理
- 中古品の登録
- 中古品の一覧表示
- 交換リクエストの管理
- 交換したい商品を選んでリクエストする
- 商品の交換リクエストの処理（承認・拒否）
これらの機能のうち、交換リクエストの管理はロジックについての説明が必要になるので
今回は割愛し、会員の管理と中古品情報の管理機能をベースに説明していきます。
前半と後半に分かれており、前半は会員管理・認証機能を利用していきます。
後半はこちら
Monacaでのプロジェクト作成
このチュートリアルでは、以下のライブラリを利用しています。
- Onsen UI
- ニフクラ mobile backend (JavaScript SDK 1.2.6)
Monacaプロジェクトを作成する際に、Onsen UIが含まれているテンプレートを選択するか、
プロジェクトの設定からOnsen UIを有効にしてください。
ニフクラ mobile backendのSDKは、
以下のドキュメントを参考にしてインストールを実施してください。
SDKダウンロード
ニフクラ mobile backendの会員登録がまだの方は、こちらをご覧ください。
会員管理・認証機能を利用する
会員登録とログイン機能
Onsen UI を使用して、ログインページを作成します。
<ons-page ng-controller="PortalController">
<ons-toolbar>
<div class="center">ホームページ</div>
</ons-toolbar>
<div style="text-align: center">
<h1>中古品交換</h1>
<p>ユーザー名</p>
<p>
<input class="text-input" type="text" ng-model="userName" />
</p>
<p>パスワード</p>
<p>
<input class="text-input" type="password" ng-model="password" />
</p>
<ons-button modifier="light" class="index-button"
ng-click="login(userName, password);">ログイン</ons-button>
<br/>
<ons-button modifier="light" class="index-button"
ng-click="myNavigator.pushPage('signUp.html');">新規会員作成</ons-button>
</div>
</ons-page>
ログインページと同じように会員登録ページを用意します。
ログインページに用意したボタンから、会員登録ページに遷移するようになっています。
<ons-page ng-controller="SignUpController">
<ons-toolbar>
<div class="left">
<ons-back-button>戻る</ons-back-button>
</div>
<div class="center">新会員作成</div>
</ons-toolbar>
<div style="text-align: center">
<h1>会員登録</h1>
<p>ユーザー名</p>
<p>
<input class="text-input" type="text" ng-model="userName" />
</p>
<p>パスワード</p>
<p>
<input class="text-input" type="password" ng-model="password" />
</p>
<p>パスワード再入力</p>
<p>
<input class="text-input" type="password"
ng-model="passwordRetype" />
</p>
<ons-button modifier="light" class="index-button"
ng-click="signUp(userName, password, passwordRetype);">登録する</ons-button>
</div>
</ons-page>
<ons-template id="register.html">
<ons-page ng-controller="RegisterController">
<ons-toolbar>
<div class="left">
<ons-back-button>戻る</ons-back-button>
</div>
<div class="center">新会員作成</div>
</ons-toolbar>
<div style="text-align: center">
<h1>会員登録</h1>
<p>ユーザー名</p>
<p><input class="text-input" type="text" ng-model="username_reg" /></p>
<p>パスワード</p>
<p><input class="text-input" type="password" ng-model="password_reg" /></p>
<p>パスワード再入力</p>
<p><input class="text-input" type="password" ng-model="password_reg_again" /></p>
<ons-button modifier="light" class="index-button"
ng-click="register(username_reg, password_reg, password_reg_again);">登録する</ons-button>
</div>
</ons-page>
</ons-template>
ログインを実施するControllerをJavaScriptで作成していきます。
ons-pageタグで指定したng-controller属性の名前でControllerを作成してください。
フォームの値はHTML側でng-model属性を設定しているものを同じ名前の変数として扱うことができます。
ニフクラ mobile backendにログインする場合は、NCMB.Userクラスのloginメソッドを利用します。
module.controller("PortalController", function(userInfo, $scope) {
$scope.login = function(userNameLogin, passwordLogin) {
//ニフクラ mobile backendにログインする
NCMB.User.logIn(userNameLogin, passwordLogin, {
success: function(user) {
userInfo.refresh();
myNavigator.pushPage("mainPage.html");
},
error: function(user, error) {
ons.notification.alert({
message: error.message,
title: "ログイン失敗",
buttonLabel: "OK",
animation: "default"
});
}
});
};
ログインと同じ仕組みで、会員登録用のcontrollerも用意します。
会員登録時は、NCMB.Userクラスのインスタンスを作成し、signUpメソッドを実行します。
中古品交換アプリでは、会員を検索する機能を実装するために、
読み込み権限を全開放したACLを設定して、会員登録を行っています。
module.controller("SignUpController", function($scope) {
$scope.signUp = function(userName, password, passwordRetype) {
if (password !== passwordRetype) {
ons.notification.alert({
message: "パスワードが一致しません。もう一度入力してください。",
title: "登録失敗",
buttonLabel: "OK",
animation: "default"
});
return;
}
//ニフクラ mobile backendの会員を作成
var user = new NCMB.User();
//ユーザー名とパスワードを設定
user.set("userName", userName);
user.set("password", password);
//読み込み権限を全開放したACLを設定
user.setACL(new NCMB.ACL({"*":{"read":true}}));
//ニフクラ mobile backendへの会員登録を行う
user.signUp(null, {
success: function (){
myNavigator.pushPage("mainPage.html");
},
error: function (obj, error){
ons.notification.alert({
message: error.message,
title: "登録失敗",
buttonLabel: "OK",
animation: "default"
});
}
});
};
});
自動ログイン機能
会員登録またはログイン後にアプリを再起動した時に、
認証済み会員のセッショントークンが有効であれば、
ログイン画面をスキップしてアプリに遷移する機能を実装しました。
以下のコードは、認証済みの会員情報を取得するuserInfoサービスのサンプルコードです。
module.service("userInfo", function() {
var userInfo = {};
userInfo.refresh = function () {
if (!NCMB.User.current() ||
!(userInfo.userName = NCMB.User.current().get("userName"))) {
userInfo.userName = null;
}
};
userInfo.refresh();
return userInfo;
});
認証済みの会員情報は、上記のようにNCMB.User.current() メソッドで取得できます。
しかし、認証済み会員のSessionTokenには有効期限があり、
そのSessionTokenが有効か把握する必要があるので、
fetchメソッドを利用して有効期限が切れているかをチェックしています。
もし SessionToken の期限が過ぎているのであればエラーが返却されるので、
ログアウトを実施するようにしています。
以下のサンプルコードを、アプリ起動時にPortalControllerが呼び出された時の処理として実装します。
if (userInfo.userName != null) {
//認証済みの会員を取得
var currentUser = NCMB.User.current();
//fetchメソッドを実行してSessionTokenが有効か確認する
currentUser.fetch({
success: function(myObject) {
myNavigator.pushPage("mainPage.html");
},
error: function(myObject, error) {
//SessionTokenの有効期限が切れている場合
if (error.code == "E401001") {
// Don't push to mainPage.html
NCMB.User.logOut();
}
}
});
}
会員管理・認証機能の使い方については以上です。
後半では、ファイルストアの使い方について説明していきます。
後半はこちら
お探しの内容が見つからなかった場合はユーザーコミュニティ
もご活用ください。（回答保証はいたしかねます）
なお、 Expertプラン以上のお客様はテクニカルサポートにてご質問を承らせて頂きます。
推奨画面サイズ1024×768px以上