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内に記載します。
Parse.initialize("APPLICATION_ID", "JAVASCRIPT_KEY");
APPLICATION_IDには取得したApplication ID、JAVASCRIPT_KEYにはJavascript Keyを記述します。
これを設定する事でクライアントのHTMLとあなたのParse.comのアプリが連動します。
ユーザー登録の仕組み
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から入力したメールアドレスに認証メールが送信されます。
ログインの仕組み
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のサンプルでもメールアドレスの認証に関するサンプルは見つけられなかったので、試行錯誤してみました。
もっとよい方法があればお知らせください。