-
Notifications
You must be signed in to change notification settings - Fork 39
/
06-adding-users.md.erb
170 lines (128 loc) · 12.3 KB
/
06-adding-users.md.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
---
title: Добавление пользователей
slug: adding-users
date: 0006/01/01
number: 6
contents: Узнаете про учетные записи пользователей в Meteor.|Добавите авторизацию пользователей для Microscope.|Научитесь пользоваться встроенным пакетом accounts-ui для пользовательского интерфейса.
paragraphs: 27
---
У нас получилось создать и вывести статичные данные, а также связать все в простое приложение.
Мы даже увидели как наш UI отражает любое изменение данных, и как новые или измененные данные мгновенно появляются в UI. Не смотря на это наш сайт все еще хромает - мы не можем вводить данные. У нас даже полностью отсутствует такое понятие как пользователи!
Что же делать?
### Аккаунты для пользователей - легко!
В большинстве сред веб разработки добавление пользовательских аккаунтов это нетривиальная задача. Почти каждое веб приложение предполагает наличие пользователей, но не смотря на это добавление подобной функциональности вовсе не так просто. Еще хуже - как только вам приходится иметь дело с OAuth или любым другим протоколом авторизации, вещи быстро выходят из под контроля.
К счастью, Meteor позаботился и об этом. Благодаря тому, что пакеты Meteor могут иметь один и тот же код на сервере (Javascript) и клиенте (Javascript, HTML и CSS), мы получаем систему пользовательских аккаунтов почти даром.
Мы могли бы использовать стандартный компонент Meteor для аккаунтов (добавив его с помощью `meteor add accounts-ui`), но так как мы начали пользовать Bootstrap в нашем приложении, мы подключим пакет `accounts-ui-bootstrap-dropdown`. Не волнуйтесь, единственная разница между этими двумя пакетами это стили внешнего вида. Откройте командную строку и вызовите:
~~~bash
$ meteor add mrt:accounts-ui-bootstrap-dropdown
$ meteor add accounts-password
~~~
<%= caption "Терминал" %>
Эти две команды дают нам возможность использовать специальные шаблоны аккаунтов. Мы можем подключить их на нашем сайте с помощью хелпера `{{loginButtons}}`. Подсказка: вы можете контролировать с какой стороны появится выпадающее меню авторизации пользователя с помощью атрибута `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" %>
Теперь, если открыть наше приложение в браузере, можно заметить кнопки `Login` в верхнем правом углу сайта.
<%= screenshot "6-1", "Пользовательские аккаунты Meteor" %>
Все базовые действия пользователя теперь доступны - можно регистрироваться, авторизироваться, запрашивать смену пароля, и все остальное, что может понадобиться простому сайту с аккаунтами.
Можно указать системе аккаунтов, что пользователи должны авторизироваться при помощи логина, а не почтового адреса. Для этого потребуется добавить блок `Accounts.ui` в новый `config.js` файл в папке `client/helpers/`:
~~~js
Accounts.ui.config({
passwordSignupFields: 'USERNAME_ONLY'
});
~~~
<%= caption "client/helpers/config.js" %>
<%= commit "6-1", "Добавлены аккаунты и шаблон с кнопками" %>
### Создаем первого пользователя
Попробуйте зарегистрироваться с помощью кнопки `Sign up`. После этого надпись на кнопке сменится на ваше имя пользователя. Это означает, что вы успешно зарегистрировались и для вас была создана учетная запись. Но где сохранена эта запись?
Добавив пакет `accounts`, Meteor создал специальную коллекцию `Meteor.users`. Чтобы ее просмотреть, откройте консоль браузера и введите:
~~~js
❯ Meteor.users.findOne();
~~~
<%= caption "Консоль браузера" %>
Консоль должна вернуть объект, указывающий на объект вашего пользователя. Обратите внимание, там будет ваше имя пользователя, а также уникальный идентификатор `_id`. Вы можете также получить текущего пользователя с помощью команды `Meteor.user()`.
Теперь выйдите и зайдите как другой пользователь. `Meteor.user()` вернет второго пользователя. Попробуем посчитать, сколько у нас пользователей всего:
~~~js
❯ Meteor.users.find().count();
1
~~~
<%= caption "Консоль браузера" %>
Консоль вернет нам 1. Разве их не должно быть 2? Неужели первый пользователь был удален? Если вы попробуете залогиниться как первый пользователь, вы заметите что все на месте.
Давайте посмотрим, что происходит в главной базе данных Mongo. Запустите терминал Mongo командой `meteor mongo`, и посчитайте количество пользователей:
~~~bash
> db.users.count()
2
~~~
<%= caption "Консоль Mongo" %>
Оба пользователя присутствуют. Тогда почему мы видим только одного пользователя в консоли браузера?
### Мистическая публикация!
Если вы помните, в главе 4 мы отключили параметр `autopublish`, и тем самым коллекции перестали автоматически синхронизировать данные между сервером и локальными версиями коллекций. Чтобы образовался канал данных, нам надо было создать публикацию и подписку на нее.
Но мы не создавали ничего подобного для публикации новых пользователей. Каким же образом пользователям удается зарегистрироваться?
Оказывается пакет пользовательских аккаунтов содержит в себе опцию `auto-publish` - данные текущего пользователя передаются на сервер не смотря ни на что. Если бы этого не происходило, пользователь не смог бы авторизироваться на сайте.
Обратите внимание - пакет аккаунтов публикует только данные *текущего* пользователя. Это объясняет, почему пользователь не может увидеть данные других пользователей.
Данные пользователя публикуются только когда он авторизирован, и только одного пользователя на одну авторизацию. Когда ни один пользователь не залогинен, ничего не публикуется.
Вдобавок, документы нашего пользователя в коллекции содержат разные данные на сервере и клиенте. В Mongo у пользователя гораздо больше данных. Чтобы их просмотреть, вернитесь в терминал 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 консоль" %>
Если же вы посмотрите на объект пользователя в браузере, вы заметите что он содержит гораздо меньше данных:
~~~js
❯ Meteor.users.findOne();
Object {_id: "kYdBd9hr3fWPGPcii", username: "tmeasday"}
~~~
<%= caption "Консоль браузера" %>
Этот пример наглядно демонстрирует как локальная коллекция может быть *безопасной версией* настоящей базы данных. Авторизированный пользователь видит ровно столько информации, сколько необходимо - в данном случае, для логина. Это очень полезный подход, как вы еще увидите в будущем.
Это вовсе не означает что вы не можете сделать больше пользовательских данных публичными. Стоит обратить внимание на [документацию Meteor](http://docs.meteor.com/#meteor_users) чтобы узнать, как опубликовать больше полей из коллекции `Meteor.users`.