forked from DiscoverMeteor/DiscoverMeteor_uk
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path06-adding-users.md.erb
170 lines (128 loc) · 11.9 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 реагує на зміну даних і вставленні або зміненні дані з’являються миттєво. Але як і раніше наш сайт кульгавить в тому сенсі, що немає як вводити дані. Насправді, ще навіть користувачів немає!
Подивимося як це можна виправити.
### Аккаунти: користувачі - це легко
В більшості веб-фреймворків додавання аккаунтів користувачів - це розповсюджена проблема. Напевне вам це необхідно робити майже в кожному проекте, але від цього задача не стає простішою. Що гірше - як тільки вам стає необхідно мати справу з 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 "Terminal" %>
Ці дві команди створюють спеціальні шаблони аккаунтів доступні для нас; ми можемо включати їх в наш сайт за допомогою `{{> 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 "3~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 для інтерфейсу аккаунтів" %>
Ми можемо їх використовувати для реєстрації, логіну, запиту про зміну паролю і всього іншого, що звичайно необхідно для простого сайту і аккаунтах, що базуються на паролях.
Щоб система аккаунтів авторизувала користувачів через ім’я користувача, додамо `Accounts.ui` конфігураційний блок в новий `config.js` файл всередині `client/helpers/`:
~~~js
Accounts.ui.config({
passwordSignupFields: 'USERNAME_ONLY'
});
~~~
<%= caption "client/helpers/config.js" %>
<%= commit "6-1", "Добавлені аккаунти і добавлений шаблон до хедеру" %>
### Створення першого користувача
Продовжимо і зареєструємо аккаунт: кнопка "Sign in" зміниться і буде показувати ваше ім’я користувача. Це підверджує, що для вас був створенний аккаунт. Але звідки приходять дані аккаунту користувача?
При добавленні пакету `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`, ми зупинили колекції від автоматичного надсилання всіх даних від сервера в кожну з’єднанну колекцію клієнта. Нам необхідно створити пару: публікацію і підписку для з’єднання даних.
Ми ще не вставновлювали ніяких типів користувацьких публікацій. Так яким же чином ми зможемо побачити будь-які дані користувача взагалі?
Відповідь у тому, що пакет аккаунтів насправді робить "автопублікацію" базових деталей аккаунта для авторизованних в данний момент користувачів. Якщо б він це не робив, то користувач не зміг би зайти в сайт!
Пакет аккаунтів тільки публікує *поточного* користувача. Це пояснює чому один користувач не може бачити деталі іншого користувача.
Тож публікація є лише опублікування одного користувацького об’єкту для кожного авторизованого користувача (і нічого, якщо ви не залогінились).
Що більше, не схоже, щоб документи в нашій користувацькій колекції містили однакові поля на сервері і на клієнті. В 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`.