⑤Meteorに触ってみる（アカウント管理を追加してみる）

公式サイトのTutorialsを参考に、
前回作成したアプリケーションに、アカウント管理を追加してみます。

meteorには、アカウント管理の部品が標準で用意されています。
部品を利用するだけで、アカウント管理が実装できます。

メール認証、Twitter、Facebook、GoogleAccount認証とかもできるみたいですが、
今回は、シンプルなパスワード認証を追加してみます。

まずは、下記コマンドを実行して、パスワード認証を追加します。

meteor add accounts-ui accounts-password

■simple-todos.html を変更します。

〜
<body>
  <div class="container">
    {{> loginButtons}}
    {{#if currentUser}}
　　　〜
    {{/if}}
  </div>
</body>

<template name="task">
  <li class="{{#if checked}}checked{{/if}}">
　　　〜
    <span class="text"><strong>{{username}}</strong> - {{text}}</span>
  </li>
</template>

{{> loginButtons}} を追加します。
ログインしている時だけ、表示したい部分を{{#if currentUser}}　〜　{{/if}}で囲みます。

{{username}}は、ログインユーザです。
誰が追加したタスクであるかを表示します。

■simple-todos.js　を変更します。

// クライアント側のコード
if( Meteor.isClient ){

  //--------------------------------------
  // アカウント管理
  Accounts.ui.config({
    passwordSignupFields: "USERNAME_ONLY"
  });


  //--------------------------------------
  // <body>内のイベント
  Template.body.events({


     // Form送信（新規タスクの入力）
    "submit .new-task": function( event ) {

　　　〜
 
      // タスクの追加
      Tasks.insert({
        text: text,
        createdAt: new Date(), // 現在時刻
        username: Meteor.user().username  // ログインユーザ名
      });
 
　　　〜
    }

  });

}