Meteorでログインシステム構築
数ページのWebアプリケーションを書くことになったのでMeteorでやってみることにした。環境構築の説明してるサイトはいっぱいありそうなのでログインシステムを構築してみる。(ログインシステムの構築もたくさんあったけど・・・)
Meteorのバージョンは1.4.1.2
下準備
meteor add accounts-password
ソースコード
main.js(client)
import { Meteor } from 'meteor/meteor' import { Accounts } from 'meteor/accounts-base' Template.Register.events({ 'submit .enter': function(event) { event.preventDefault(); var target = event.target; if(target.name.value && target.email.value && target.password.value) { Accounts.createUser({ username: target.name.value, email: target.email.value, password: target.password.value },function(err){ if(err) { console.log(err); } else { console.log("submit"); } }); } }, 'submit .login': function(event) { event.preventDefault(); var target = event.target; if(target.name.value && target.password.value) { Meteor.loginWithPassword(target.name.value,target.password.value,function(err){ if(err) { console.log(err); } else { console.log("login"); } }); } } });
main.html
<head> <title>Login_System</title> </head> <body> <h1>Hello World</h1> {{#if currentUser}} <button type="button" onclick="Meteor.logout();">ログアウト</button> {{else}} {{> Register}} {{/if}} </body> <template name="Register"> <h1>登録</h1> <form class="enter"> <p>ユーザ名:<input type="text" name="name"></p> <p>メールアドレス:<input type="text" name="email"></p> <p>パスワード:<input type="password" name="password"></p> <input type="submit" value="登録"><input type="reset" value="リセット"> </form> <h1>ログイン</h1> <form class="login"> <p>チーム名:<input type="text" name="name"></p> <p>パスワード:<input type="password" name="password"></p> <input type="submit" value="ログイン"><input type="reset" value="リセット"> </form> </template>
メールアドレスって書いてあるけど実質どんなテキストでも保存ができる。
Meteorの公式ドキュメントはかなり親切だと思った。