milkcocoaでサインイン・ログイン #JavaScript

ちょっと気になっていたBaaS「milkcocoa」を使ってみた。
簡単にサインイン・ログインできる画面を作った。サインイン・ログインインって結構作るの面倒なのでこういうところを肩代わりしてくれるのはすごく役に立つ。
本当はチャットとかリアルタイムでコラボレーションできるサービスとかが作れればよかったのだけど、いかんせん時間がなかったので簡単にサインイン・ログインのページで勘弁していただきたい。

index.html

<html>
<head>
    <script src="http://cdn.mlkcca.com/v0.2.8/milkcocoa.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.3.js"></script>
    <script src="javascripts/Index.js"></script>
</head>
<body>
<h1>Test</h1>
<div>
    <h2>Log In</h2>
    <p>
        E-Mail:<input type="email" class="login-id"><br>
        PASS:<input type="password" class="login-pass"><br>
        <button onClick="logIn()">送信</button>
    </p>
</div>
<div>
    <h2>Sign In</h2>
    <p>
        E-Mail:<input type="email" class="signin-id"><br>
        PASS:<input type="password" class="signin-pass-1"><br>
        もう一度:<input type="password" class="signin-pass-2"><br>
        <button onClick="signIn()">送信</button>
    </p>
</div>
</body>
</html>

Index.js


var milkcocoa = new MilkCocoa("https://appID.mlkcca.com:443");

function logIn(){
    var id = $('.login-id').val();
    var pass = $('.login-pass').val();

    if(id != undefined && pass != undefined){
        milkcocoa.login(id,pass,function(err,user){
            if(err === null){
                alert('ログインが完了しました');
            } else {
                if(err === MilkCocoa.Error.Login.FormatError){
                    alert('メールアドレスが無効の形式です');
                }

                if(err === MilkCocoa.Error.Login.LoginError){
                    alert('パスワードが無効です');
                }

                if(err === MilkCocoa.Error.Login.EmailNotVerificated){
                    alert('メールアドレスが認証されていません');
                }
            }
        })
    } else {
        if(id === undefined){
            alert('メールアドレスを入力してください');
        }

        if(pass === undefined){
            alert('パスワードを入力してください');
        }
    }
}

function signIn(){
    var id = $('.signin-id').val();
    var pass_1 = $('.signin-pass-1').val();
    var pass_2 = $('.signin-pass-2').val();

    if(id != undefined){
        if(pass_1 == pass_2){
            milkcocoa.addAccount(id,pass_1,null,function(err,user){
                if(err == null){
                    alert(user.email + 'のユーザ登録が完了しました');
                } else {
                    if(err === MilkCocoa.Error.AddAccount.FormatError){
                        alert('無効な書式のメールアドレスです');
                    }

                    if(err === MilkCocoa.Error.AddAccount.AlreadyExist){
                        alert('すでに追加されているメールアドレスです');
                    }
                }
            })
        } else {
            alert('パスワードが間違ってます');
        }
    } else {
        alert('メールアドレスを入力してください');
    }
}

サインインしたらメールが飛んで、そのメール中のURLをクリックすることでアクティベーションが完了しログインが可能になる。アクティベーションまでやってくれのには驚いた。

var milkcocoa = new MilkCocoa("https://appID.mlkcca.com:443");　
のところは適宜書き換える。

milkcocoa公式のページでは:443はなかったが、ないと net::ERR_CONNECTION_TIMED_OUTがでてしまう。

サーバーにあげて同じことが起こるかは確認していないが、ローカルで試すときはでてしまうので、後ろにポート番号:443をつける。

milkcocoa独自のコードはnew MilkCocoaでインスタンス作るところと、addAccountでアカウントを作るところ、loginでログインするところとエラー処理ぐらいしかない。
これだけでサインイン・ログインができるページが作れてしまう。かなりお手軽で良い。

みたところまだ退会とかパスワードを変更する関数はないみたいだが、まだベータ版だしこれからなんだろう。これから機能が増えてくるのが楽しみだ。