1
00:00:01,000 --> 00:00:03,340
‫Instructeur : Nous avons donc appris

2
00:00:03,340 --> 00:00:06,030
‫lors de la dernière conférence que le jeton Web

3
00:00:06,030 --> 00:00:08,930
‫JSON doit être stocké dans un cookie sécurisé HTTP uniquement.

4
00:00:08,930 --> 00:00:11,470
‫Mais pour le moment, nous n'envoyons le jeton

5
00:00:11,470 --> 00:00:14,790
‫que sous la forme d'une simple chaîne dans notre réponse JSON.

6
00:00:14,790 --> 00:00:18,690
‫Donc, dans cette vidéo, envoyons également le jeton en tant que cookie, afin

7
00:00:18,690 --> 00:00:20,960
‫que le navigateur puisse ensuite l'enregistrer de

8
00:00:20,960 --> 00:00:22,473
‫cette manière plus sécurisée.

9
00:00:23,920 --> 00:00:25,550
‫Nous sommes donc dans notre code.

10
00:00:25,550 --> 00:00:28,193
‫Envoyons-nous réellement le jeton au client ?

11
00:00:29,170 --> 00:00:32,610
‫Eh bien, rappelez-vous, c'est dans authController et

12
00:00:32,610 --> 00:00:35,920
‫ici dans la fonction createSendToken.

13
00:00:35,920 --> 00:00:39,040
‫Donc, avant, nous avions essentiellement tout

14
00:00:39,040 --> 00:00:43,180
‫ce code dans de nombreux endroits différents, mais nous avons

15
00:00:43,180 --> 00:00:46,400
‫ensuite refactorisé tout cela dans cette fonction createSendToken.

16
00:00:46,400 --> 00:00:49,090
‫Très bien, et c'est donc là que nous allons travailler maintenant.

17
00:00:49,090 --> 00:00:50,980
‫Maintenant, je suis sûr que

18
00:00:50,980 --> 00:00:53,320
‫vous connaissez le fonctionnement des cookies en général,

19
00:00:53,320 --> 00:00:56,680
‫mais juste pour être sûr que nous sommes tous sur la même

20
00:00:56,680 --> 00:00:58,960
‫longueur d'onde ici, parlons un peu des cookies.

21
00:00:58,960 --> 00:01:02,330
‫Donc tout d'abord, un cookie n'est en fait

22
00:01:02,330 --> 00:01:06,240
‫qu'un petit morceau de texte qu'un serveur peut envoyer aux clients.

23
00:01:06,240 --> 00:01:08,960
‫Ensuite, lorsque le client reçoit un cookie,

24
00:01:08,960 --> 00:01:10,650
‫il le stocke

25
00:01:10,650 --> 00:01:12,860
‫automatiquement, puis le renvoie automatiquement

26
00:01:12,860 --> 00:01:16,360
‫avec toutes les demandes futures au même serveur.

27
00:01:16,360 --> 00:01:20,130
‫Très bien, encore une fois, un navigateur stocke automatiquement un

28
00:01:20,130 --> 00:01:23,010
‫cookie qu'il reçoit et le renvoie

29
00:01:23,010 --> 00:01:27,320
‫dans toutes les demandes futures à ce serveur d'où il vient.

30
00:01:27,320 --> 00:01:29,500
‫Bon, maintenant, pour l'instant, cela ne va

31
00:01:29,500 --> 00:01:31,090
‫pas être vraiment important pour

32
00:01:31,090 --> 00:01:34,020
‫nous car nous ne testons l'API qu'à l'aide de Postman.

33
00:01:34,020 --> 00:01:37,110
‫Mais un peu plus tard, lorsque nous allons rendre

34
00:01:37,110 --> 00:01:39,510
‫des pages Web dynamiques et vraiment interagir

35
00:01:39,510 --> 00:01:41,450
‫avec le navigateur, il deviendra

36
00:01:41,450 --> 00:01:44,220
‫alors très important que le navigateur renvoie le

37
00:01:44,220 --> 00:01:46,410
‫jeton essentiellement automatiquement à chaque demande.

38
00:01:46,410 --> 00:01:49,640
‫D'accord, et d'ici là, bien sûr, nous en parlerons davantage.

39
00:01:49,640 --> 00:01:52,220
‫Mais de toute façon, apprenons maintenant comment créer

40
00:01:52,220 --> 00:01:53,950
‫et envoyer un cookie.

41
00:01:53,950 --> 00:01:57,720
‫Donc pour envoyer un cookie, c'est en fait très simple.

42
00:01:57,720 --> 00:02:00,380
‫Tout ce que nous avons à faire est de

43
00:02:00,380 --> 00:02:02,023
‫l'attacher à l'objet de réponse.

44
00:02:03,010 --> 00:02:06,910
‫Alors on dit rés. cookie, puis tout ce que

45
00:02:06,910 --> 00:02:09,550
‫nous avons à faire est de spécifier le

46
00:02:09,550 --> 00:02:11,630
‫nom du cookie, et je l'appelle jeton

47
00:02:11,630 --> 00:02:14,860
‫Web JSON, puis les données que nous voulons réellement envoyer

48
00:02:14,860 --> 00:02:17,830
‫dans le cookie, et ce sera donc bien sûr

49
00:02:17,830 --> 00:02:22,020
‫la variable du jeton et puis après cela, quelques options pour le cookie.

50
00:02:22,020 --> 00:02:24,119
‫Et la première option que

51
00:02:24,119 --> 00:02:26,810
‫nous allons spécifier est la propriété expires.

52
00:02:26,810 --> 00:02:29,620
‫D'accord, donc fondamentalement, cette propriété expires

53
00:02:29,620 --> 00:02:33,200
‫fera en sorte que le navigateur ou le client

54
00:02:33,200 --> 00:02:36,360
‫en général supprime le cookie après son expiration.

55
00:02:36,360 --> 00:02:38,780
‫D'accord, et nous avons donc défini une

56
00:02:38,780 --> 00:02:43,360
‫date d'expiration similaire à celle que nous avons définie dans le jeton Web JSON, d'accord.

57
00:02:43,360 --> 00:02:45,810
‫Créons donc une nouvelle variable pour

58
00:02:46,760 --> 00:02:49,390
‫cela, d'accord, car le package de jetons Web

59
00:02:49,390 --> 00:02:51,870
‫JSON peut alors fonctionner avec ce format.

60
00:02:51,870 --> 00:02:55,450
‫D'accord, mais en JavaScript, cela n'a pas de sens et à

61
00:02:55,450 --> 00:02:58,923
‫la place, créons une variable avec un nombre réel.

62
00:02:59,850 --> 00:03:02,053
‫Appelons-le toujours JWT, puis cookie, expire

63
00:03:03,090 --> 00:03:03,963
‫dans,

64
00:03:06,210 --> 00:03:10,740
‫et nous le définissons toujours sur 90, donc 90 jours, mais encore

65
00:03:10,740 --> 00:03:12,810
‫une fois, sans le D.

66
00:03:12,810 --> 00:03:16,210
‫D'accord, alors maintenant nous pouvons faire des

67
00:03:16,210 --> 00:03:21,080
‫opérations avec parce que nous devrons le convertir en millisecondes, d'accord.

68
00:03:21,080 --> 00:03:23,540
‫Alors, quand ce cookie doit-il expirer ?

69
00:03:23,540 --> 00:03:26,610
‫Il devrait expirer à une nouvelle date.

70
00:03:26,610 --> 00:03:28,890
‫Ainsi, en JavaScript, lorsque nous spécifions

71
00:03:28,890 --> 00:03:30,800
‫des dates, nous devons toujours

72
00:03:30,800 --> 00:03:35,403
‫indiquer une nouvelle date, puis elle devrait expirer maintenant, plus ces 90 jours.

73
00:03:36,820 --> 00:03:39,483
‫Bon, alors maintenant, comme ça bien sûr.

74
00:03:41,470 --> 00:03:43,633
‫Et puis traiter. env,

75
00:03:44,894 --> 00:03:48,280
‫et maintenant, utilisons celui-ci et mettons

76
00:03:49,840 --> 00:03:52,320
‫simplement le cookie là-dedans, d'accord.

77
00:03:52,320 --> 00:03:55,560
‫Mais maintenant, bien sûr, nous devons convertir cela en millisecondes.

78
00:03:55,560 --> 00:03:57,410
‫Nous avons donc 90 jours maintenant.

79
00:03:57,410 --> 00:03:59,910
‫Donc deux heures, il est temps 24.

80
00:03:59,910 --> 00:04:01,770
‫Deux minutes, il est temps 60.

81
00:04:01,770 --> 00:04:04,810
‫Deux secondes, c'est encore 60 fois.

82
00:04:04,810 --> 00:04:08,610
‫Et puis en millisecondes, fois mille, d'accord.

83
00:04:08,610 --> 00:04:10,600
‫Et bien sûr, je pourrais tout faire

84
00:04:10,600 --> 00:04:14,090
‫en une seule fois, mais c'est juste pour préciser ce que nous faisons exactement.

85
00:04:14,090 --> 00:04:15,120
‫Donc, pour montrer

86
00:04:15,120 --> 00:04:17,163
‫que nous le convertissons réellement en millisecondes.

87
00:04:18,040 --> 00:04:21,603
‫L'option suivante sera l'option sécurisée.

88
00:04:22,610 --> 00:04:24,560
‫Et donc nous allons définir celui-ci

89
00:04:24,560 --> 00:04:27,530
‫sur true et ainsi, le cookie ne sera envoyé que

90
00:04:27,530 --> 00:04:29,140
‫sur une connexion cryptée.

91
00:04:29,140 --> 00:04:32,830
‫Donc, en gros, nous n'utilisons que HTTPS, d'accord.

92
00:04:32,830 --> 00:04:37,030
‫Et enfin, c'est cette option httpOnly dont nous avons

93
00:04:37,030 --> 00:04:38,593
‫déjà parlé.

94
00:04:41,630 --> 00:04:43,740
‫D'accord, nous définissons donc celui-ci sur true et

95
00:04:43,740 --> 00:04:45,820
‫cela fera en sorte que le

96
00:04:45,820 --> 00:04:50,410
‫cookie ne puisse pas être consulté ou modifié de quelque manière que ce soit par le navigateur.

97
00:04:50,410 --> 00:04:53,280
‫D'accord, et c'est donc important pour empêcher

98
00:04:53,280 --> 00:04:55,900
‫ces attaques de scripts intersites.

99
00:04:55,900 --> 00:04:58,110
‫Très bien, donc tout ce que

100
00:04:58,110 --> 00:05:01,340
‫le navigateur va faire lorsque nous définissons httpOnly sur

101
00:05:01,340 --> 00:05:03,390
‫true est de recevoir le

102
00:05:03,390 --> 00:05:07,180
‫cookie, de le stocker, puis de l'envoyer automatiquement avec chaque demande.

103
00:05:07,180 --> 00:05:09,180
‫D'accord, et c'est en fait tout.

104
00:05:09,180 --> 00:05:12,770
‫C'est donc ainsi que nous définissons le cookie, disons cette

105
00:05:12,770 --> 00:05:14,360
‫partie, puis nous l'envoyons

106
00:05:14,360 --> 00:05:17,510
‫en utilisant res. biscuit.

107
00:05:17,510 --> 00:05:20,850
‫Maintenant, si nous voulions tester cela maintenant, cela ne fonctionnerait

108
00:05:20,850 --> 00:05:23,990
‫pas car pour le moment, nous n'utilisons pas HTTPS.

109
00:05:23,990 --> 00:05:26,650
‫Et donc à cause de ce secure : true,

110
00:05:26,650 --> 00:05:28,130
‫le cookie ne serait

111
00:05:28,130 --> 00:05:30,590
‫pas créé et ne serait pas envoyé au client.

112
00:05:30,590 --> 00:05:31,920
‫Très bien, et

113
00:05:31,920 --> 00:05:36,180
‫donc en gros, nous voulons seulement activer cette partie ici en production.

114
00:05:36,180 --> 00:05:38,820
‫Donc, ce que je vais faire, c'est

115
00:05:38,820 --> 00:05:42,510
‫essentiellement exporter cet objet entier ici dans une variable distincte.

116
00:05:42,510 --> 00:05:44,160
‫D'accord, alors laisse-moi te montrer ça.

117
00:05:45,550 --> 00:05:46,383
‫Donc

118
00:05:47,242 --> 00:05:49,710
‫const cookieOptions doit être égal

119
00:05:50,780 --> 00:05:54,003
‫à ceci, puis ici, nous le transmettons.

120
00:05:55,440 --> 00:05:56,273
‫D'accord.

121
00:05:57,480 --> 00:06:00,300
‫Maintenant, bien sûr, nous ne voulons pas de cette partie

122
00:06:00,300 --> 00:06:03,100
‫ici, mais seulement lorsque nous sommes en production.

123
00:06:03,100 --> 00:06:04,050
‫Alors

124
00:06:06,830 --> 00:06:11,670
‫disons si processus. env. NODE_ENV, rappelez-vous que c'est là

125
00:06:11,670 --> 00:06:13,500
‫qu'il est stocké si nous sommes

126
00:06:13,500 --> 00:06:15,023
‫en production ou non.

127
00:06:16,130 --> 00:06:17,780
‫Donc, si cela

128
00:06:20,210 --> 00:06:24,590
‫équivaut à la production, définissez cookieOptions. sécurisé égal à

129
00:06:26,490 --> 00:06:27,363
‫vrai.

130
00:06:28,970 --> 00:06:31,533
‫D'accord, et maintenant, nous pouvons le supprimer d'ici.

131
00:06:33,600 --> 00:06:36,430
‫Oui, alors maintenant, seulement lorsque nous serons en

132
00:06:36,430 --> 00:06:39,300
‫production, nous aurons les options sécurisées définies sur true.

133
00:06:39,300 --> 00:06:42,150
‫Et sinon, il ne sera envoyé que

134
00:06:42,150 --> 00:06:45,470
‫comme ça, donc juste avec la date d'expiration et httpOnly.

135
00:06:45,470 --> 00:06:48,263
‫D'accord, et alors testons cela maintenant.

136
00:06:50,200 --> 00:06:53,153
‫Et je vais le tester en créant un nouvel utilisateur.

137
00:06:54,940 --> 00:06:56,970
‫Alors ici, inscrivez-vous en fait

138
00:06:58,600 --> 00:06:59,750
‫et appelons

139
00:07:00,880 --> 00:07:03,180
‫celui-ci user@jonas. io.

140
00:07:03,180 --> 00:07:04,733
‫Toujours avec le même mot de passe.

141
00:07:07,390 --> 00:07:09,100
‫Je vais également l'appeler

142
00:07:09,100 --> 00:07:13,273
‫Utilisateur et disons que le rôle ici est un guide, donc juste

143
00:07:14,520 --> 00:07:17,823
‫pour que nous ayons également des rôles différents ici.

144
00:07:19,040 --> 00:07:20,360
‫Donnez-lui un peu plus d'espace.

145
00:07:20,360 --> 00:07:22,670
‫Et maintenant, essayons réellement.

146
00:07:22,670 --> 00:07:25,500
‫Et la réponse est exactement comme nous l'attendions avec

147
00:07:25,500 --> 00:07:26,810
‫la différence que

148
00:07:26,810 --> 00:07:30,190
‫maintenant, nous obtenons un cookie ici dans cet onglet Cookie.

149
00:07:30,190 --> 00:07:32,160
‫Et donc effectivement, ici,

150
00:07:32,160 --> 00:07:35,450
‫on obtient le nom du cookie, la valeur.

151
00:07:35,450 --> 00:07:37,220
‫Nous avons également la

152
00:07:37,220 --> 00:07:40,160
‫date d'expiration, qui est dans exactement 90 jours.

153
00:07:40,160 --> 00:07:44,913
‫Nous avons défini httpOnly sur true et secure défini sur false.

154
00:07:45,970 --> 00:07:47,210
‫D'accord.

155
00:07:47,210 --> 00:07:49,970
‫Génial, nous pouvons également voir tous les cookies que nous

156
00:07:49,970 --> 00:07:51,733
‫avons ici dans cet onglet Cookie.

157
00:07:52,690 --> 00:07:55,480
‫Et encore une fois, nous voyons ce cookie que

158
00:07:55,480 --> 00:07:57,673
‫nous avons reçu de ce domaine, d'accord.

159
00:07:58,630 --> 00:08:01,540
‫Maintenant, juste une dernière chose que je veux réellement

160
00:08:01,540 --> 00:08:04,130
‫changer dans cette fonction sur laquelle nous travaillons,

161
00:08:04,130 --> 00:08:05,313
‫donc le createSendToken,

162
00:08:06,200 --> 00:08:10,660
‫consiste essentiellement à se débarrasser de ce mot de passe ici dans la sortie.

163
00:08:10,660 --> 00:08:13,560
‫D'accord, donc dans notre schéma, nous l'avons défini

164
00:08:13,560 --> 00:08:16,510
‫pour sélectionner false, afin qu'il n'apparaisse pas lorsque nous

165
00:08:16,510 --> 00:08:18,380
‫interrogeons tous les utilisateurs.

166
00:08:18,380 --> 00:08:21,290
‫Mais dans ce cas, cela vient de la création d'un nouveau

167
00:08:21,290 --> 00:08:24,410
‫document et donc c'est différent et c'est pourquoi nous le voyons ici.

168
00:08:24,410 --> 00:08:27,373
‫D'accord, mais nous pouvons en fait très facilement résoudre ce problème.

169
00:08:28,650 --> 00:08:31,850
‫D'accord, tout ce que nous avons à faire est de

170
00:08:33,660 --> 00:08:35,010
‫définir l'utilisateur. mot

171
00:08:36,370 --> 00:08:37,563
‫de passe à indéfini.

172
00:08:38,750 --> 00:08:40,590
‫Très bien, et cela devrait

173
00:08:42,630 --> 00:08:43,920
‫donc supprimer les

174
00:08:46,340 --> 00:08:48,490
‫mots de passe de la sortie.

175
00:08:48,490 --> 00:08:49,630
‫D'accord.

176
00:08:49,630 --> 00:08:53,203
‫Alors supprimons simplement cet utilisateur que nous venons de créer.

177
00:08:57,890 --> 00:08:59,850
‫Et réessayez juste pour

178
00:08:59,850 --> 00:09:04,010
‫voir si le mot de passe ne s'affiche plus.

179
00:09:04,010 --> 00:09:07,170
‫Et oui, en effet maintenant, c'est parti.

180
00:09:07,170 --> 00:09:09,820
‫Et pourtant, notre cookie, bien sûr, est là.

181
00:09:09,820 --> 00:09:12,450
‫Et quand nous arrivons maintenant à notre onglet Cookies,

182
00:09:12,450 --> 00:09:14,710
‫eh bien, vous n'avez encore qu'un seul

183
00:09:14,710 --> 00:09:17,430
‫cookie parce que l'ancien était maintenant essentiellement écrasé par ce

184
00:09:17,430 --> 00:09:18,600
‫nouveau et c'est

185
00:09:18,600 --> 00:09:20,380
‫parce qu'ils ont le même nom.

186
00:09:20,380 --> 00:09:23,940
‫Le nom est donc comme l'identifiant unique d'un cookie.

187
00:09:23,940 --> 00:09:26,160
‫Et donc si nous en recevons un

188
00:09:26,160 --> 00:09:27,570
‫avec le nom qui

189
00:09:27,570 --> 00:09:30,683
‫a déjà été donné, eh bien, alors l'ancien est simplement remplacé.

190
00:09:31,720 --> 00:09:33,800
‫D'accord, et c'est en fait tout.

191
00:09:33,800 --> 00:09:36,737
‫C'est donc ainsi que nous envoyons un cookie HTTP uniquement et

192
00:09:36,737 --> 00:09:38,730
‫encore une fois, nous en parlerons

193
00:09:38,730 --> 00:09:40,813
‫davantage lorsque nous créerons notre site Web dynamique.