06-adding-users.md.erb

---
title: Adding Users
slug: adding-users
date: 0006/01/01
number: 6
contents: Learn about user accounts in Meteor.|Add all the authentication we'll need for Microscope.|Use the built-in accounts-ui package to get an instant user interface.
paragraphs: 27
version: 1.7
---

ここまで私たちは実用的な方法で静的な固定データを作って表示することでシンプルな試作品を作りました。

さらに、データを挿入して、データの変化が瞬時に現れることで、
どのように UI がデータの変化に反応するのかを見てきました。
しかし、このサイトはデータを入力できないので骨抜き状態です。実はまだユーザーもいないのです！

では、どのようにこの問題を解決するのか見ていきましょう。

### アカウント：ユーザーをシンプルに作る

ほとんどのウェブフレームワークでは、ユーザーアカウントを付け加えることは面倒なものとしておなじみです。
たしかに、これはすべてのプロジェクトでやらなければなりませんが、簡単なことではありません。
さらには、OAuth やサードパーティの認証スキームを出来る限り早く使えるようにならなくてはなりません。
世の中はうんざりするほど速く進みます。

幸運なことに、Meteorはこの点も肩代わりしてくれます。
Meteor package がサーバー（ JavaScript ）とクライアント（ JavaScript と HTML と CSS ）の両方のコードに寄与するため、
私たちはほぼ無料でアカウントシステムを使うことができます。

meteor add accounts-ui で Meteor に組み込まれたアカウントの UI を使うことができますが、
ここでは Bootstrap を使ってアプリを作るので、
accounts-ui-bootstrap-dropdown を使います。
（違いはスタイリングだけなのでご心配なく）
コマンドライン上で、このようにタイピングしてください。

~~~bash
$ mrt add accounts-ui-bootstrap-dropdown
$ mrt add accounts-password
~~~
<%= caption "Terminal" %>

この２つのコマンドで私たちは特別なアカウントテンプレートを使うことができます；
{{> loginButtons}} ヘルパーを使うことで、サイトに（ them？）をインクルードすることができます。
ちょっとしたヒント：align 属性を使うことでログインのドロップダウンの表示をコントロールすることができます。
(たとえば: {{> loginButtons align="right"}}).

では、ヘッダーにログインボタンを追加しましょう。
ヘッダーのコード量がが多くなってきているので、　
テンプレート内に書き込む余地を与えましょう。（ヘッダーのコードはclient/views/includes/の中に入れます。）
私たちは追加のマークアップや Bootstrap クラスをサイトの外観を良くするために使っていきます。

~~~html
<template name="layout">
  <div class="container">
    {{>header}}
    <div id="main" class="row-fluid">
      {{yield}}
    </div>
  </div>
</template>
~~~
<%= caption "client/views/application/layout.html" %>
<%= highlight "6" %>

~~~html
<template name="header">
  <header class="navbar">
    <div class="navbar-inner">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="{{pathFor 'postsList'}}">Microscope</a>
      <div class="nav-collapse collapse">
        <ul class="nav pull-right">
          <li>{{loginButtons}}</li>
        </ul>
      </div>
    </div>
  </header>
</template>
~~~
<%= caption "client/views/includes/header.html" %>

さて、アプリを見てみるとサイトの右上にアカウントログインボタンがあるのがわかります。

<%= screenshot "6-1", "Meteor's built-in accounts UI" %>

////

////

~~~js
Accounts.ui.config({
  passwordSignupFields: 'USERNAME_ONLY'
});
~~~
<%= caption "client/helpers/config.js" %>

<%= commit "6-1", "Added accounts and added template to the header" %>

### Creating Our First User

先に進んでアカウントのサインアップをします：
すると、「サインイン」ボタンは変化してユーザーネームを表示します。
これでユーザーアカウントが作られたことが確認できます。
しかし、ユーザーアカウントのデータはどこから来たのでしょうか。

アカウントパッケージを入れたことで、Meteor は新たに Meteor.users でアクセスできる特別なコレクションを作ります。
これを見るにはプラウザコンソールでこのように入力します。

~~~js
❯ Meteor.users.findOne();
~~~
<%= caption "Browser console" %>

コンソールはユーザーオブジェクトを意味しているオブジェクトを返します。
見てみると、ユーザーネームとあなただけを識別する _id がそこにあるのがわかります。　
また、Meteor.user() を使って、現在ログインしているユーザー情報を得ることができます。

それではログアウトをして、次は違うユーザーネームでサインアップしてみます。
Meteor.user() は現在では２人のユーザーを返すことでしょう。
実行してみます：

~~~js
❯ Meteor.users.find().count();
1
~~~
<%= caption "Browser console" %>

コンソールは１を返しました。ちょっと待って、２じゃないの？（？？？）
最初のユーザーは削除されたのでしょうか？
再び最初のユーザーでログインしてみると、ユーザーが削除されていないことがわかります。

標準的なデータストア、MongoDB の中をチェックしていきましょう。
ターミナルで meteor mongo と入力して MongoDB にログインして、チェックします。

~~~bash
> db.users.count()
2
~~~
<%= caption "Mongo console" %>

間違いなく２人のユーザーがいます。ではなぜブラウザーでは１人だけしかいなかったのでしょうか？

### A Mystery Publication!

４章を振り返ると、autopublish を停止させたことを思えているでしょう。
コレクションがクライアントのローカルのコレクションとつながって、
サーバーから自動的にすべてのデータを送信することを阻止しました。
私たちはデータを交差させるために、パブリケーションとサブスクリプションのペアを作る必要がありました。　

私たちはまだユーザーパブリケーションについて何も設定していません。ではどうして私たちはユーザーデータを見ることができるのでしょうか。

その答えはアカウントパッケージが現在ログインしているユーザーの基本的なアカウントの詳細を "auto-publish" するからです。
そうでないとしたら、ユーザーはこのサイトにログインすることができません！

しかし、アカウントパッケージはカレントユーザーだけをパブリッシュします。
そうした理由で、ユーザーは他のユーザーアカウントの詳細を見ることはできないです。

パブリケーションはログインユーザーごとに一人のユーザーオブジェクトをパブリッシュしています。
　（ログインしていない時はなにもありません。）

さらに、ユーザーコレクション内のドキュメントはサーバーとクライアントで同じフィールドを保持していないようです。　
MongoDB では、ユーザーは多くのデータを（it=ドキュメント?）に保存しています。それを見るために、Mongo ターミナルに戻って、このように入力します：

~~~bash
> db.users.findOne()
{
  "createdAt" : 1365649830922,
  "_id" : "kYdBd9hr3fWPGPcii",
  "services" : {
    "password" : {
      "srp" : {
        "identity" : "qyFCnw4MmRbmGyBdN",
        "salt" : "YcBjRa7ArXn5tdCdE",
        "verifier" : "df2c001edadf4e475e703fa8cd093abd4b63afccbca48fad1d2a0986ff2bcfba920d3f122d358c4af0c287f8eaf9690a2c7e376d701ab2fe1acd53a5bc3e843905d5dcaf2f1c47c25bf5dd87764d1f58c8c01e4539872a9765d2b27c700dcdedadf5ac82521467356d3f91dbeaf9848158987c6d359c5423e6b9cabf34fa0b45"
      }
    },
    "resume" : {
      "loginTokens" : [
        {
          "token" : "BMHipQqjfLoPz7gru",
          "when" : 1365649830922
        }
      ]
    }
  },
  "username" : "tmeasday"
}
~~~
<%= caption "Mongo console" %>

一方で、ブラウザーでユーザーオブジェクトはかなり少なくなっています。
同じコマンドを入力して見ることができます。

~~~js
❯ Meteor.users.findOne();
Object {_id: "kYdBd9hr3fWPGPcii", username: "tmeasday"}
~~~
<%= caption "Browser console" %>

この例では、ローカルのコレクションが実際のデータベースでどのようにしてセキュアなサブセットになるのかを表しています。
ログインユーザーはサインインをするためには十分な実際のデータベースだけを見ています。
これは今後見ていくことを学ぶ上で役に立つパターンです、　

これはあなたがさらにユーザーデータをパブリック（？？？）にできないという意味ではありません。
 Meteor.users コレクション内で、どのようにしてフィールドを選択してパブリッシュするのかを見るのかを見る場合は、Meteor docs を参照しましょう。