1
00:00:01,160 --> 00:00:04,610
‫- : Il est enfin temps d'utiliser l'API de connexion que

2
00:00:04,610 --> 00:00:06,830
‫nous avons construite dans les sections

3
00:00:06,830 --> 00:00:09,100
‫précédentes et il y a une tonne de

4
00:00:09,100 --> 00:00:12,880
‫choses à faire ici afin de faire interagir le front-end avec le back-end.

5
00:00:12,880 --> 00:00:15,680
‫Et donc nous faisons cela dans des conférences séparées.

6
00:00:15,680 --> 00:00:17,833
‫Quoi qu'il en soit, commençons maintenant.

7
00:00:19,740 --> 00:00:21,570
‫Et c'est comme ça que ça va fonctionner.

8
00:00:21,570 --> 00:00:25,180
‫Donc, nous allons permettre aux utilisateurs de se connecter à

9
00:00:25,180 --> 00:00:28,990
‫notre site Web en faisant une requête HTTP, ou un appel ATEX

10
00:00:28,990 --> 00:00:31,580
‫comme beaucoup de gens aiment l'appeler aussi.

11
00:00:31,580 --> 00:00:35,890
‫Et nous faisons cette requête HTTP au point de terminaison de l'API de connexion

12
00:00:35,890 --> 00:00:38,340
‫que nous avons implémenté avant d'utiliser les

13
00:00:38,340 --> 00:00:41,820
‫données que l'utilisateur fournit sous cette forme que nous avons ici.

14
00:00:41,820 --> 00:00:45,614
‫Alors, n'oubliez pas que notre API renverra alors un

15
00:00:45,614 --> 00:00:49,010
‫cookie qui sera automatiquement stocké dans le navigateur.

16
00:00:49,010 --> 00:00:51,650
‫Et est également automatiquement renvoyé

17
00:00:51,650 --> 00:00:53,990
‫à chaque demande ultérieure.

18
00:00:53,990 --> 00:00:56,950
‫Et comme vous le verrez, c'est une

19
00:00:56,950 --> 00:01:00,040
‫clé fondamentale pour faire fonctionner notre système d'authentification.

20
00:01:00,040 --> 00:01:01,940
‫Mais de toute façon,

21
00:01:01,940 --> 00:01:04,518
‫puisque nous effectuons cette requête HTTP

22
00:01:04,518 --> 00:01:09,220
‫dans le navigateur, nous travaillerons bien sûr à nouveau du côté client.

23
00:01:09,220 --> 00:01:10,900
‫Mais de toute façon, puisque

24
00:01:10,900 --> 00:01:13,570
‫nous effectuons une requête HTTP dans le navigateur, nous

25
00:01:13,570 --> 00:01:17,010
‫continuerons à travailler sur le code du script des tâches côté client.

26
00:01:17,010 --> 00:01:20,410
‫Donc, tout comme nous l'avons fait avec l'implémentation de Mapbox.

27
00:01:20,410 --> 00:01:21,570
‫Bien?

28
00:01:21,570 --> 00:01:24,430
‫Alors allons-y maintenant et créons un nouveau fichier ici.

29
00:01:24,430 --> 00:01:29,063
‫Et donc c'est en public, js et nouveau fichier, que je

30
00:01:30,190 --> 00:01:33,030
‫vais appeler login. js et dans

31
00:01:33,960 --> 00:01:36,380
‫la vidéo suivante, nous allons en fait

32
00:01:36,380 --> 00:01:38,260
‫regrouper tous ces fichiers JavaScript

33
00:01:38,260 --> 00:01:40,630
‫séparés que nous créons ici pour le

34
00:01:40,630 --> 00:01:42,970
‫front-end en un seul gros paquet.

35
00:01:42,970 --> 00:01:43,820
‫Bien?

36
00:01:43,820 --> 00:01:47,240
‫Mais pour l'instant, concentrons-nous uniquement sur le fonctionnement

37
00:01:47,240 --> 00:01:49,510
‫de cette fonctionnalité de connexion.

38
00:01:49,510 --> 00:01:52,820
‫Mais de toute façon, commençons maintenant par ajouter un écouteur

39
00:01:52,820 --> 00:01:57,139
‫d'événement, à l'écoute de l'événement de soumission sur notre formulaire de connexion, d'accord ?

40
00:01:57,139 --> 00:02:01,260
‫Ainsi, notre formulaire de connexion a cette classe de formulaire ici.

41
00:02:01,260 --> 00:02:04,307
‫D'accord, sélectionnons maintenant cet élément

42
00:02:04,307 --> 00:02:07,820
‫pour l'élément, puis écoutons l'événement de soumission.

43
00:02:07,820 --> 00:02:10,430
‫J'espère que vous êtes familier avec ce type de

44
00:02:10,430 --> 00:02:12,510
‫logique dans le JavaScript côté client.

45
00:02:12,510 --> 00:02:14,810
‫Et j'espère que ce n'est pas nouveau pour vous.

46
00:02:15,810 --> 00:02:19,193
‫Alors, documentez-vous. querySelector, que nous utilisons

47
00:02:20,260 --> 00:02:23,063
‫pour sélectionner en fonction de la classe.

48
00:02:24,940 --> 00:02:27,040
‫Ajoutez ensuite ce nom

49
00:02:27,040 --> 00:02:32,040
‫de sélecteur, et ajoutez maintenant EventListener, à l'écoute de l'événement de soumission.

50
00:02:32,940 --> 00:02:35,740
‫Donc, fondamentalement, un événement que le navigateur se

51
00:02:35,740 --> 00:02:39,363
‫déclenchera chaque fois qu'un utilisateur cliquera sur le bouton d'envoi du formulaire.

52
00:02:40,220 --> 00:02:41,810
‫Ajoutez ensuite la fonction

53
00:02:41,810 --> 00:02:46,123
‫de collecte, nous aurons accès à cet événement lui-même, d'accord ?

54
00:02:47,680 --> 00:02:49,500
‫Et donc la troisième chose que nous

55
00:02:49,500 --> 00:02:52,843
‫faisons est de dire événement. prévenirDéfaut.

56
00:02:56,770 --> 00:02:57,750
‫D'accord?

57
00:02:57,750 --> 00:03:01,580
‫Cela empêche donc le formulaire de charger toute autre page.

58
00:03:01,580 --> 00:03:03,925
‫Ensuite, récupérons l'e-mail et la valeur

59
00:03:03,925 --> 00:03:06,740
‫du mot de passe que l'utilisateur a saisis.

60
00:03:06,740 --> 00:03:10,485
‫Et donc ce sont, dans cet élément, avec l'e-mail d'identification et

61
00:03:10,485 --> 00:03:13,310
‫le mot de passe d'identification, d'accord ?

62
00:03:13,310 --> 00:03:15,020
‫Donc, ces deux

63
00:03:15,020 --> 00:03:18,114
‫champs de saisie et obtenons également ces données.

64
00:03:18,114 --> 00:03:21,364
‫(en tapant sur un clavier) Donc

65
00:03:24,933 --> 00:03:26,440
‫document, obtenez l'élément

66
00:03:26,440 --> 00:03:27,933
‫par ID.

67
00:03:29,310 --> 00:03:32,230
‫Email, puis nous utilisons la propriété value

68
00:03:32,230 --> 00:03:34,670
‫afin d'atteindre cette valeur là-bas.

69
00:03:34,670 --> 00:03:37,893
‫Pas nodeValue, juste valeur.

70
00:03:39,520 --> 00:03:42,930
‫Dupliquons cette ligne, d'accord ?

71
00:03:42,930 --> 00:03:45,330
‫Et maintenant, passons à la véritable

72
00:03:45,330 --> 00:03:47,940
‫connexion dans une fonction distincte, d'accord ?

73
00:03:47,940 --> 00:03:49,880
‫Maintenant, nous arrivons ici,

74
00:03:49,880 --> 00:03:53,040
‫cette erreur eslint et c'est encore parce que nous

75
00:03:53,040 --> 00:03:56,450
‫n'avons eslint configuré que pour le code non JS.

76
00:03:56,450 --> 00:03:59,963
‫Et donc désactivons cela comme nous l'avons fait ici.

77
00:04:01,340 --> 00:04:03,233
‫Alors prenez simplement ce morceau de code.

78
00:04:07,790 --> 00:04:08,630
‫Bien?

79
00:04:08,630 --> 00:04:09,910
‫Et maintenant, comme je

80
00:04:09,910 --> 00:04:12,123
‫le disais, créons maintenant cette fonction de connexion.

81
00:04:15,270 --> 00:04:16,370
‫Donc et juste comme

82
00:04:17,380 --> 00:04:19,120
‫ça, et cette fonction va accepter un

83
00:04:19,120 --> 00:04:20,520
‫email et un mot de passe.

84
00:04:24,840 --> 00:04:25,770
‫Et

85
00:04:25,770 --> 00:04:29,080
‫tout d'abord, voyons si ce code fonctionne réellement.

86
00:04:29,080 --> 00:04:30,533
‫Nous allons donc alerter,

87
00:04:31,560 --> 00:04:33,740
‫donc en gros, créez une fenêtre d'alerte.

88
00:04:33,740 --> 00:04:36,563
‫Et avec cet email et mot de passe.

89
00:04:38,910 --> 00:04:39,743
‫Bien?

90
00:04:42,920 --> 00:04:45,710
‫Maintenant, bien sûr, nous devons également appeler à

91
00:04:45,710 --> 00:04:49,300
‫nouveau cette fonction avec un e-mail et un mot de passe.

92
00:04:49,300 --> 00:04:54,300
‫Et enfin, nous devons également inclure ce fichier de connexion

93
00:04:54,600 --> 00:04:58,370
‫dans notre modèle de base, d'accord ?

94
00:04:58,370 --> 00:05:00,600
‫Et encore une fois, comme je le disais

95
00:05:00,600 --> 00:05:02,340
‫au début, dans la vidéo

96
00:05:02,340 --> 00:05:04,640
‫suivante, nous allons regrouper tout ce code frontal

97
00:05:04,640 --> 00:05:06,423
‫ici dans un seul gros fichier JavaScript.

98
00:05:07,820 --> 00:05:08,653
‫Bien?

99
00:05:08,653 --> 00:05:10,810
‫C'est donc bien meilleur pour les

100
00:05:10,810 --> 00:05:14,143
‫performances et c'est aussi une meilleure expérience de développeur pour nous-mêmes.

101
00:05:15,250 --> 00:05:18,330
‫Quoi qu'il en soit, cela devrait maintenant fonctionner.

102
00:05:18,330 --> 00:05:20,093
‫Rechargeons simplement cette page ici.

103
00:05:25,783 --> 00:05:27,620
‫Je dois donc remplir, valider ici, de

104
00:05:27,620 --> 00:05:30,563
‫toute façon, Chrome ne me permettra même pas de soumettre le formulaire.

105
00:05:32,920 --> 00:05:35,100
‫D'accord, donc ici, nous recevons notre alerte avec

106
00:05:35,100 --> 00:05:37,020
‫l'e-mail que nous venons de saisir, puis

107
00:05:37,020 --> 00:05:38,860
‫le mot de passe, je suppose,

108
00:05:38,860 --> 00:05:40,080
‫ne s'affiche pas

109
00:05:40,080 --> 00:05:42,983
‫parce que nous avons en quelque sorte spécifié deux valeurs là-bas.

110
00:05:46,140 --> 00:05:50,470
‫Donc, à la place, spécifions un objet ici et voyons s'il

111
00:05:50,470 --> 00:05:52,020
‫fonctionne à nouveau.

112
00:05:54,072 --> 00:05:57,322
‫(en tapant sur un clavier) Eh bien, je suppose

113
00:06:03,770 --> 00:06:05,410
‫qu'il essaie de

114
00:06:05,410 --> 00:06:07,473
‫convertir cet objet en chaîne ici.

115
00:06:08,400 --> 00:06:11,530
‫D'accord, mais ça n'a pas vraiment d'importance ici.

116
00:06:11,530 --> 00:06:15,573
‫Je suis généralement plus habitué à utiliser la console. log au lieu d'alerte.

117
00:06:16,530 --> 00:06:17,900
‫Bien?

118
00:06:17,900 --> 00:06:20,960
‫Mais de toute façon, je suis sûr que ça marche maintenant ici.

119
00:06:20,960 --> 00:06:23,783
‫Et donc allons-y maintenant et créons cette fonction.

120
00:06:24,640 --> 00:06:28,910
‫Donc, pour faire ces requêtes HTTP pour la connexion,

121
00:06:28,910 --> 00:06:29,890
‫nous allons

122
00:06:29,890 --> 00:06:34,130
‫utiliser une bibliothèque très populaire appelée Axios, d'accord ?

123
00:06:34,130 --> 00:06:36,430
‫Et dans la vidéo suivante, nous allons en

124
00:06:36,430 --> 00:06:39,460
‫fait télécharger cette bibliothèque à partir de NPM et la regrouper

125
00:06:39,460 --> 00:06:41,000
‫avec tous nos autres

126
00:06:41,000 --> 00:06:43,713
‫scripts, mais pour l'instant, utilisons-la à partir d'un CDN.

127
00:06:45,240 --> 00:06:48,860
‫Alors, allons-y sur Google Axios

128
00:06:48,860 --> 00:06:52,260
‫CDN, d'accord ?

129
00:06:52,260 --> 00:06:55,513
‫Ensuite, allez-y et copiez celui-ci ici, puis,

130
00:06:57,650 --> 00:06:59,403
‫dans notre script

131
00:07:00,610 --> 00:07:04,583
‫de base, mettons-le ici au premier, d'accord ?

132
00:07:06,230 --> 00:07:07,300
‫Cela exposera

133
00:07:07,300 --> 00:07:10,080
‫donc un objet Axios à la portée globale,

134
00:07:10,080 --> 00:07:14,500
‫que nous pourrons ensuite utiliser dans notre fonction de connexion, d'accord ?

135
00:07:14,500 --> 00:07:17,123
‫Et nous pouvons donc maintenant dire

136
00:07:18,000 --> 00:07:21,003
‫Axios, puis transmettre les options pour notre demande.

137
00:07:22,320 --> 00:07:26,380
‫Alors tout d'abord, disons que nous faisons une post-requête.

138
00:07:26,380 --> 00:07:28,593
‫Ensuite, nous avons besoin d'une URL.

139
00:07:29,770 --> 00:07:31,140
‫Bien?

140
00:07:31,140 --> 00:07:33,313
‫Alors, obtenons cela de Postman.

141
00:07:39,530 --> 00:07:41,543
‫Voici donc notre URL ici.

142
00:07:43,250 --> 00:07:45,040
‫Et nous allons

143
00:07:45,040 --> 00:07:47,853
‫aussi, bien sûr, ajouter l'hôte alors là-bas.

144
00:07:49,400 --> 00:07:52,910
‫Alors ici, bien sûr, il s'agit essentiellement de http

145
00:07:55,440 --> 00:07:57,093
‫puis d'un hôte local.

146
00:08:01,250 --> 00:08:02,530
‫Et, c'est

147
00:08:02,530 --> 00:08:05,260
‫donc notre entrée de connexion, et maintenant

148
00:08:05,260 --> 00:08:07,490
‫nous devons spécifier les données que

149
00:08:07,490 --> 00:08:10,473
‫nous envoyons avec la demande dans le corps.

150
00:08:13,040 --> 00:08:13,873
‫Bien?

151
00:08:13,873 --> 00:08:17,870
‫Et donc c'est l'e-mail : l'e-mail.

152
00:08:17,870 --> 00:08:21,600
‫Et donc, comme vous le savez déjà, nous pouvons supprimer cet e-mail.

153
00:08:21,600 --> 00:08:22,433
‫D'accord?

154
00:08:22,433 --> 00:08:24,810
‫Cela s'appelle donc e-mail ici, car notre

155
00:08:24,810 --> 00:08:29,210
‫point de terminaison s'attend à ce que les données soient appelées e-mail, n'est-ce pas ?

156
00:08:29,210 --> 00:08:31,250
‫C'est donc ce que nous avons ici dans le corps.

157
00:08:31,250 --> 00:08:33,997
‫Nous devons spécifier une propriété appelée email et une

158
00:08:33,997 --> 00:08:35,790
‫autre appelée mot de passe.

159
00:08:35,790 --> 00:08:37,830
‫Et c'est exactement ce que nous

160
00:08:37,830 --> 00:08:41,630
‫faisons ici, mais il porte alors le même nom que ce paramètre ici.

161
00:08:41,630 --> 00:08:44,030
‫Et donc il suffit de dire email

162
00:08:45,000 --> 00:08:48,123
‫et il en va de même pour le mot de passe.

163
00:08:49,720 --> 00:08:50,760
‫D'accord?

164
00:08:50,760 --> 00:08:53,350
‫Maintenant, Axios renvoie ici une promesse et

165
00:08:53,350 --> 00:08:55,890
‫utilisons donc en fait une

166
00:08:55,890 --> 00:08:59,210
‫seule attente pour attendre que cette valeur revienne.

167
00:08:59,210 --> 00:09:04,210
‫Attendez donc ici, puis asynchrone ici.

168
00:09:05,110 --> 00:09:07,950
‫Maintenant, gardez à l'esprit qu'il s'agit de code orienté client et

169
00:09:07,950 --> 00:09:09,750
‫que seuls les navigateurs les plus

170
00:09:09,750 --> 00:09:12,290
‫modernes peuvent réellement exécuter une seule fonction d'attente, mais

171
00:09:12,290 --> 00:09:15,573
‫dans ce cours, je ne vais pas vraiment entrer dans les détails.

172
00:09:17,130 --> 00:09:18,310
‫D'accord?

173
00:09:18,310 --> 00:09:22,510
‫Quoi qu'il en soit, enregistrons le résultat de ceci en attendant

174
00:09:22,510 --> 00:09:25,640
‫la promesse dans la variable de résultat.

175
00:09:25,640 --> 00:09:28,623
‫Et puis juste, pour regarder le

176
00:09:30,000 --> 00:09:33,453
‫résultat, disons console. résultat du journal.

177
00:09:34,500 --> 00:09:35,333
‫D'accord?

178
00:09:35,333 --> 00:09:37,870
‫Maintenant, une chose que j'aime vraiment chez Axios

179
00:09:37,870 --> 00:09:40,240
‫est le fait qu'il va générer une

180
00:09:40,240 --> 00:09:43,780
‫erreur chaque fois que nous recevons une erreur de notre entrée API.

181
00:09:43,780 --> 00:09:46,480
‫Alors disons qu'il y a un mauvais mot de passe

182
00:09:46,480 --> 00:09:48,980
‫et donc le serveur va renvoyer un 403

183
00:09:48,980 --> 00:09:50,610
‫et donc fondamentalement, une erreur.

184
00:09:50,610 --> 00:09:52,768
‫Et donc chaque fois qu'il y

185
00:09:52,768 --> 00:09:55,290
‫a une erreur, Axios déclenchera également une erreur.

186
00:09:55,290 --> 00:09:58,680
‫Et donc, c'est très pratique car, avec cela, nous pouvons

187
00:09:58,680 --> 00:10:00,763
‫maintenant utiliser un bloc try catch.

188
00:10:02,660 --> 00:10:03,493
‫D'accord?

189
00:10:03,493 --> 00:10:05,840
‫Donc, fondamentalement, afin de gérer les erreurs ici

190
00:10:05,840 --> 00:10:07,173
‫du côté client.

191
00:10:08,750 --> 00:10:09,770
‫Ainsi, par exemple,

192
00:10:09,770 --> 00:10:12,090
‫lorsque l'utilisateur est correctement connecté, vous souhaitez

193
00:10:12,090 --> 00:10:14,375
‫afficher un message indiquant cela, et

194
00:10:14,375 --> 00:10:16,470
‫peut-être une autre logique, mais sinon,

195
00:10:16,470 --> 00:10:19,540
‫eh bien, nous allons entrer dans le bloc catch,

196
00:10:19,540 --> 00:10:20,543
‫et

197
00:10:21,770 --> 00:10:26,093
‫nous pouvons alors , effectuez une autre action en fonction de l'erreur.

198
00:10:27,022 --> 00:10:30,272
‫(en tapant sur un clavier) Alors,

199
00:10:31,670 --> 00:10:34,023
‫examinons également l'erreur.

200
00:10:37,480 --> 00:10:42,120
‫Et juste pour être sûr, je souhaite également enregistrer l'e-mail et le mot

201
00:10:43,200 --> 00:10:45,253
‫de passe sur la console.

202
00:10:49,130 --> 00:10:51,583
‫Alors, essayons ça ici.

203
00:10:52,430 --> 00:10:53,663
‫Rechargez notre

204
00:10:55,249 --> 00:10:58,499
‫page, (en tapant sur un clavier) Et je mets

205
00:11:02,240 --> 00:11:05,160
‫un mauvais mot de passe maintenant, d'accord ?

206
00:11:05,160 --> 00:11:06,993
‫Testez un, deux, trois, quatre, cinq.

207
00:11:09,100 --> 00:11:12,070
‫Jetons également un coup d'œil à notre console ici.

208
00:11:12,070 --> 00:11:15,740
‫Et nous obtenons cette erreur ici de mapbox, js, mais ne vous

209
00:11:15,740 --> 00:11:17,330
‫inquiétez pas pour ça.

210
00:11:17,330 --> 00:11:19,430
‫Nous allons à nouveau corriger cela un peu plus tard.

211
00:11:21,848 --> 00:11:24,890
‫Bur pour l'instant, regardons ce qui se passe ici.

212
00:11:24,890 --> 00:11:28,900
‫Et ici, nous obtenons une belle erreur, d'accord ?

213
00:11:28,900 --> 00:11:32,670
‫Et donc, en fait, quand nous devons jeter un œil à ici, c'est

214
00:11:32,670 --> 00:11:34,253
‫une erreur. réponse.

215
00:11:36,630 --> 00:11:38,910
‫Et puis les données de point.

216
00:11:38,910 --> 00:11:42,550
‫D'accord, et vous le trouverez ici dans la documentation Axios au cas

217
00:11:42,550 --> 00:11:45,113
‫où vous vous demanderiez d'où cela vient.

218
00:11:46,660 --> 00:11:47,493
‫Bien?

219
00:11:49,290 --> 00:11:52,140
‫Permettez-moi d'aller de l'avant et de copier cet

220
00:11:53,450 --> 00:11:56,713
‫e-mail, car ce n'est pas si bon de toujours l'écrire manuellement.

221
00:12:00,200 --> 00:12:04,263
‫Et maintenant, nous obtenons en fait une erreur bien formatée ici.

222
00:12:05,440 --> 00:12:06,273
‫D'accord?

223
00:12:06,273 --> 00:12:08,810
‫Et c'est donc exactement le jsencode que

224
00:12:08,810 --> 00:12:11,310
‫nous avons renvoyé depuis notre serveur.

225
00:12:11,310 --> 00:12:12,143
‫À droite?

226
00:12:12,143 --> 00:12:13,320
‫Donc, c'est exactement la

227
00:12:13,320 --> 00:12:15,220
‫même chose que nous avons vu dans Postman.

228
00:12:15,220 --> 00:12:20,220
‫Nous obtenons donc l'intégralité de notre erreur, le message, ainsi que la pile.

229
00:12:20,270 --> 00:12:23,420
‫Et nous voyons donc que nous n'avons probablement pas fourni l'e-mail

230
00:12:23,420 --> 00:12:26,523
‫et le mot de passe correctement pour une raison quelconque.

231
00:12:27,550 --> 00:12:30,330
‫Alors revenons en arrière, jetez un œil.

232
00:12:30,330 --> 00:12:34,230
‫Oh, alors j'ai fait quelque chose de bizarre ici où j'ai passé un

233
00:12:34,230 --> 00:12:36,230
‫objet avec à la fois l'email

234
00:12:36,230 --> 00:12:38,003
‫et le mot de passe.

235
00:12:38,980 --> 00:12:41,060
‫Et donc je pense que c'est avant quand

236
00:12:41,060 --> 00:12:42,900
‫il a essayé de faire cette

237
00:12:42,900 --> 00:12:45,670
‫alerte et je suppose que je l'ai fait au mauvais endroit.

238
00:12:45,670 --> 00:12:49,570
‫Et donc, c'est pourquoi nous avons en fait vu undefined ici.

239
00:12:49,570 --> 00:12:51,260
‫Et nous avons ici cet objet.

240
00:12:51,260 --> 00:12:53,820
‫Donc, fondamentalement, l'e-mail était tout cet objet, et le

241
00:12:53,820 --> 00:12:56,023
‫mot de passe était alors aussi indéfini.

242
00:12:58,290 --> 00:12:59,123
‫D'accord?

243
00:12:59,123 --> 00:13:01,400
‫Alors maintenant, cela devrait résoudre le

244
00:13:01,400 --> 00:13:02,613
‫problème, rechargez-le.

245
00:13:07,930 --> 00:13:10,760
‫Ah, maintenant nous obtenons cette erreur correcte

246
00:13:10,760 --> 00:13:12,500
‫que nous attendions réellement.

247
00:13:12,500 --> 00:13:15,580
‫Alors maintenant, c'est un e-mail ou un mot de passe

248
00:13:15,580 --> 00:13:18,880
‫incorrect parce que j'ai spécifié un mauvais mot de passe, d'accord ?

249
00:13:18,880 --> 00:13:21,441
‫Mais maintenant, supprimons les cinq et

250
00:13:21,441 --> 00:13:24,973
‫testons un, deux, trois, quatre, cela devrait être correct.

251
00:13:25,860 --> 00:13:28,010
‫Alors, connectons-nous, et

252
00:13:28,010 --> 00:13:31,810
‫maintenant nous obtenons une réponse 200.

253
00:13:31,810 --> 00:13:33,253
‫Donc, une réussite.

254
00:13:34,290 --> 00:13:35,890
‫Alors ouvrons ceci et

255
00:13:35,890 --> 00:13:39,410
‫ce qui nous intéresse en fait, ce sont les données.

256
00:13:39,410 --> 00:13:42,030
‫Donc en gros réponse. data car c'est

257
00:13:42,030 --> 00:13:43,260
‫alors

258
00:13:43,260 --> 00:13:46,960
‫en fait où se trouve notre réponse jsen.

259
00:13:46,960 --> 00:13:48,653
‫Donc ici, nous obtenons

260
00:13:50,210 --> 00:13:55,210
‫ces données ici, et nous obtenons également le statut et le jeton.

261
00:13:55,410 --> 00:13:59,030
‫Et donc, c'est ici notre jeton Web jsen correct

262
00:13:59,030 --> 00:14:01,550
‫correspondant à cet utilisateur connecté.

263
00:14:01,550 --> 00:14:03,170
‫Maintenant, ce qui est vraiment

264
00:14:03,170 --> 00:14:05,400
‫intéressant, c'est de jeter un œil à nos cookies.

265
00:14:05,400 --> 00:14:07,540
‫Et nous le faisons dans Google Chrome au

266
00:14:07,540 --> 00:14:09,560
‫moins en cliquant sur cette icône

267
00:14:09,560 --> 00:14:12,180
‫ici, puis ici en bas, vous avez les cookies.

268
00:14:12,180 --> 00:14:14,900
‫Et cela dit aussi que notre connexion n'est

269
00:14:14,900 --> 00:14:15,940
‫pas sécurisée

270
00:14:15,940 --> 00:14:19,330
‫et c'est simplement parce que nous n'utilisons pas HTTPS à

271
00:14:19,330 --> 00:14:20,920
‫ce stade, mais peu importe.

272
00:14:20,920 --> 00:14:23,530
‫Ce qui compte ici, c'est que nous avons

273
00:14:24,630 --> 00:14:27,620
‫maintenant ce cookie et en effet, il s'appelle, jeton

274
00:14:27,620 --> 00:14:31,060
‫Web jsen, et il a exactement le jeton Web jsen que

275
00:14:31,060 --> 00:14:32,203
‫nous voyons ici.

276
00:14:33,360 --> 00:14:36,620
‫Donc, ce n'est que la fin, fondamentalement, de la

277
00:14:36,620 --> 00:14:40,710
‫chaîne, donc vous voyez que c'est égal à ce que nous avons ici.

278
00:14:40,710 --> 00:14:43,560
‫Et c'est ce cookie ici, qui nous permettra en

279
00:14:43,560 --> 00:14:46,030
‫fait de construire toute cette authentification.

280
00:14:46,030 --> 00:14:49,000
‫Encore une fois, parce que le navigateur n'enverra pas

281
00:14:49,000 --> 00:14:51,470
‫ce cookie avec chaque nouvelle demande.

282
00:14:51,470 --> 00:14:55,070
‫Et laissez-moi vous montrer dans notre back-end.

283
00:14:55,070 --> 00:14:59,930
‫Revenons donc là-bas, et allons à l'application. js.

284
00:14:59,930 --> 00:15:02,320
‫Et maintenant nous sommes de retour dans notre note, ou

285
00:15:02,320 --> 00:15:03,943
‫en fait dans notre code Express.

286
00:15:05,320 --> 00:15:07,360
‫Maintenant, afin d'avoir accès aux

287
00:15:07,360 --> 00:15:09,690
‫cookies qui sont dans notre demande.

288
00:15:09,690 --> 00:15:13,050
‫Dans Express, nous devons installer un certain middleware.

289
00:15:13,050 --> 00:15:16,630
‫Et nous devons donc l'installer à partir d'un package NPM.

290
00:15:16,630 --> 00:15:19,960
‫Et c'est encore une fois, venez sur notre

291
00:15:19,960 --> 00:15:21,550
‫autre terminal,

292
00:15:22,660 --> 00:15:25,313
‫puis NPM installez l'analyseur de cookies.

293
00:15:26,210 --> 00:15:27,043
‫D'accord?

294
00:15:27,043 --> 00:15:29,380
‫Donc, fondamentalement, ce package analysera ensuite tous

295
00:15:29,380 --> 00:15:31,653
‫les cookies de la demande entrante.

296
00:15:37,360 --> 00:15:38,193
‫cookieParser.

297
00:15:44,600 --> 00:15:45,680
‫Bien?

298
00:15:45,680 --> 00:15:50,377
‫Et maintenant, utilisons-le près de cet analyseur de corps.

299
00:15:54,770 --> 00:15:56,003
‫D'accord?

300
00:15:56,003 --> 00:15:57,050
‫Ces deux-là sont donc très similaires.

301
00:15:57,050 --> 00:15:59,750
‫Ce premier analyse les données du

302
00:15:59,750 --> 00:16:03,070
‫corps et le second analyse les données des cookies.

303
00:16:03,070 --> 00:16:06,600
‫Et maintenant, si dans ce middleware ici, nous

304
00:16:06,600 --> 00:16:09,803
‫pouvons utiliser request. biscuits.

305
00:16:11,470 --> 00:16:13,080
‫Et donc maintenant pour

306
00:16:13,080 --> 00:16:16,593
‫chaque demande, nous afficherons toujours tous les cookies dans la console.

307
00:16:19,360 --> 00:16:22,440
‫Donc, si nous rechargeons maintenant cette page, ou vraiment

308
00:16:22,440 --> 00:16:24,490
‫n'importe quelle autre page, et

309
00:16:24,490 --> 00:16:27,283
‫laissez-moi ouvrir celle-ci ici dans un nouvel onglet.

310
00:16:29,780 --> 00:16:33,420
‫Donc, si nous revenons maintenant, nous devrions voir ce cookie ici.

311
00:16:33,420 --> 00:16:35,820
‫Et, en effet, le voici.

312
00:16:35,820 --> 00:16:38,810
‫C'est donc le cookie qui vient d'être

313
00:16:38,810 --> 00:16:42,960
‫envoyé dans notre application en chargeant cette page dans le navigateur.

314
00:16:42,960 --> 00:16:44,223
‫Et si

315
00:16:45,710 --> 00:16:49,710
‫je recommence, vous en verrez un autre, n'est-ce pas ?

316
00:16:49,710 --> 00:16:51,120
‫Alors voilà.

317
00:16:51,120 --> 00:16:54,790
‫Et maintenant, nous pouvons l'utiliser pour protéger notre itinéraire.

318
00:16:54,790 --> 00:16:56,863
‫Bon, alors essayons ça.

319
00:16:58,860 --> 00:16:59,693
‫D'accord?

320
00:16:59,693 --> 00:17:01,070
‫Mais avant de

321
00:17:01,070 --> 00:17:03,080
‫pouvoir faire cela, nous devons

322
00:17:03,080 --> 00:17:05,770
‫également ajouter cela dans notre contrôleur off ici.

323
00:17:05,770 --> 00:17:08,840
‫Donc, pour le moment, nous ne lisons que le jeton Web jsen

324
00:17:08,840 --> 00:17:10,503
‫à partir de l'en-tête d'autorisation.

325
00:17:11,390 --> 00:17:12,223
‫À droite?

326
00:17:12,223 --> 00:17:15,230
‫Et seulement s'ils commencent par ce porteur, d'accord ?

327
00:17:15,230 --> 00:17:17,170
‫Donc pour le jeton au porteur.

328
00:17:17,170 --> 00:17:19,640
‫Mais maintenant, nous voulons aussi lire le jeton

329
00:17:19,640 --> 00:17:21,970
‫Web jsen à partir d'un cookie.

330
00:17:21,970 --> 00:17:25,633
‫Et donc ce que nous pouvons faire ici est essentiellement un else

331
00:17:27,870 --> 00:17:30,860
‫if, donc s'il n'y avait pas de jeton dans

332
00:17:30,860 --> 00:17:33,333
‫l'en-tête d'autorisation, eh bien, examinons les cookies.

333
00:17:34,170 --> 00:17:36,807
‫Alors demande. biscuits. jeton Web jsen.

334
00:17:36,807 --> 00:17:39,520
‫Donc JWT, qui est le nom du

335
00:17:39,520 --> 00:17:42,550
‫cookie, et donc donc, dans l'objet cookies, il

336
00:17:42,550 --> 00:17:45,110
‫y aura une propriété appelée JWT.

337
00:17:45,110 --> 00:17:47,137
‫Alors c'est ici, n'est-ce pas ?

338
00:17:49,120 --> 00:17:51,280
‫Et donc si cela existe,

339
00:17:51,280 --> 00:17:55,080
‫eh bien, alors le jeton devrait être exactement cela.

340
00:17:55,080 --> 00:17:58,040
‫Alors demande. biscuits. jwt.

341
00:17:58,040 --> 00:17:58,873
‫D'accord.

342
00:18:00,117 --> 00:18:00,950
‫Et maintenant, avec cela, nous

343
00:18:02,085 --> 00:18:03,593
‫sommes également en mesure d'authentifier les utilisateurs en fonction des jetons

344
00:18:05,590 --> 00:18:06,840
‫envoyés via les cookies et pas seulement l'en-tête d'autorisation.

345
00:18:06,840 --> 00:18:10,400
‫Super.

346
00:18:10,400 --> 00:18:13,210
‫Et juste pour tester cela, protégeons en fait l'une

347
00:18:13,210 --> 00:18:15,780
‫de nos routes ici dans la vue.

348
00:18:15,780 --> 00:18:16,613
‫Et je le ferai avec cette page de détails de la tournée, d'accord ?

349
00:18:16,613 --> 00:18:18,580
‫Donc c'est juste pour

350
00:18:18,580 --> 00:18:22,610
‫tester car bien sûr cela n'a pas beaucoup de sens,

351
00:18:22,610 --> 00:18:27,170
‫mais je voulais juste vous montrer que tel qu'il est en ce

352
00:18:27,170 --> 00:18:29,460
‫moment, notre connexion fonctionne déjà.

353
00:18:29,460 --> 00:18:31,920
‫Importons donc le authController ici.

354
00:18:31,920 --> 00:18:33,800
‫(en tapant sur un clavier)

355
00:18:33,800 --> 00:18:36,723
‫Et puis, comme avant, éditez ici dans cette route.

356
00:18:37,860 --> 00:18:39,993
‫Donc authController. protéger.

357
00:18:41,708 --> 00:18:44,958
‫Et donc ce n'est pas nouveau à ce stade.

358
00:18:49,884 --> 00:18:54,860
‫Et puis seulement si l'utilisateur est connecté, nous pouvons

359
00:18:54,860 --> 00:18:58,770
‫aller au getTour.

360
00:18:58,770 --> 00:19:00,930
‫Super.

361
00:19:00,930 --> 00:19:03,200
‫Donc, ce que je vais faire maintenant, c'est supprimer ce cookie d'abord

362
00:19:03,200 --> 00:19:04,993
‫juste pour vous montrer ce qui se passe lorsqu'un

363
00:19:06,400 --> 00:19:07,233
‫utilisateur non connecté

364
00:19:08,460 --> 00:19:09,710
‫essaie d'accéder à cette route maintenant.

365
00:19:09,710 --> 00:19:12,450
‫Et donc fondamentalement, si nous supprimons ce cookie, c'est comme

366
00:19:12,450 --> 00:19:13,850
‫déconnecter l'utilisateur, n'est-ce pas ?

367
00:19:13,850 --> 00:19:17,293
‫Donc, si vous jetez maintenant un œil à nos

368
00:19:18,180 --> 00:19:20,950
‫visites, cela devrait très bien paraître.

369
00:19:20,950 --> 00:19:24,563
‫Mais, si nous essayons maintenant d'accéder à cette

370
00:19:25,730 --> 00:19:28,970
‫page, nous devrions obtenir une erreur.

371
00:19:28,970 --> 00:19:30,653
‫Et en effet, ça y est, en disant que vous n'êtes pas connecté.

372
00:19:31,700 --> 00:19:34,090
‫Assez juste.

373
00:19:34,090 --> 00:19:35,580
‫Alors revenons en arrière et connectons-nous réellement.

374
00:19:35,580 --> 00:19:39,443
‫D'accord?

375
00:19:40,640 --> 00:19:41,550
‫Alors on y va.

376
00:19:41,550 --> 00:19:44,903
‫Et puis à l'avenir, nous allons bien sûr également implémenter des fenêtres d'alerte

377
00:19:50,833 --> 00:19:51,666
‫ici et

378
00:19:51,666 --> 00:19:52,610
‫toutes ces bonnes choses.

379
00:19:52,610 --> 00:19:53,550
‫Mais pour l'instant, encore une fois, faisons en sorte que cela fonctionne.

380
00:19:53,550 --> 00:19:55,570
‫Et donc vous voyez que nous

381
00:19:55,570 --> 00:19:58,800
‫sommes de retour pour avoir notre bon cookie ici, d'accord ?

382
00:19:58,800 --> 00:20:02,380
‫Et donc, essayons maintenant d'accéder à cette route protégée.

383
00:20:02,380 --> 00:20:04,240
‫Et effectivement, maintenant ça marche.

384
00:20:04,240 --> 00:20:08,550
‫Fantastique, c'est déjà vraiment génial, non ?

385
00:20:08,550 --> 00:20:12,163
‫Idéalement, lorsqu'un utilisateur est connecté, nous voulons alors ne

386
00:20:13,370 --> 00:20:16,050
‫pas afficher ces boutons ici,

387
00:20:16,050 --> 00:20:20,250
‫mais plutôt, comme un menu utilisateur ou une image de l'utilisateur.

388
00:20:20,250 --> 00:20:22,800
‫Donc, en gros, montrant que

389
00:20:22,800 --> 00:20:26,770
‫cet utilisateur est réellement connecté, n'est-ce pas ?

390
00:20:26,770 --> 00:20:31,240
‫Faisons-le dans la vidéo suivante, en regroupant tous nos fichiers

391
00:20:31,240 --> 00:20:32,650
‫JavaScript dans

392
00:20:32,650 --> 00:20:35,545
‫le front-end, comme je l'expliquais plus tôt.

393
00:20:35,545 --> 00:20:38,090
‫Alors n'attendez pas, passons directement au suivant.

394
00:20:38,090 --> 00:20:41,220
‫On se voit là-bas.