Добавление пользователей

6

На данный момент переведено

В этой главе вы:

  • Узнаете про учетные записи пользователей в Meteor.
  • Добавите авторизацию пользователей для Microscope.
  • Научитесь пользоваться встроенным пакетом accounts-ui для пользовательского интерфейса.
  • У нас получилось создать и вывести статичные данные, а также связать все в простое приложение.

    Мы даже увидели как наш UI отражает любое изменение данных, и как новые или измененные данные мгновенно появляются в UI. Не смотря на это наш сайт все еще хромает - мы не можем вводить данные. У нас даже полностью отсутствует такое понятие как пользователи!

    Что же делать?

    Аккаунты для пользователей - легко!

    В большинстве сред веб разработки добавление пользовательских аккаунтов это нетривиальная задача. Почти каждое веб приложение предполагает наличие пользователей, но не смотря на это добавление подобной функциональности вовсе не так просто. Еще хуже - как только вам приходится иметь дело с OAuth или любым другим протоколом авторизации, вещи быстро выходят из под контроля.

    К счастью, Meteor позаботился и об этом. Благодаря тому, что пакеты Meteor могут иметь один и тот же код на сервере (Javascript) и клиенте (Javascript, HTML и CSS), мы получаем систему пользовательских аккаунтов почти даром.

    Мы могли бы использовать стандартный компонент Meteor для аккаунтов (добавив его с помощью meteor add accounts-ui), но так как мы начали пользовать Bootstrap в нашем приложении, мы подключим пакет accounts-ui-bootstrap-dropdown. Не волнуйтесь, единственная разница между этими двумя пакетами это стили внешнего вида. Откройте командную строку и вызовите:

    $ meteor add mrt:accounts-ui-bootstrap-dropdown
    $ meteor add accounts-password
    
    Терминал

    Эти две команды дают нам возможность использовать специальные шаблоны аккаунтов. Мы можем подключить их на нашем сайте с помощью хелпера {{loginButtons}}. Подсказка: вы можете контролировать с какой стороны появится выпадающее меню авторизации пользователя с помощью атрибута align. Например: {{loginButtons align="right"}}

    Добавим кнопки в заголовок страницы. Так как содержимое заголовка растет, вынесем его в отдельный шаблон в папке client/views/includes/. Мы также добавим тегов и классов из Bootstrap, чтобы все выглядело красиво:

    <template name="layout">
      <div class="container">
        {{>header}}
        <div id="main" class="row-fluid">
          {{>yield}}
        </div>
      </div>
    </template>
    
    client/views/application/layout.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>
    
    client/views/includes/header.html

    Теперь, если открыть наше приложение в браузере, можно заметить кнопки Login в верхнем правом углу сайта.

    Пользовательские аккаунты Meteor
    Пользовательские аккаунты Meteor

    Все базовые действия пользователя теперь доступны - можно регистрироваться, авторизироваться, запрашивать смену пароля, и все остальное, что может понадобиться простому сайту с аккаунтами.

    Можно указать системе аккаунтов, что пользователи должны авторизироваться при помощи логина, а не почтового адреса. Для этого потребуется добавить блок Accounts.ui в новый config.js файл в папке client/helpers/:

    Accounts.ui.config({
      passwordSignupFields: 'USERNAME_ONLY'
    });
    
    client/helpers/config.js

    Коммит 6-1

    Добавлены аккаунты и шаблон с кнопками

    Создаем первого пользователя

    Попробуйте зарегистрироваться с помощью кнопки Sign up. После этого надпись на кнопке сменится на ваше имя пользователя. Это означает, что вы успешно зарегистрировались и для вас была создана учетная запись. Но где сохранена эта запись?

    Добавив пакет accounts, Meteor создал специальную коллекцию Meteor.users. Чтобы ее просмотреть, откройте консоль браузера и введите:

     Meteor.users.findOne();
    
    Консоль браузера

    Консоль должна вернуть объект, указывающий на объект вашего пользователя. Обратите внимание, там будет ваше имя пользователя, а также уникальный идентификатор _id. Вы можете также получить текущего пользователя с помощью команды Meteor.user().

    Теперь выйдите и зайдите как другой пользователь. Meteor.user() вернет второго пользователя. Попробуем посчитать, сколько у нас пользователей всего:

     Meteor.users.find().count();
    1
    
    Консоль браузера

    Консоль вернет нам 1. Разве их не должно быть 2? Неужели первый пользователь был удален? Если вы попробуете залогиниться как первый пользователь, вы заметите что все на месте.

    Давайте посмотрим, что происходит в главной базе данных Mongo. Запустите терминал Mongo командой meteor mongo, и посчитайте количество пользователей:

    > db.users.count()
    2
    
    Консоль Mongo

    Оба пользователя присутствуют. Тогда почему мы видим только одного пользователя в консоли браузера?

    Мистическая публикация!

    Если вы помните, в главе 4 мы отключили параметр autopublish, и тем самым коллекции перестали автоматически синхронизировать данные между сервером и локальными версиями коллекций. Чтобы образовался канал данных, нам надо было создать публикацию и подписку на нее.

    Но мы не создавали ничего подобного для публикации новых пользователей. Каким же образом пользователям удается зарегистрироваться?

    Оказывается пакет пользовательских аккаунтов содержит в себе опцию auto-publish - данные текущего пользователя передаются на сервер не смотря ни на что. Если бы этого не происходило, пользователь не смог бы авторизироваться на сайте.

    Обратите внимание - пакет аккаунтов публикует только данные текущего пользователя. Это объясняет, почему пользователь не может увидеть данные других пользователей.

    Данные пользователя публикуются только когда он авторизирован, и только одного пользователя на одну авторизацию. Когда ни один пользователь не залогинен, ничего не публикуется.

    Вдобавок, документы нашего пользователя в коллекции содержат разные данные на сервере и клиенте. В Mongo у пользователя гораздо больше данных. Чтобы их просмотреть, вернитесь в терминал Mongo и запустите команду:

    > db.users.findOne()
    {
      "createdAt" : 1365649830922,
      "_id" : "kYdBd9hr3fWPGPcii",
      "services" : {
        "password" : {
          "srp" : {
            "identity" : "qyFCnw4MmRbmGyBdN",
            "salt" : "YcBjRa7ArXn5tdCdE",
            "verifier" : "df2c001edadf4e475e703fa8cd093abd4b63afccbca48fad1d2a0986ff2bcfba920d3f122d358c4af0c287f8eaf9690a2c7e376d701ab2fe1acd53a5bc3e843905d5dcaf2f1c47c25bf5dd87764d1f58c8c01e4539872a9765d2b27c700dcdedadf5ac82521467356d3f91dbeaf9848158987c6d359c5423e6b9cabf34fa0b45"
          }
        },
        "resume" : {
          "loginTokens" : [
            {
              "token" : "BMHipQqjfLoPz7gru",
              "when" : 1365649830922
            }
          ]
        }
      },
      "username" : "tmeasday"
    }
    
    Mongo консоль

    Если же вы посмотрите на объект пользователя в браузере, вы заметите что он содержит гораздо меньше данных:

     Meteor.users.findOne();
    Object {_id: "kYdBd9hr3fWPGPcii", username: "tmeasday"}
    
    Консоль браузера

    Этот пример наглядно демонстрирует как локальная коллекция может быть безопасной версией настоящей базы данных. Авторизированный пользователь видит ровно столько информации, сколько необходимо - в данном случае, для логина. Это очень полезный подход, как вы еще увидите в будущем.

    Это вовсе не означает что вы не можете сделать больше пользовательских данных публичными. Стоит обратить внимание на документацию Meteor чтобы узнать, как опубликовать больше полей из коллекции Meteor.users.