[JavaScript版]Parse.comをつかってメール認証によるユーザー登録とユーザー認証を行う方法

##Parseってなんだ？
https://parse.com/
私も出会ったばかりでよくわからない部分も多いですが、
Backend as a Serviceって呼ばれたりして・・・（略）。

すいません。
こちらをみてみてください。
http://www.slideshare.net/ktsujichan/5parsecom

##ユーザー登録とユーザー認証
いろんなアプリ作っていると、ユーザー登録とユーザー認証を行いたいときってありますよね！
Parse.comなら、それも簡単にできます。
スマホアプリでもWebアプリでも作れるんですが、今回はjavascriptでWebアプリなものになります。

なお、ベースとなっているのは、こちらのToDoアプリです。
https://github.com/ParsePlatform/Todo

メール認証に対応させたバージョンはこちらからダウンロード可能です。
https://github.com/hamichamp/parse-email-authorization-sample

###まずは、Parse.comのユーザー登録
（省略します）

###次に、Parse.comでアプリを作成
（省略します）
簡単にいうと、ログインして、ダッシュボードから、Create New Appから作れます。

###メールアドレスの認証設定を有効にする
Parse.com上のダッシュボードで作成したアプリの設定画面を呼び出します。
左側のメニューに、Email settingsという項目がありますので、それを選択します。
設定できる項目にVerify user emailsというものがありますが、これをONにすることで
メールアドレスの認証設定が有効になります。

###Application KeysからApplication IDとJavascript Keyを取得します。
左側のメニューに、Application Keysという項目がありますので、それを選択します。
画面内にいっぱいキーがありますが、その中からApplication IDとJavascript Keyをコピーします。
コピーしたIDとキーをtodos.js内に記載します。

```js:js/todos.js
Parse.initialize("APPLICATION_ID", "JAVASCRIPT_KEY");
```

APPLICATION_IDには取得したApplication ID、JAVASCRIPT_KEYにはJavascript Keyを記述します。
これを設定する事でクライアントのHTMLとあなたのParse.comのアプリが連動します。

###ユーザー登録の仕組み

```js:js/todos.js
  var LogInView = Parse.View.extend({
    events: {
      "submit form.login-form": "logIn",
      "submit form.signup-form": "signUp"
    },

...

    signUp: function(e) {
      var self = this;
      var email = this.$("#signup-email").val();
      var username = this.$("#signup-username").val();
      var password = this.$("#signup-password").val();
      
      Parse.User.signUp(username, password, {
        ACL: new Parse.ACL(), email: email }, {
        success: function(user) {
          if (user.get("emailVerified")) {
            new ManageTodosView();
            self.undelegateEvents();
            delete self;
          } else {
            Parse.User.logOut();
            self.$(".signup-form .error").html("Send message your email address. Please check your email.").show();
            this.$(".signup-form button").removeAttr("disabled");
          }
        },

        error: function(user, error) {
          self.$(".signup-form .error").html(error.message).show();
          this.$(".signup-form button").removeAttr("disabled");
        }
      });

      this.$(".signup-form button").attr("disabled", "disabled");

      return false;
    },

...

  });
```

Parse.User.signUpでユーザー登録を行いますが、オプションでemailを指定することで、メールアドレスを設定する事が可能です。ユーザー登録を行うと、自動的にParse.comから入力したメールアドレスに認証メールが送信されます。

###ログインの仕組み

```js:js/todos.js
  var LogInView = Parse.View.extend({
    events: {
      "submit form.login-form": "logIn",
      "submit form.signup-form": "signUp"
    },

    el: ".content",
    
    initialize: function() {
      _.bindAll(this, "logIn", "signUp");
      this.render();
    },

    logIn: function(e) {
      var self = this;
      var username = this.$("#login-username").val();
      var password = this.$("#login-password").val();
      
      Parse.User.logIn(username, password, {
        success: function(user) {
          if (user.get("emailVerified")) {
              new ManageTodosView();
              self.undelegateEvents();
              delete self;
          } else {
              Parse.User.logOut();
              self.$(".login-form .error").html("email address not verified. Please check your email.").show();
              this.$(".login-form button").removeAttr("disabled");
          }
        },

        error: function(user, error) {
          self.$(".login-form .error").html("Invalid username or password. Please try again.").show();
          this.$(".login-form button").removeAttr("disabled");
        }
      });

      this.$(".login-form button").attr("disabled", "disabled");

      return false;
    },

...

  });
```

Parse.User.logInでログインができますが、メールアドレスが認証されているかどうかに関係なく
ユーザー名とパスワードが一致していれば、ログイン状態となるようです。

###メールアドレスが認証されているかの確認
user.get("emailVerified")でログインしたユーザーのメールアドレスが認証されているかどうかをチェックできます。
認証が済んでいる場合はTrueが返り、そうでない場合はFalseが返ってきます。
認証が済んでいない限りはログインさせたくないのであれば、Parse.User.logOutでログアウトしてください。

##最後に
いかがでしたか？
Parse.comのサンプルでもメールアドレスの認証に関するサンプルは見つけられなかったので、試行錯誤してみました。
もっとよい方法があればお知らせください。