forked from DiscoverMeteor/DiscoverMeteor_fr
-
Notifications
You must be signed in to change notification settings - Fork 0
/
06-adding-users.md.erb
172 lines (131 loc) · 8.6 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
170
171
172
---
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 responsive aux changements des 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 c'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 a 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 `mrt add accounts-ui`) mais comme nous avons développé toute notre application avec Bootstrap, nous utiliserons le paquet `accounts-ui-bootstrap-dropdown` à la place (ne vous inquiétez pas, la seule différence est le style). En ligne de commande, nous tapons:
~~~bash
$ mrt add accounts-ui-bootstrap-dropdown
$ mrt add accounts-password
~~~
<%= caption "Terminal" %>
Ces deux commandes nous donnent accès aux templates spéciaux des comptes; nous pouvons les inclure dans notre site en utilisant le helper `{{> loginButtons}}`. Une astuce: vous pouvez controler 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/views/includes/`). Nous utilisons également des balises externes et des classes Bootstrap pour nous assurer que tout semble beau:
~~~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" %>
Maintenant, quand nous naviguons dans notre application, nous voyons les boutons d'authentificationen 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`, Meteora créé une nouvelle collection spéciale, laquelle peut être accéder 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 object 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. Il devrait 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 eulement un objet utilisateurpar 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.findOne()
{
"createdAt" : 1365649830922,
"_id" : "kYdBd9hr3fWPGPcii",
"services" : {
"password" : {
"srp" : {
"identity" : "qyFCnw4MmRbmGyBdN",
"salt" : "YcBjRa7ArXn5tdCdE",
"verifier" : "df2c001edadf4e475e703fa8cd093abd4b63afccbca48fad1d2a0986ff2bcfba920d3f122d358c4af0c287f8eaf9690a2c7e376d701ab2fe1acd53a5bc3e843905d5dcaf2f1c47c25bf5dd87764d1f58c8c01e4539872a9765d2b27c700dcdedadf5ac82521467356d3f91dbeaf9848158987c6d359c5423e6b9cabf34fa0b45"
}
},
"resume" : {
"loginTokens" : [
{
"token" : "BMHipQqjfLoPz7gru",
"when" : 1365649830922
}
]
}
},
"username" : "tmeasday"
}
~~~
<%= 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 publique des données utilisateur si vous le souhaitez. Vous pouvez vous référer à la [Documentation Meteor](http://docs.meteor.com/#meteor_users) comment vous pouvez publier plus de champs dans la collection `Meteor.users`.