盡管我們的界面是根據(jù)變化的數(shù)據(jù)進(jìn)行即時(shí)響應(yīng)的，并且數(shù)據(jù)的實(shí)時(shí)插入或更改的都會(huì)在界面上得到體現(xiàn)。然而，我們的網(wǎng)站似乎還沒有提供用戶去修改數(shù)據(jù)的頁面。實(shí)際上，我們甚至連用戶都還沒有！

下面讓我們看看如何去解決這個(gè)問題吧。

賬戶：讓用戶變得簡單

在大多數(shù)的 web 框架，添加用戶帳戶是一個(gè)熟悉而又麻煩的工作。然而，你所做的每一個(gè)項(xiàng)目幾乎都要用到，但它都不曾讓我們覺得簡單過。甚至如果當(dāng)你要處理開放授權(quán)（OAuth）或其他第三方身份驗(yàn)證的時(shí)候，這些工作往往會(huì)變得更加惡心和復(fù)雜。

幸運(yùn)的是， Meteor 可以幫你輕松解決。由于 Meteor 包的代碼可以同時(shí)運(yùn)行在服務(wù)器（JavaScript）和客戶端（JavaScript、HTML 和 CSS），這樣我們就可以很輕松地得到一個(gè)賬戶系統(tǒng)。

我們可以使用 Meteor 內(nèi)置的賬戶界面（通過 meteor add accounts-ui ），但是由于我們已經(jīng)在構(gòu)建 App 的時(shí)候用了 Bootstrap 包，所以我們將使用 accounts-ui-bootstrap-3 包去代替（別擔(dān)心，唯一的區(qū)別只是里面的樣式不同）。我們在終端輸入：

meteor add ian:accounts-ui-bootstrap-3
meteor add accounts-password

這兩個(gè)命令的作用是把一些特別的賬戶模板提供到我們的項(xiàng)目，然后就可以通過 {{loginButtons}} helper 在我們的網(wǎng)站中使用。溫馨提示：你可以去控制登錄框下拉菜單的對齊方向，通過添加其 align 屬性（例如：{{loginButtons align="right"}}）。

我們將按鈕添加到我們的頭部（header）模板。這樣頭部包含的內(nèi)容將會(huì)越來越多了，下面我們?yōu)樗v出更多的空間吧（我們將把它放在 client/templates/includes/ ）。同時(shí)我們使用一些額外的標(biāo)記和 class 請參考 Bootstrap 來使界面更好看：

<template name="layout">
  <div class="container">
    {{> header}}
    <div id="main" class="row-fluid">
      {{> yield}}
    </div>
  </div>
</template>

<template name="header">
  <nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="{{pathFor 'postsList'}}">Microscope</a>
      </div>
      <div class="collapse navbar-collapse" id="navigation">
        <ul class="nav navbar-nav navbar-right">
          {{> loginButtons}}
        </ul>
      </div>
    </div>
  </nav>
</template>

現(xiàn)在，去瀏覽我們的 App，我們會(huì)看到賬戶登錄的按鈕出現(xiàn)在網(wǎng)站的右上角。

http://wiki.jikexueyuan.com/project/discover-meteor/images/6-1.png" alt="" />Meteor 內(nèi)置的賬戶界面

這樣我們就可以用它來注冊，登錄，改變密碼，它擁有和其他所有網(wǎng)站一樣的賬戶系統(tǒng)功能。

如何告訴我們的賬戶系統(tǒng)要求用戶需要通過用戶名密碼來登錄？只需配置一個(gè) Accounts.ui 模塊到一個(gè)名叫 config.js 的文件里面，并把文件放在 client/helpers/ 中：

Accounts.ui.config({
  passwordSignupFields: 'USERNAME_ONLY'
});

添加賬戶和它的模板到頭（header）模板

創(chuàng)建我們的第一個(gè)用戶

接下來去注冊一個(gè)帳戶：然后“登錄”按鈕會(huì)變成顯示你的用戶名。這說明了一個(gè)用戶帳戶已經(jīng)創(chuàng)建成功。但是，用戶帳戶的數(shù)據(jù)來自哪里呢？

在添加 accounts 包以后， Meteor 已經(jīng)創(chuàng)造了一個(gè)新的集合，它可以通過 Meteor.users 去訪問。為了驗(yàn)證它，打開你的瀏覽器控制臺并輸入：

? Meteor.users.findOne();

瀏覽器控制臺（Browser console）

控制臺應(yīng)該會(huì)返回一個(gè)用戶對象，如果你仔細(xì)看看，可以找到你的用戶名，以及唯一標(biāo)識你賬號的 _id 。注意，你還可以通過 Meteor.user() 獲得當(dāng)前登錄的用戶。

現(xiàn)在我們注銷并再次注冊一個(gè)不同的用戶名。 Meteor.user() 現(xiàn)在應(yīng)該返回第二個(gè)注冊的用戶。但是等一等，我們看看先運(yùn)行：

? Meteor.users.find().count();
1

瀏覽器控制臺（Browser console）

控制臺返回的是1？難道不是2嗎？第一個(gè)用戶被刪除了嗎？如果你再次登錄第一個(gè)用戶，你會(huì)發(fā)現(xiàn)并沒有被刪除。

讓我們?nèi)?Mongo 數(shù)據(jù)庫里面查查看吧。進(jìn)入 Mongo 數(shù)據(jù)庫（在終端輸入 meteor mongo ）輸入以下代碼：

> db.users.count()
2

確定是存在兩個(gè)用戶。可是剛剛為什么我們在瀏覽器中只看到一個(gè)呢？

發(fā)布的謎團(tuán)!

如果你回想起第4章，可能還記得我們移除了 autopublish 包，我們阻止了集合從服務(wù)器自動(dòng)發(fā)送所有數(shù)據(jù)到每個(gè)訪問的客戶端。然后我們創(chuàng)建了發(fā)布和訂閱方法來實(shí)現(xiàn)數(shù)據(jù)的傳輸。

但我們并沒有設(shè)置過任何用戶的發(fā)布方法。那為什么我們還可以看到用戶的數(shù)據(jù)呢？

答案就是賬戶包確實(shí)“自動(dòng)發(fā)布”了當(dāng)前登錄用戶的基本賬戶信息。如果沒有的話，該用戶是無法登錄到網(wǎng)站的！

不過賬戶包只發(fā)布了當(dāng)前登錄的用戶。這就解釋了為什么一個(gè)用戶看不到另一個(gè)帳戶的詳細(xì)信息了。

所以發(fā)布的只是當(dāng)前登錄用戶的用戶對象（而且當(dāng)你注銷之后就沒有了）。

更重要的是，我們用戶的集合似乎在服務(wù)器和客戶端中并不是包含完全相同的字段。在 Mongo 數(shù)據(jù)庫中，用戶擁有大量的數(shù)據(jù)。為了檢驗(yàn)一下，回到你的 Mongo 終端并輸入：

> db.users.find()
{
  "_id": "H5kKyxtbkLhmPgtqs",
  "createdAt": ISODate("2015-02-10T08:26:48.196Z"),
  "profile": {},
  "services": {
    "password": {
      "bcrypt": "$2a$10$yGPywo3/53IHsdffdwe766roZviT03YBGltJ0UG"
    },
    "resume": {
      "loginTokens": [{
        "when": ISODate("2015-02-10T08:26:48.203Z"),
        "hashedToken": "npxGH7Rmkuxcv098wzz+qR0/jHl0EAGWr0D9ZpOw="
      }]
    }
  },
  "username": "sacha"
}

但是在瀏覽器中，用戶對象的字段就比較少了，可以通過輸入這樣的命令看到：

? Meteor.users.findOne();
Object {_id: "kYdBd9hr3fWPGPcii", username: "tmeasday"}

這個(gè)例子向我們展示了本地集合是如何成為一個(gè)安全的數(shù)據(jù)庫數(shù)據(jù)子集。登錄用戶只能看到那些足夠去配合客戶端工作（例如：登陸）的集合屬性。以后你會(huì)知道這是一個(gè)非常值得學(xué)習(xí)的模式。

但這并不意味著你就不能把更多的用戶數(shù)據(jù)發(fā)布出來。你可以參考 Meteor 說明文檔，看看 Meteor.users 集合是如何選擇性地發(fā)布更多的字段。