読者です 読者をやめる 読者になる 読者になる

メモ帳

やったこととかちまちまと書く 需要のない記事を生成している

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の公式ドキュメントはかなり親切だと思った。



広告を非表示にする