1
00:00:01,000 --> 00:00:03,340
‫Instructor: En la última lección

2
00:00:03,340 --> 00:00:06,030
‫aprendimos que el token web JSON debe

3
00:00:06,030 --> 00:00:08,930
‫almacenarse en una cookie segura solo HTTP.

4
00:00:08,930 --> 00:00:11,470
‫Pero en este momento, solo enviamos

5
00:00:11,470 --> 00:00:14,790
‫el token como una cadena simple en nuestra respuesta JSON.

6
00:00:14,790 --> 00:00:18,690
‫Entonces, en este video, también enviemos el token como una cookie, para

7
00:00:18,690 --> 00:00:20,960
‫que el navegador pueda guardarlo de esta

8
00:00:20,960 --> 00:00:22,473
‫manera más segura.

9
00:00:23,920 --> 00:00:25,550
‫Entonces estamos en nuestro código.

10
00:00:25,550 --> 00:00:28,193
‫¿Realmente enviamos el token al cliente?

11
00:00:29,170 --> 00:00:32,610
‫Bueno, recuerde, eso está en el authController y

12
00:00:32,610 --> 00:00:35,920
‫aquí mismo en la función createSendToken.

13
00:00:35,920 --> 00:00:39,040
‫Así que antes, teníamos básicamente

14
00:00:39,040 --> 00:00:43,180
‫todo este código en muchos lugares diferentes, pero luego

15
00:00:43,180 --> 00:00:46,400
‫lo refactorizamos todo en esta función createSendToken.

16
00:00:46,400 --> 00:00:49,090
‫Está bien, y aquí es donde vamos a trabajar ahora.

17
00:00:49,090 --> 00:00:50,980
‫Ahora, estoy seguro de que está

18
00:00:50,980 --> 00:00:53,320
‫familiarizado con la forma en que funcionan las cookies

19
00:00:53,320 --> 00:00:56,680
‫en general, pero solo para asegurarnos de que todos estamos en la misma

20
00:00:56,680 --> 00:00:58,960
‫página aquí, hablemos un poco sobre las cookies.

21
00:00:58,960 --> 00:01:02,330
‫Entonces, en primer lugar, una cookie es básicamente un

22
00:01:02,330 --> 00:01:06,240
‫pequeño fragmento de texto que un servidor puede enviar a los clientes.

23
00:01:06,240 --> 00:01:08,960
‫Luego, cuando el cliente recibe una cookie,

24
00:01:08,960 --> 00:01:10,650
‫la almacenará automáticamente

25
00:01:10,650 --> 00:01:12,860
‫y luego la enviará automáticamente

26
00:01:12,860 --> 00:01:16,360
‫junto con todas las solicitudes futuras al mismo servidor.

27
00:01:16,360 --> 00:01:20,130
‫De acuerdo, nuevamente, un navegador almacena automáticamente una cookie

28
00:01:20,130 --> 00:01:23,010
‫que recibe y la envía de

29
00:01:23,010 --> 00:01:27,320
‫regreso en todas las solicitudes futuras al servidor de donde proviene.

30
00:01:27,320 --> 00:01:29,500
‫Bien, ahora, por ahora, esto no será

31
00:01:29,500 --> 00:01:31,090
‫realmente importante para nosotros

32
00:01:31,090 --> 00:01:34,020
‫ya que solo estamos probando la API usando Postman.

33
00:01:34,020 --> 00:01:37,110
‫Pero un poco más tarde, cuando vamos a renderizar

34
00:01:37,110 --> 00:01:39,510
‫páginas web dinámicas e interactuar realmente con

35
00:01:39,510 --> 00:01:41,450
‫el navegador, será realmente

36
00:01:41,450 --> 00:01:44,220
‫importante que el navegador envíe el token básicamente

37
00:01:44,220 --> 00:01:46,410
‫de forma automática en cada solicitud.

38
00:01:46,410 --> 00:01:49,640
‫Está bien, y para entonces, por supuesto, hablaremos más sobre eso.

39
00:01:49,640 --> 00:01:52,220
‫Pero de todos modos, ahora aprendamos cómo crear

40
00:01:52,220 --> 00:01:53,950
‫y enviar una cookie.

41
00:01:53,950 --> 00:01:57,720
‫Entonces, para enviar una cookie, en realidad es muy fácil.

42
00:01:57,720 --> 00:02:00,380
‫Todo lo que tenemos que hacer es básicamente adjuntarlo

43
00:02:00,380 --> 00:02:02,023
‫al objeto de respuesta.

44
00:02:03,010 --> 00:02:06,910
‫Entonces decimos res. cookie y luego todo lo

45
00:02:06,910 --> 00:02:09,550
‫que tenemos que hacer es especificar el nombre

46
00:02:09,550 --> 00:02:11,630
‫de la cookie, y lo llamo token

47
00:02:11,630 --> 00:02:14,860
‫web JSON, luego los datos que realmente queremos enviar en

48
00:02:14,860 --> 00:02:17,830
‫la cookie, por lo que, por supuesto, esa será

49
00:02:17,830 --> 00:02:22,020
‫la variable del token y luego, un par de opciones para la cookie.

50
00:02:22,020 --> 00:02:24,119
‫Y la primera opción que

51
00:02:24,119 --> 00:02:26,810
‫vamos a especificar es la propiedad expira.

52
00:02:26,810 --> 00:02:29,620
‫Bien, básicamente, esta propiedad expira hará

53
00:02:29,620 --> 00:02:33,200
‫que el navegador o el cliente en general eliminen

54
00:02:33,200 --> 00:02:36,360
‫la cookie después de que haya expirado.

55
00:02:36,360 --> 00:02:38,780
‫De acuerdo, entonces establecemos una fecha

56
00:02:38,780 --> 00:02:43,360
‫de vencimiento similar a la que configuramos en el token web JSON, de acuerdo.

57
00:02:43,360 --> 00:02:45,810
‫Entonces, creemos una nueva variable para

58
00:02:46,760 --> 00:02:49,390
‫eso, está bien, porque el paquete de token

59
00:02:49,390 --> 00:02:51,870
‫web JSON puede funcionar con este formato.

60
00:02:51,870 --> 00:02:55,450
‫De acuerdo, pero en JavaScript, esto no tiene sentido y,

61
00:02:55,450 --> 00:02:58,923
‫en cambio, creemos una variable con un número real.

62
00:02:59,850 --> 00:03:02,053
‫Así que llamémoslo todavía JWT, luego

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

64
00:03:06,210 --> 00:03:10,740
‫caduca y aún lo configuramos en 90, es decir, 90 días,

65
00:03:10,740 --> 00:03:12,810
‫pero nuevamente, sin el D.

66
00:03:12,810 --> 00:03:16,210
‫De acuerdo, ahora podemos realizar operaciones

67
00:03:16,210 --> 00:03:21,080
‫con él porque necesitaremos convertirlo a milisegundos, de acuerdo.

68
00:03:21,080 --> 00:03:23,540
‫Entonces, ¿cuándo debería caducar esta cookie?

69
00:03:23,540 --> 00:03:26,610
‫Debería caducar en una nueva fecha.

70
00:03:26,610 --> 00:03:28,890
‫Entonces, en JavaScript, al especificar fechas,

71
00:03:28,890 --> 00:03:30,800
‫siempre necesitamos decir nueva

72
00:03:30,800 --> 00:03:35,403
‫Fecha y luego debería caducar en este momento, más estos 90 días.

73
00:03:36,820 --> 00:03:39,483
‫Bien, ahora, así, por supuesto.

74
00:03:41,470 --> 00:03:43,633
‫Y luego procesa. env, y

75
00:03:44,894 --> 00:03:48,280
‫ahora, usemos este y luego simplemente coloquemos

76
00:03:49,840 --> 00:03:52,320
‫la cookie allí, de acuerdo.

77
00:03:52,320 --> 00:03:55,560
‫Pero ahora, por supuesto, necesitamos convertir eso a milisegundos.

78
00:03:55,560 --> 00:03:57,410
‫Así que ahora mismo tenemos 90 días.

79
00:03:57,410 --> 00:03:59,910
‫Así que dos horas, son 24 veces.

80
00:03:59,910 --> 00:04:01,770
‫Dos minutos, son 60 veces.

81
00:04:01,770 --> 00:04:04,810
‫Dos segundos, son 60 veces más.

82
00:04:04,810 --> 00:04:08,610
‫Y luego milisegundos, mil veces, está bien.

83
00:04:08,610 --> 00:04:10,600
‫Y, por supuesto, podría hacerlo todo

84
00:04:10,600 --> 00:04:14,090
‫de una vez, pero esto es solo para especificar qué estamos haciendo exactamente.

85
00:04:14,090 --> 00:04:15,120
‫Entonces, para mostrar

86
00:04:15,120 --> 00:04:17,163
‫que en realidad lo estamos convirtiendo a milisegundos.

87
00:04:18,040 --> 00:04:21,603
‫La siguiente opción será la opción segura.

88
00:04:22,610 --> 00:04:24,560
‫Entonces, vamos a establecer este

89
00:04:24,560 --> 00:04:27,530
‫en verdadero y así, la cookie solo se enviará

90
00:04:27,530 --> 00:04:29,140
‫en una conexión encriptada.

91
00:04:29,140 --> 00:04:32,830
‫Básicamente, solo estamos usando HTTPS, de acuerdo.

92
00:04:32,830 --> 00:04:37,030
‫Y finalmente, es esa opción httpOnly de la que

93
00:04:37,030 --> 00:04:38,593
‫hemos hablado antes.

94
00:04:41,630 --> 00:04:43,740
‫Bien, configuramos este como verdadero y

95
00:04:43,740 --> 00:04:45,820
‫esto hará que el

96
00:04:45,820 --> 00:04:50,410
‫navegador no pueda acceder a la cookie ni modificarla de ninguna manera.

97
00:04:50,410 --> 00:04:53,280
‫Bien, y esto es importante para prevenir esos

98
00:04:53,280 --> 00:04:55,900
‫ataques de secuencias de comandos entre sitios.

99
00:04:55,900 --> 00:04:58,110
‫De acuerdo, lo único que

100
00:04:58,110 --> 00:05:01,340
‫hará el navegador cuando establezcamos httpOnly en verdadero

101
00:05:01,340 --> 00:05:03,390
‫es básicamente recibir la

102
00:05:03,390 --> 00:05:07,180
‫cookie, almacenarla y luego enviarla automáticamente junto con cada solicitud.

103
00:05:07,180 --> 00:05:09,180
‫Está bien, y eso es todo.

104
00:05:09,180 --> 00:05:12,770
‫Así es como básicamente definimos la cookie, digamos esta

105
00:05:12,770 --> 00:05:14,360
‫parte, y luego la

106
00:05:14,360 --> 00:05:17,510
‫enviamos usando res. Galleta.

107
00:05:17,510 --> 00:05:20,850
‫Ahora bien, si quisiéramos probar esto ahora mismo, no funcionaría porque

108
00:05:20,850 --> 00:05:23,990
‫en este momento, en realidad, no estamos usando HTTPS.

109
00:05:23,990 --> 00:05:26,650
‫Y así, debido a este seguro: verdadero, la

110
00:05:26,650 --> 00:05:28,130
‫cookie no se

111
00:05:28,130 --> 00:05:30,590
‫crearía y no se enviaría al cliente.

112
00:05:30,590 --> 00:05:31,920
‫Muy bien,

113
00:05:31,920 --> 00:05:36,180
‫y básicamente, solo queremos activar esta parte aquí en producción.

114
00:05:36,180 --> 00:05:38,820
‫Entonces, lo que voy a hacer es

115
00:05:38,820 --> 00:05:42,510
‫básicamente exportar este objeto completo aquí en una variable separada.

116
00:05:42,510 --> 00:05:44,160
‫Bien, déjame mostrarte eso.

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

118
00:05:47,242 --> 00:05:49,710
‫const cookieOptions debería ser igual

119
00:05:50,780 --> 00:05:54,003
‫a esto y luego aquí, pasamos eso.

120
00:05:55,440 --> 00:05:56,273
‫Está bien.

121
00:05:57,480 --> 00:06:00,300
‫Ahora, por supuesto, no queremos esta parte aquí,

122
00:06:00,300 --> 00:06:03,100
‫pero solo cuando estemos en producción.

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

124
00:06:06,830 --> 00:06:11,670
‫digamos si proceso. env. NODE_ENV, recuerda que es donde

125
00:06:11,670 --> 00:06:13,500
‫se almacena si estamos en

126
00:06:13,500 --> 00:06:15,023
‫producción o no.

127
00:06:16,130 --> 00:06:17,780
‫Entonces, si eso es

128
00:06:20,210 --> 00:06:24,590
‫igual a la producción, configure cookiesOptions. seguro igual a

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

130
00:06:28,970 --> 00:06:31,533
‫Bien, y ahora, podemos eliminarlo de aquí.

131
00:06:33,600 --> 00:06:36,430
‫Sí, ahora, solo cuando estemos en

132
00:06:36,430 --> 00:06:39,300
‫producción, obtendremos las opciones seguras configuradas como verdaderas.

133
00:06:39,300 --> 00:06:42,150
‫Y de lo contrario, solo se enviará

134
00:06:42,150 --> 00:06:45,470
‫así, solo con la fecha de vencimiento y httpOnly.

135
00:06:45,470 --> 00:06:48,263
‫Bien, ahora probemos esto.

136
00:06:50,200 --> 00:06:53,153
‫Y lo probaré creando un nuevo usuario.

137
00:06:54,940 --> 00:06:56,970
‫Así que aquí en Registrarse en realidad

138
00:06:58,600 --> 00:06:59,750
‫y llamemos a este

139
00:07:00,880 --> 00:07:03,180
‫usuario @ jonas. io.

140
00:07:03,180 --> 00:07:04,733
‫Siempre con la misma contraseña.

141
00:07:07,390 --> 00:07:09,100
‫También lo llamaré

142
00:07:09,100 --> 00:07:13,273
‫Usuario y digamos que el rol aquí es una guía,

143
00:07:14,520 --> 00:07:17,823
‫así que también tenemos algunos roles diferentes aquí.

144
00:07:19,040 --> 00:07:20,360
‫Dale más espacio.

145
00:07:20,360 --> 00:07:22,670
‫Y ahora, intentémoslo en realidad.

146
00:07:22,670 --> 00:07:25,500
‫Y la respuesta es la que esperábamos con la

147
00:07:25,500 --> 00:07:26,810
‫diferencia de que

148
00:07:26,810 --> 00:07:30,190
‫ahora, obtenemos una cookie aquí en esta pestaña de Cookies.

149
00:07:30,190 --> 00:07:32,160
‫Y, de hecho, aquí

150
00:07:32,160 --> 00:07:35,450
‫obtenemos el nombre de la cookie, el valor.

151
00:07:35,450 --> 00:07:37,220
‫También tenemos la fecha de

152
00:07:37,220 --> 00:07:40,160
‫vencimiento, que es exactamente 90 días a partir de ahora.

153
00:07:40,160 --> 00:07:44,913
‫Hemos establecido httpOnly en verdadero y también, seguro establecido en falso.

154
00:07:45,970 --> 00:07:47,210
‫Está bien.

155
00:07:47,210 --> 00:07:49,970
‫Genial, también podemos ver todas las cookies que tenemos aquí

156
00:07:49,970 --> 00:07:51,733
‫en esta pestaña de Cookies.

157
00:07:52,690 --> 00:07:55,480
‫Y nuevamente, vemos esa cookie que recibimos

158
00:07:55,480 --> 00:07:57,673
‫de este dominio, de acuerdo.

159
00:07:58,630 --> 00:08:01,540
‫Ahora, solo una última cosa que realmente quiero

160
00:08:01,540 --> 00:08:04,130
‫cambiar en esa función en la que

161
00:08:04,130 --> 00:08:05,313
‫estamos trabajando, por

162
00:08:06,200 --> 00:08:10,660
‫lo que createSendToken, es básicamente deshacerme de esta contraseña aquí en la salida.

163
00:08:10,660 --> 00:08:13,560
‫Bien, en nuestro esquema, en realidad lo tenemos configurado

164
00:08:13,560 --> 00:08:16,510
‫para seleccionar falso, de modo que no aparezca cuando

165
00:08:16,510 --> 00:08:18,380
‫consultamos por todos los usuarios.

166
00:08:18,380 --> 00:08:21,290
‫Pero en este caso, proviene de la creación de un

167
00:08:21,290 --> 00:08:24,410
‫nuevo documento y eso es diferente y por eso lo vemos aquí.

168
00:08:24,410 --> 00:08:27,373
‫De acuerdo, pero en realidad podemos arreglar esto muy fácilmente.

169
00:08:28,650 --> 00:08:31,850
‫Bien, todo lo que tenemos que hacer en realidad es configurar

170
00:08:33,660 --> 00:08:35,010
‫el usuario. contraseña

171
00:08:36,370 --> 00:08:37,563
‫a indefinida.

172
00:08:38,750 --> 00:08:40,590
‫Muy bien, y eso

173
00:08:42,630 --> 00:08:43,920
‫debería eliminar

174
00:08:46,340 --> 00:08:48,490
‫las contraseñas de la salida.

175
00:08:48,490 --> 00:08:49,630
‫Bueno.

176
00:08:49,630 --> 00:08:53,203
‫Así que eliminemos este usuario aquí que acabamos de crear.

177
00:08:57,890 --> 00:08:59,850
‫E inténtelo de nuevo

178
00:08:59,850 --> 00:09:04,010
‫solo para ver si la contraseña ya no aparece.

179
00:09:04,010 --> 00:09:07,170
‫Y sí, de hecho ahora, se ha ido.

180
00:09:07,170 --> 00:09:09,820
‫Y aún así, nuestra galleta, por supuesto, está aquí.

181
00:09:09,820 --> 00:09:12,450
‫Y cuando ahora venimos aquí a nuestra pestaña Cookies,

182
00:09:12,450 --> 00:09:14,710
‫bueno, entonces todavía tiene una sola cookie

183
00:09:14,710 --> 00:09:17,430
‫porque la anterior ahora fue básicamente sobrescrita por esta

184
00:09:17,430 --> 00:09:18,600
‫nueva y eso

185
00:09:18,600 --> 00:09:20,380
‫es porque tienen el mismo nombre.

186
00:09:20,380 --> 00:09:23,940
‫Entonces, el nombre es como el identificador único de una cookie.

187
00:09:23,940 --> 00:09:26,160
‫Entonces, si recibimos uno con el nombre

188
00:09:26,160 --> 00:09:27,570
‫que ya se

189
00:09:27,570 --> 00:09:30,683
‫le dio, bueno, entonces el anterior simplemente se reemplaza.

190
00:09:31,720 --> 00:09:33,800
‫Está bien, y eso es todo.

191
00:09:33,800 --> 00:09:36,737
‫Así es como enviamos una cookie solo HTTP y,

192
00:09:36,737 --> 00:09:38,730
‫nuevamente, hablaremos más sobre esto

193
00:09:38,730 --> 00:09:40,813
‫cuando creemos nuestro sitio web dinámico.