MonacaのバックエンドAPIによるユーザ登録 monaca.cloud.User.register() はusername、passwordの登録を前提としているが、スマホアプリでアカウントを登録させるのは、少々ユーザ負荷が大きいとは思う。
なので、アプリ内部で8桁の適当なusernameを生成し、自動登録させるサンプルです。OnsenUIを利用するので、AngularJSベースで記述してます。
なお、自動ログインAPI monaca.cloud.User.autoLogin()もあるのだけど、利用しないほうがロジックがすっきりする気がする(というかドキュメントには明記されてないので憶測ですが、自動ログインには有効期限があるような)。
index.html
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
</head>
<body>
<ons-navigator page="first.html" var="app.navi"></ons-navigator>
<ons-template id="first.html">
<div ng-controller="firstCtrl as ctrl">
<ons-toolbar>
<div class="center">FIRST</div>
</ons-toolbar>
<div style="padding:10px;">
<p ng-show="ctrl.loading"><ons-icon icon='fa-spinner' spin='true' style="opacity:0.7;"></ons-icon> 接続中...</p>
<p ng-hide="ctrl.loading">ネットワークに接続されてません</p>
<p>
<ons-button modifier="large" ng-disabled="ctrl.loading" ng-click="ctrl.onGoLogin()">再接続</ons-button>
</p>
</div>
</div>
</ons-template>
<ons-template id="top.html">
<div ng-controller="topCtrl as ctrl">
<ons-toolbar>
<div class="center">TOP</div>
</ons-toolbar>
<div style="padding:10px;">
{{ctrl.username}}
</div>
</div>
</ons-template>
</body>
</html>
app.js
(function(){
'use strict';
ons.bootstrap("myApp",['onsen','controllerModule'])
.factory('shared',[function(){
var _o = {
userid:null,
username:null,
uuid:function(){
var S4 = function() {
return (((1+Math.random())*0x10000)|0).toString(16).substring(1).toUpperCase();
}
return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4() +S4());
},
startup:function(){
var _d = new $.Deferred,
_username = localStorage["username"], _password=localStorage["password"];
if (_username !== void 0 && _password !== void 0) {
// ログイン
monaca.cloud.User.login(_username, _password).then(
function(res){
_o.userid = res.user._id,
_o.username = _username;
_d.resolve("OK");
},
function(err){_d.reject(err);}
);
} else {
// ユーザ登録
// 既に登録済みusernameの場合、エラーになります
_username = _o.uuid().substr(0,8),
_password = _o.uuid();
monaca.cloud.User.register(_username, _password).then(
function(res){
localStorage["username"] = _username;
localStorage["password"] = _password;
_o.userid = res.user._id,
_o.username = _username
_d.resolve("OK");
},
function(err){_d.reject(err);}
);
}
return _d.promise();
}
};
return _o;
}]);
})();
controller.js
(function(){
'use strict';
angular.module("controllerModule", [])
.controller('firstCtrl',['shared','$scope',function(shared,$scope){
var _this=this;
_this.loading = true,
_this.onStartup = function(){
_this.loading = true;
shared.startup().then(
function(res){
// ログイン完了後に呼び出される
app.navi.replacePage('top.html',{animation:"none"});
},
function(err){_this.loading=false;$scope.$apply();}
);
};
_this.onStartup();
}])
.controller('topCtrl',['shared',function(shared){
// TOP画面
this.username = shared.username;
}]);
})();