LoginSignup
27

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-02-12

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/todos.js
Parse.initialize("APPLICATION_ID", "JAVASCRIPT_KEY");

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

ユーザー登録の仕組み

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/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のサンプルでもメールアドレスの認証に関するサンプルは見つけられなかったので、試行錯誤してみました。
もっとよい方法があればお知らせください。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
27