-
Notifications
You must be signed in to change notification settings - Fork 33
/
06-adding-users.md.erb
168 lines (127 loc) · 8.55 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
---
title: Ajouter des Utilisateurs
slug: adding-users
date: 0006/01/01
number: 6
points: 5
photoUrl: http://www.flickr.com/photos/kroqert/9687074783/
photoAuthor: Bård Harald Krogen
contents: Les comptes utilisateur dans Meteor.|Ajouter l'authentification dont on a besoin pour Microscope.|Utiliser les paquets accounts-ui natifs pour obtenir une interface utilisateur instantanément.
paragraphs: 27
---
Depuis le début, nous avons appris à créer et afficher des données statiques brutes dans un style particulier et on a tout intégré dans un prototype simple.
Nous avons même vu comment notre UI est réactive aux changements de données, et les données insérées ou modifiées apparaissent immédiatement. Par contre, notre site est paralysé par le fait que nous ne pouvons pas insérer de données. En fait, nous n'avons même pas encore d'utilisateurs !
Voyons comment corriger ça.
### Comptes: création d'utilisateurs faciles
Dans la plupart des frameworks web, ajouter des comptes utilisateurs est une fonctionnalité classique. Bien sur, vous devez faire ça dans presque tous les projets, mais ce n'est jamais aussi simple que ça le devrait. De plus, dès que vous devez interagir avec OAuth ou un systèmes d'authentification tiers, les choses ont tendance à se compliquer.
Heureusement, Meteor a tout prévu. Grâce à la façon dont les paquets Meteor peuvent contribuer au code côté serveur (JavaScript) et côté client (JavaScript, HTML et CSS), nous pouvons bénéficier d'un système de compte presque sans effort.
Nous pourrions simplement utiliser l'UI intégrée de Meteor pour les comptes (avec `meteor add accounts-ui`) mais comme nous avons développé toute notre application avec Bootstrap, nous utiliserons le paquet `ian:accounts-ui-bootstrap-3` à la place (ne vous inquiétez pas, la seule différence est le style). En ligne de commande, nous tapons :
~~~bash
meteor add ian:accounts-ui-bootstrap-3
meteor add accounts-password
~~~
<%= caption "Terminal" %>
Ces deux commandes nous donnent accès aux templates spéciaux des comptes, et nous pouvons les inclure dans notre site en utilisant le helper `{{> loginButtons}}`. Une astuce: vous pouvez contrôler de quel côté s'affiche la fenêtre d'authentification en utilisant l'attribut `align` (par exemple `{{> loginButtons align="right"}}`).
Nous ajouterons les boutons à notre en-tête. Et comme cet en-tête commence à grossir donnons lui un peu de place avec son propre template (nous le mettrons dans `client/templates/includes/`). Nous utilisons également des balises externes et des classes [spécifiées par Bootstrap](http://getbootstrap.com/components/#navbar) pour nous assurer que tout soit beau :
~~~html
<template name="layout">
<div class="container">
{{>header}}
<div id="main">
{{> yield}}
</div>
</div>
</template>
~~~
<%= caption "client/templates/application/layout.html" %>
<%= highlight "3~6" %>
~~~html
<template name="header">
<nav class="navbar navbar-default" role="navigation">
<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>
</nav>
</template>
~~~
<%= caption "client/templates/includes/header.html" %>
Maintenant, quand nous naviguons dans notre application, nous voyons les boutons d'authentification en haut à droite dans le coin du site.
<%= screenshot "6-1", "Interface intégrée des comptes utilisateur de Meteor" %>
On peut utiliser ça pour s'enregistrer, s'authentifier, changer son mot de passe, et tout ce qu'un simple site comportant des comptes utilisateur a besoin.
Pour indiquer au système de compte que nous voulons que les utilisateurs s'authentifient avec un nom d'utilisateur, nous ajoutons simplement un bloc de configuration `Accounts.ui` dans un nouveau fichier `config.js` à l'intérieur de `client/helpers/` :
~~~js
Accounts.ui.config({
passwordSignupFields: 'USERNAME_ONLY'
});
~~~
<%= caption "client/helpers/config.js" %>
<%= commit "6-1", "Comptes ajoutés et template intégré à l'en-tête" %>
### Création de notre premier utilisateur
Enregistrez un compte : le bouton "Sign In" changera pour afficher votre nom d'utilisateur. Ça confirme que le compte utilisateur a bien été créé pour vous. Mais d'où viennent les données de ce compte ?
En ajoutant le paquet `accounts`, Meteor a créé une nouvelle collection spéciale, laquelle peut être accédée avec `Meteor.users()`. Pour la voir, ouvrez la console de votre navigateur et tapez :
~~~js
❯ Meteor.users.findOne();
~~~
<%= caption "Console du navigateur" %>
La console retournera un objet correspondant à votre objet utilisateur. Si vous regardez de plus près, vous pouvez voir que votre nom d'utilisateur est dedans, avec un `_id` unique qui vous identifie. Notez que vous pouvez également récupérer l'utilisateur actuellement connecté avec `Meteor.user()`.
Maintenant déconnectez-vous et enregistrez-vous avec un compte utilisateur différent. `Meteor.user()` devrait retourner un second utilisateur. Mais attendez, exécutons :
~~~js
❯ Meteor.users.find().count();
1
~~~
<%= caption "Console du navigateur" %>
La console retourne 1. Ne devrait-il pas y en avoir 2 ? Le premier utilisateur a-t-il été supprimé ? SI vous essayez de vous authentifier avec le premier utilisateur, vous verrez que ce n'est pas le cas.
Assurons nous-en et vérifions dans la zone de stockage des données canonique, la base de données Mongo. On se connectera à Mongo (`meteor mongo` dans votre terminal) et on vérifiera :
~~~bash
> db.users.count()
2
~~~
<%= caption "Console Mongo" %>
Il y a bien deux utilisateurs. Donc pourquoi ne pouvons-nous en voir qu'un dans le navigateur ?
### Une publication mystère !
Si vous repensez au chapitre 4, vous pouvez vous souvenir qu'on a supprimé `autopublish`, nous avons arrêté l'envoi des données des collections du serveur vers chaque version local de collection des clients connectés. Nous avions besoin de créer un couple publication / souscription afin de faire transiter les données.
Mais nous n'avons pas encore établi de publication utilisateur. Donc d'où vient que nous pouvons quand même voir une donnée utilisateur ?
La réponse est que le paquet comptes *auto-publie* les détails de base du compte de l'utilisateur actuellement authentifié. S'il ne le faisait pas, l'utilisateur ne pourrait pas s'authentifier sur le site !
Le paquet comptes publie seulement l'utilisateur courant. Ceci explique pourquoi un utilisateur ne peut voir les détails d'un autre compte.
La publication publie donc seulement un objet utilisateur par utilisateur authentifié (et aucun si vous n'êtes pas authentifié).
De plus, les documents ne semblent pas avoir les mêmes champs sur le serveur et sur le client. Dans Mongo, un utilisateur a beaucoup de données. Pour les voir, retournez sur votre terminal Mongo et tapez :
~~~bash
> 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"
}
~~~
<%= caption "Console Mongo" %>
Et de l'autre côté, dans le navigateur l'objet utilisateur est bien moins rempli, comme vous pouvez le voir en tapant la commande équivalente :
~~~js
❯ Meteor.users.findOne();
Object {_id: "kYdBd9hr3fWPGPcii", username: "tmeasday"}
~~~
<%= caption "Console du navigateur" %>
Cet exemple nous montre comment une collection local peut être un *sous-ensemble sécurisée* de la vrai base de données. L'utilisateur authentifié voit seulement les informations nécessaires à son bon fonctionnement (dans ce cas, l'authentification). C'est un cas utile pour apprendre, vous vous en apercevrez plus tard.
Ça ne veut pas dire que vous ne pourrez rendre publiques des données utilisateur si vous le souhaitez. Vous pouvez vous référer à la [Documentation Meteor](http://docs.meteor.com/#meteor_users) pour savoir comment vous pouvez publier plus de champs dans la collection `Meteor.users`.