Monacaでユーザ自動登録メモ

MonacaのバックエンドAPIによるユーザ登録 *monaca.cloud.User.register()* はusername、passwordの登録を前提としているが、スマホアプリでアカウントを登録させるのは、少々ユーザ負荷が大きいとは思う。
なので、アプリ内部で8桁の適当なusernameを生成し、自動登録させるサンプルです。OnsenUIを利用するので、AngularJSベースで記述してます。

なお、自動ログインAPI *monaca.cloud.User.autoLogin()*もあるのだけど、利用しないほうがロジックがすっきりする気がする(というかドキュメントには明記されてないので憶測ですが、自動ログインには有効期限があるような)。


```html: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>
```
```js: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;            
    }]);

})();
```
```js: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;
    }]);
    
})();
```