1
00:00:01,160 --> 00:00:04,610
‫-: Ahora finalmente es el momento de usar la API de

2
00:00:04,610 --> 00:00:06,830
‫inicio de sesión que creamos en

3
00:00:06,830 --> 00:00:09,100
‫las secciones anteriores y hay un montón de

4
00:00:09,100 --> 00:00:12,880
‫cosas que hacer aquí para que el front-end interactúe con el back-end.

5
00:00:12,880 --> 00:00:15,680
‫Y entonces estamos haciendo esto en conferencias separadas.

6
00:00:15,680 --> 00:00:17,833
‫De todos modos, comencemos ahora.

7
00:00:19,740 --> 00:00:21,570
‫Y así es como va a funcionar.

8
00:00:21,570 --> 00:00:25,180
‫Entonces, vamos a permitir que los usuarios inicien sesión en

9
00:00:25,180 --> 00:00:28,990
‫nuestro sitio web mediante una solicitud HTTP o una llamada ATEX, como

10
00:00:28,990 --> 00:00:31,580
‫a muchas personas les gusta llamarlo también.

11
00:00:31,580 --> 00:00:35,890
‫Y estamos haciendo esa solicitud HTTP al punto final de la API de inicio

12
00:00:35,890 --> 00:00:38,340
‫de sesión que implementamos antes de usar

13
00:00:38,340 --> 00:00:41,820
‫los datos que el usuario proporciona en este formulario que tenemos aquí.

14
00:00:41,820 --> 00:00:45,614
‫Por lo tanto, recuerde que nuestra API enviará una

15
00:00:45,614 --> 00:00:49,010
‫cookie que se almacenará automáticamente en el navegador.

16
00:00:49,010 --> 00:00:51,650
‫Y también se devuelve automáticamente

17
00:00:51,650 --> 00:00:53,990
‫con cada solicitud posterior.

18
00:00:53,990 --> 00:00:56,950
‫Y como verás, esta es una clave

19
00:00:56,950 --> 00:01:00,040
‫fundamental para que nuestro sistema de autenticación funcione.

20
00:01:00,040 --> 00:01:01,940
‫Pero de todos modos,

21
00:01:01,940 --> 00:01:04,518
‫dado que estamos haciendo esta solicitud HTTP

22
00:01:04,518 --> 00:01:09,220
‫en el navegador, por supuesto, volveremos a trabajar en el lado del cliente.

23
00:01:09,220 --> 00:01:10,900
‫Pero de todos modos, dado que

24
00:01:10,900 --> 00:01:13,570
‫estamos haciendo una solicitud HTTP en el navegador, seguiremos trabajando

25
00:01:13,570 --> 00:01:17,010
‫en el código de secuencia de comandos de trabajos del lado del cliente.

26
00:01:17,010 --> 00:01:20,410
‫Así como hicimos con la implementación de Mapbox.

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

28
00:01:21,570 --> 00:01:24,430
‫Así que sigamos adelante y creemos un nuevo archivo aquí.

29
00:01:24,430 --> 00:01:29,063
‫Y eso es público, js, y un archivo nuevo, al que llamaré

30
00:01:30,190 --> 00:01:33,030
‫inicio de sesión. js y en

31
00:01:33,960 --> 00:01:36,380
‫el siguiente video, de hecho, vamos a

32
00:01:36,380 --> 00:01:38,260
‫agrupar todos estos archivos JavaScript

33
00:01:38,260 --> 00:01:40,630
‫separados que estamos creando aquí para

34
00:01:40,630 --> 00:01:42,970
‫el front-end en un gran paquete.

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

36
00:01:43,820 --> 00:01:47,240
‫Pero por ahora, centrémonos en hacer que esta funcionalidad

37
00:01:47,240 --> 00:01:49,510
‫de inicio de sesión funcione.

38
00:01:49,510 --> 00:01:52,820
‫Pero de todos modos, comencemos ahora agregando un detector de

39
00:01:52,820 --> 00:01:57,139
‫eventos, escuchando el evento de envío en nuestro formulario de inicio de sesión, ¿de acuerdo?

40
00:01:57,139 --> 00:02:01,260
‫Entonces, nuestro formulario de inicio de sesión tiene esta clase de formulario aquí.

41
00:02:01,260 --> 00:02:04,307
‫Bien, ahora seleccionemos esto para el

42
00:02:04,307 --> 00:02:07,820
‫elemento y luego, escuchemos el evento de envío.

43
00:02:07,820 --> 00:02:10,430
‫Espero que esté familiarizado con este tipo de lógica

44
00:02:10,430 --> 00:02:12,510
‫en el JavaScript del lado del cliente.

45
00:02:12,510 --> 00:02:14,810
‫Y, con suerte, esto no es nada nuevo para ti.

46
00:02:15,810 --> 00:02:19,193
‫Entonces, document. querySelector, que usamos

47
00:02:20,260 --> 00:02:23,063
‫para seleccionar en función de la clase.

48
00:02:24,940 --> 00:02:27,040
‫Agregue entonces ese nombre

49
00:02:27,040 --> 00:02:32,040
‫de Selector, y ahora agregue EventListener, escuchando el evento de envío.

50
00:02:32,940 --> 00:02:35,740
‫Básicamente, un evento en el que el navegador se activará

51
00:02:35,740 --> 00:02:39,363
‫cada vez que un usuario haga clic en el botón enviar en el formulario.

52
00:02:40,220 --> 00:02:41,810
‫Luego agregue la función

53
00:02:41,810 --> 00:02:46,123
‫de recopilación, tendremos acceso a ese evento en sí, ¿de acuerdo?

54
00:02:47,680 --> 00:02:49,500
‫Entonces, la tercera cosa que

55
00:02:49,500 --> 00:02:52,843
‫hacemos es decir evento. preventDefault.

56
00:02:56,770 --> 00:02:57,750
‫¿Okey?

57
00:02:57,750 --> 00:03:01,580
‫Entonces esto evita que el formulario cargue cualquier otra página.

58
00:03:01,580 --> 00:03:03,925
‫A continuación, obtengamos el valor del

59
00:03:03,925 --> 00:03:06,740
‫correo electrónico y la contraseña que ingresa el usuario.

60
00:03:06,740 --> 00:03:10,485
‫Y estos son, en este elemento, con el correo electrónico de

61
00:03:10,485 --> 00:03:13,310
‫identificación y la contraseña de identificación, ¿de acuerdo?

62
00:03:13,310 --> 00:03:15,020
‫Entonces, estos dos

63
00:03:15,020 --> 00:03:18,114
‫campos de entrada y obtengamos también estos datos.

64
00:03:18,114 --> 00:03:21,364
‫(escribiendo en un teclado) Así que documento,

65
00:03:24,933 --> 00:03:26,440
‫obtenga el elemento

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

67
00:03:29,310 --> 00:03:32,230
‫Correo electrónico, y luego usamos la propiedad de

68
00:03:32,230 --> 00:03:34,670
‫valor para alcanzar ese valor.

69
00:03:34,670 --> 00:03:37,893
‫No nodeValue, solo valor.

70
00:03:39,520 --> 00:03:42,930
‫Dupliquemos esta línea, ¿de acuerdo?

71
00:03:42,930 --> 00:03:45,330
‫Entonces, ahora hagamos el inicio de

72
00:03:45,330 --> 00:03:47,940
‫sesión real en una función separada, ¿de acuerdo?

73
00:03:47,940 --> 00:03:49,880
‫Ahora llegamos aquí, este

74
00:03:49,880 --> 00:03:53,040
‫error de eslint y eso es nuevamente

75
00:03:53,040 --> 00:03:56,450
‫porque tenemos eslint solo configurado para no código JS.

76
00:03:56,450 --> 00:03:59,963
‫Así que, en realidad, deshabilitemos eso como lo hicimos aquí.

77
00:04:01,340 --> 00:04:03,233
‫Así que coge este fragmento de código.

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

79
00:04:08,630 --> 00:04:09,910
‫Y ahora, como decía,

80
00:04:09,910 --> 00:04:12,123
‫creemos esa función de inicio de sesión.

81
00:04:15,270 --> 00:04:16,370
‫Así y así,

82
00:04:17,380 --> 00:04:19,120
‫y esta función va a aceptar un

83
00:04:19,120 --> 00:04:20,520
‫correo electrónico y una contraseña.

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

85
00:04:25,770 --> 00:04:29,080
‫que nada, veamos si este código realmente funciona.

86
00:04:29,080 --> 00:04:30,533
‫Así que vamos a alertar,

87
00:04:31,560 --> 00:04:33,740
‫así que básicamente crea una ventana de alerta.

88
00:04:33,740 --> 00:04:36,563
‫Y con este correo electrónico y contraseña.

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

90
00:04:42,920 --> 00:04:45,710
‫Ahora, por supuesto, también debemos volver a

91
00:04:45,710 --> 00:04:49,300
‫llamar a esta función con el correo electrónico y la contraseña.

92
00:04:49,300 --> 00:04:54,300
‫Y finalmente, también debemos incluir este archivo de inicio de

93
00:04:54,600 --> 00:04:58,370
‫sesión en nuestra plantilla base, ¿de acuerdo?

94
00:04:58,370 --> 00:05:00,600
‫Y nuevamente, como estaba diciendo al principio,

95
00:05:00,600 --> 00:05:02,340
‫en el siguiente video,

96
00:05:02,340 --> 00:05:04,640
‫vamos a agrupar todo este código de front-end

97
00:05:04,640 --> 00:05:06,423
‫aquí en un gran archivo JavaScript.

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

99
00:05:08,653 --> 00:05:10,810
‫Eso es mucho mejor para el

100
00:05:10,810 --> 00:05:14,143
‫rendimiento y también es una mejor experiencia de desarrollador para nosotros.

101
00:05:15,250 --> 00:05:18,330
‫De todos modos, esto debería estar funcionando ahora.

102
00:05:18,330 --> 00:05:20,093
‫Recarguemos esta página aquí.

103
00:05:25,783 --> 00:05:27,620
‫Entonces tengo que completar, validar aquí,

104
00:05:27,620 --> 00:05:30,563
‫de todos modos, Chrome ni siquiera me permitirá enviar el formulario.

105
00:05:32,920 --> 00:05:35,100
‫Muy bien, aquí recibimos nuestra alerta

106
00:05:35,100 --> 00:05:37,020
‫con el correo electrónico que

107
00:05:37,020 --> 00:05:38,860
‫acabamos de ingresar y luego

108
00:05:38,860 --> 00:05:40,080
‫la contraseña,

109
00:05:40,080 --> 00:05:42,983
‫supongo, no aparece porque especificamos dos valores allí.

110
00:05:46,140 --> 00:05:50,470
‫Entonces, en su lugar, especifiquemos un objeto aquí y veamos

111
00:05:50,470 --> 00:05:52,020
‫si funciona nuevamente.

112
00:05:54,072 --> 00:05:57,322
‫(escribiendo en un teclado) Bueno, supongo que intenta

113
00:06:03,770 --> 00:06:05,410
‫convertir ese objeto

114
00:06:05,410 --> 00:06:07,473
‫en una cadena aquí.

115
00:06:08,400 --> 00:06:11,530
‫Está bien, pero aquí realmente no importa.

116
00:06:11,530 --> 00:06:15,573
‫Por lo general, estoy más acostumbrado a usar Console. log en lugar de alert.

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

118
00:06:17,900 --> 00:06:20,960
‫Pero de todos modos, estoy seguro de que ahora está funcionando aquí.

119
00:06:20,960 --> 00:06:23,783
‫Y ahora sigamos adelante y creemos esta función.

120
00:06:24,640 --> 00:06:28,910
‫Entonces, para hacer estas solicitudes HTTP para el inicio

121
00:06:28,910 --> 00:06:29,890
‫de sesión,

122
00:06:29,890 --> 00:06:34,130
‫usaremos una biblioteca muy popular llamada Axios, ¿de acuerdo?

123
00:06:34,130 --> 00:06:36,430
‫Y en el siguiente video vamos

124
00:06:36,430 --> 00:06:39,460
‫a descargar esta biblioteca de NPM y agruparla con

125
00:06:39,460 --> 00:06:41,000
‫todos nuestros otros

126
00:06:41,000 --> 00:06:43,713
‫scripts, pero por ahora, usémosla desde un CDN.

127
00:06:45,240 --> 00:06:48,860
‫Entonces, vamos a Google Axios

128
00:06:48,860 --> 00:06:52,260
‫CDN, ¿de acuerdo?

129
00:06:52,260 --> 00:06:55,513
‫Luego, continúe y copie este aquí, y

130
00:06:57,650 --> 00:06:59,403
‫luego, en nuestro

131
00:07:00,610 --> 00:07:04,583
‫script base, pongámoslo aquí en el primero, ¿de acuerdo?

132
00:07:06,230 --> 00:07:07,300
‫Entonces, esto

133
00:07:07,300 --> 00:07:10,080
‫expondrá un objeto Axios al alcance global, que

134
00:07:10,080 --> 00:07:14,500
‫luego podemos usar en nuestra función de inicio de sesión, ¿de acuerdo?

135
00:07:14,500 --> 00:07:17,123
‫Entonces ahora podemos decir Axios, y

136
00:07:18,000 --> 00:07:21,003
‫luego pasar las opciones para nuestra solicitud.

137
00:07:22,320 --> 00:07:26,380
‫Primero que nada, digamos que estamos haciendo una post-solicitud.

138
00:07:26,380 --> 00:07:28,593
‫Entonces, necesitamos una URL.

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

140
00:07:31,140 --> 00:07:33,313
‫Así que obtengamos eso de Postman.

141
00:07:39,530 --> 00:07:41,543
‫Entonces, esta es nuestra URL aquí.

142
00:07:43,250 --> 00:07:45,040
‫Y también, por

143
00:07:45,040 --> 00:07:47,853
‫supuesto, agregaremos el host allí.

144
00:07:49,400 --> 00:07:52,910
‫Entonces aquí, por supuesto, es http y luego el

145
00:07:55,440 --> 00:07:57,093
‫host local básicamente.

146
00:08:01,250 --> 00:08:02,530
‫Y, entonces, esta

147
00:08:02,530 --> 00:08:05,260
‫es nuestra entrada de inicio de sesión, y

148
00:08:05,260 --> 00:08:07,490
‫ahora necesitamos especificar los datos que

149
00:08:07,490 --> 00:08:10,473
‫estamos enviando junto con la solicitud en el cuerpo.

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

151
00:08:13,873 --> 00:08:17,870
‫Y eso es correo electrónico: correo electrónico.

152
00:08:17,870 --> 00:08:21,600
‫Y así, como ya sabe, podemos eliminar este correo electrónico.

153
00:08:21,600 --> 00:08:22,433
‫¿Okey?

154
00:08:22,433 --> 00:08:24,810
‫Entonces se llama correo electrónico aquí,

155
00:08:24,810 --> 00:08:29,210
‫porque nuestro punto final espera que los datos se llamen correo electrónico, ¿verdad?

156
00:08:29,210 --> 00:08:31,250
‫Entonces eso es lo que tenemos aquí en el cuerpo.

157
00:08:31,250 --> 00:08:33,997
‫Necesitamos especificar una propiedad llamada correo electrónico

158
00:08:33,997 --> 00:08:35,790
‫y otra llamada contraseña.

159
00:08:35,790 --> 00:08:37,830
‫Y eso es exactamente lo que

160
00:08:37,830 --> 00:08:41,630
‫estamos haciendo aquí, pero luego tiene el mismo nombre que este parámetro aquí.

161
00:08:41,630 --> 00:08:44,030
‫Entonces, basta con decir correo electrónico

162
00:08:45,000 --> 00:08:48,123
‫y lo mismo se aplica a la contraseña.

163
00:08:49,720 --> 00:08:50,760
‫¿Okey?

164
00:08:50,760 --> 00:08:53,350
‫Ahora, Axios aquí devuelve una promesa y,

165
00:08:53,350 --> 00:08:55,890
‫por lo tanto, usemos una

166
00:08:55,890 --> 00:08:59,210
‫espera única para esperar a que vuelva ese valor.

167
00:08:59,210 --> 00:09:04,210
‫Así que espere aquí, y luego asíncrono aquí.

168
00:09:05,110 --> 00:09:07,950
‫Ahora, tenga en cuenta que este es un código orientado

169
00:09:07,950 --> 00:09:09,750
‫al cliente y solo los

170
00:09:09,750 --> 00:09:12,290
‫navegadores más modernos pueden ejecutar una única función de

171
00:09:12,290 --> 00:09:15,573
‫espera, pero en este curso, realmente no voy a entrar en eso.

172
00:09:17,130 --> 00:09:18,310
‫¿Okey?

173
00:09:18,310 --> 00:09:22,510
‫De todos modos, guardemos el resultado de esta esperando la

174
00:09:22,510 --> 00:09:25,640
‫promesa en la variable de resultado.

175
00:09:25,640 --> 00:09:28,623
‫Y luego, para ver el resultado,

176
00:09:30,000 --> 00:09:33,453
‫digamos consola. resultado del registro.

177
00:09:34,500 --> 00:09:35,333
‫¿Okey?

178
00:09:35,333 --> 00:09:37,870
‫Ahora, una cosa que realmente me gusta de Axios

179
00:09:37,870 --> 00:09:40,240
‫es el hecho de que arrojará un

180
00:09:40,240 --> 00:09:43,780
‫error cada vez que recibamos un error de nuestra entrada de API.

181
00:09:43,780 --> 00:09:46,480
‫Entonces, digamos que hay una contraseña incorrecta y,

182
00:09:46,480 --> 00:09:48,980
‫por lo tanto, el servidor enviará un 403

183
00:09:48,980 --> 00:09:50,610
‫y, básicamente, un error.

184
00:09:50,610 --> 00:09:52,768
‫Por tanto, siempre que haya

185
00:09:52,768 --> 00:09:55,290
‫un error, Axios también lo activará.

186
00:09:55,290 --> 00:09:58,680
‫Y eso es muy útil porque, con eso, ahora podemos

187
00:09:58,680 --> 00:10:00,763
‫usar un bloque try catch.

188
00:10:02,660 --> 00:10:03,493
‫¿Okey?

189
00:10:03,493 --> 00:10:05,840
‫Básicamente, para hacer un poco de manejo de errores aquí

190
00:10:05,840 --> 00:10:07,173
‫en el lado del cliente.

191
00:10:08,750 --> 00:10:09,770
‫Entonces, por ejemplo,

192
00:10:09,770 --> 00:10:12,090
‫cuando el usuario ha iniciado sesión correctamente,

193
00:10:12,090 --> 00:10:14,375
‫entonces desea mostrar algún mensaje que diga

194
00:10:14,375 --> 00:10:16,470
‫eso, y tal vez alguna otra

195
00:10:16,470 --> 00:10:19,540
‫lógica, pero si no, bueno, entonces vamos a ingresar al

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

197
00:10:21,770 --> 00:10:26,093
‫captura, y luego podemos , realice alguna otra acción basada en el error.

198
00:10:27,022 --> 00:10:30,272
‫(escribiendo en un teclado) Entonces, echemos un

199
00:10:31,670 --> 00:10:34,023
‫vistazo al error también.

200
00:10:37,480 --> 00:10:42,120
‫Y solo para asegurarme, también quiero registrar el correo electrónico y la

201
00:10:43,200 --> 00:10:45,253
‫contraseña en la consola.

202
00:10:49,130 --> 00:10:51,583
‫Entonces, intentemos eso aquí.

203
00:10:52,430 --> 00:10:53,663
‫Recargue nuestra

204
00:10:55,249 --> 00:10:58,499
‫página, (escribiendo en un teclado) Y estoy ingresando

205
00:11:02,240 --> 00:11:05,160
‫una contraseña incorrecta ahora, ¿de acuerdo?

206
00:11:05,160 --> 00:11:06,993
‫Prueba uno, dos, tres, cuatro, cinco.

207
00:11:09,100 --> 00:11:12,070
‫Echemos un vistazo a nuestra consola aquí también.

208
00:11:12,070 --> 00:11:15,740
‫Y obtenemos este error aquí desde mapbox, js, pero no

209
00:11:15,740 --> 00:11:17,330
‫se preocupe por eso.

210
00:11:17,330 --> 00:11:19,430
‫Lo arreglaremos un poco más tarde.

211
00:11:21,848 --> 00:11:24,890
‫Pero por ahora, echemos un vistazo a lo que sucede aquí.

212
00:11:24,890 --> 00:11:28,900
‫Y aquí tenemos un buen error, ¿de acuerdo?

213
00:11:28,900 --> 00:11:32,670
‫Y entonces, en realidad, cuando tenemos que echar un vistazo aquí es

214
00:11:32,670 --> 00:11:34,253
‫un error. respuesta.

215
00:11:36,630 --> 00:11:38,910
‫Y luego señalar los datos.

216
00:11:38,910 --> 00:11:42,550
‫Bien, y encontrará esto aquí en la documentación de Axios en caso

217
00:11:42,550 --> 00:11:45,113
‫de que se esté preguntando de dónde viene.

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

219
00:11:49,290 --> 00:11:52,140
‫Permítanme seguir adelante y copiar este correo

220
00:11:53,450 --> 00:11:56,713
‫electrónico porque no es tan bueno escribirlo siempre manualmente.

221
00:12:00,200 --> 00:12:04,263
‫Y ahora, de hecho, obtenemos aquí un error muy bien formateado.

222
00:12:05,440 --> 00:12:06,273
‫¿Okey?

223
00:12:06,273 --> 00:12:08,810
‫Y este es básicamente exactamente el código

224
00:12:08,810 --> 00:12:11,310
‫jsen que enviamos desde nuestro servidor.

225
00:12:11,310 --> 00:12:12,143
‫¿Derecha?

226
00:12:12,143 --> 00:12:13,320
‫Entonces, esto es exactamente

227
00:12:13,320 --> 00:12:15,220
‫lo mismo que hemos estado viendo en Postman.

228
00:12:15,220 --> 00:12:20,220
‫Entonces obtenemos nuestro error completo, el mensaje y también la pila.

229
00:12:20,270 --> 00:12:23,420
‫Y entonces vemos que probablemente no proporcionamos el correo

230
00:12:23,420 --> 00:12:26,523
‫electrónico y la contraseña correctamente por alguna razón.

231
00:12:27,550 --> 00:12:30,330
‫Así que retrocedamos, echemos un vistazo.

232
00:12:30,330 --> 00:12:34,230
‫Oh, hice algo extraño aquí donde pasé un objeto

233
00:12:34,230 --> 00:12:36,230
‫con el correo electrónico

234
00:12:36,230 --> 00:12:38,003
‫y la contraseña.

235
00:12:38,980 --> 00:12:41,060
‫Y creo que eso es de antes,

236
00:12:41,060 --> 00:12:42,900
‫cuando trató de hacer esa

237
00:12:42,900 --> 00:12:45,670
‫alerta y supongo que lo hice en el lugar equivocado.

238
00:12:45,670 --> 00:12:49,570
‫Y es por eso que en realidad vimos undefined aquí.

239
00:12:49,570 --> 00:12:51,260
‫Y aquí tenemos este objeto.

240
00:12:51,260 --> 00:12:53,820
‫Básicamente, el correo electrónico era todo este objeto

241
00:12:53,820 --> 00:12:56,023
‫y la contraseña no estaba definida.

242
00:12:58,290 --> 00:12:59,123
‫¿Okey?

243
00:12:59,123 --> 00:13:01,400
‫Así que ahora, esto debería solucionarlo,

244
00:13:01,400 --> 00:13:02,613
‫vuelva a cargarlo.

245
00:13:07,930 --> 00:13:10,760
‫Ah, ahora obtenemos este error correcto que

246
00:13:10,760 --> 00:13:12,500
‫realmente estábamos esperando.

247
00:13:12,500 --> 00:13:15,580
‫Entonces ahora es un correo electrónico o

248
00:13:15,580 --> 00:13:18,880
‫contraseña incorrectos porque especifiqué una contraseña incorrecta, ¿de acuerdo?

249
00:13:18,880 --> 00:13:21,441
‫Pero ahora, eliminemos los cinco para

250
00:13:21,441 --> 00:13:24,973
‫luego probar uno, dos, tres, cuatro, debería ser correcto.

251
00:13:25,860 --> 00:13:28,010
‫Entonces, iniciemos sesión

252
00:13:28,010 --> 00:13:31,810
‫y ahora obtenemos una respuesta de 200.

253
00:13:31,810 --> 00:13:33,253
‫Entonces, uno exitoso.

254
00:13:34,290 --> 00:13:35,890
‫Así que abramos esto

255
00:13:35,890 --> 00:13:39,410
‫y lo que realmente nos interesa son los datos.

256
00:13:39,410 --> 00:13:42,030
‫Así que básicamente respuesta. data porque aquí

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

258
00:13:43,260 --> 00:13:46,960
‫donde se encuentra nuestra respuesta jsen.

259
00:13:46,960 --> 00:13:48,653
‫Entonces aquí, obtenemos

260
00:13:50,210 --> 00:13:55,210
‫estos datos aquí, y también obtenemos el estado y el token.

261
00:13:55,410 --> 00:13:59,030
‫Y entonces, este es nuestro token web jsen correcto correspondiente

262
00:13:59,030 --> 00:14:01,550
‫a este usuario que inició sesión.

263
00:14:01,550 --> 00:14:03,170
‫Ahora bien, lo realmente interesante

264
00:14:03,170 --> 00:14:05,400
‫es echar un vistazo a nuestras cookies.

265
00:14:05,400 --> 00:14:07,540
‫Y lo hacemos en Google Chrome al

266
00:14:07,540 --> 00:14:09,560
‫menos haciendo clic en este

267
00:14:09,560 --> 00:14:12,180
‫icono aquí y luego aquí abajo, tienes las cookies.

268
00:14:12,180 --> 00:14:14,900
‫Y también dice que nuestra conexión no es

269
00:14:14,900 --> 00:14:15,940
‫segura y

270
00:14:15,940 --> 00:14:19,330
‫eso es simplemente porque no estamos usando HTTPS en este

271
00:14:19,330 --> 00:14:20,920
‫momento, pero eso no importa.

272
00:14:20,920 --> 00:14:23,530
‫Lo que importa aquí es que ahora

273
00:14:24,630 --> 00:14:27,620
‫tenemos esta cookie y, de hecho, se llama

274
00:14:27,620 --> 00:14:31,060
‫jsen web token, y tiene exactamente el jsen web token

275
00:14:31,060 --> 00:14:32,203
‫que vemos aquí.

276
00:14:33,360 --> 00:14:36,620
‫Entonces, esto es solo el final, básicamente, de la

277
00:14:36,620 --> 00:14:40,710
‫cadena, así que ven que esto es igual a lo que tenemos aquí.

278
00:14:40,710 --> 00:14:43,560
‫Y es esta cookie aquí, que realmente

279
00:14:43,560 --> 00:14:46,030
‫nos permitirá construir toda esta autenticación.

280
00:14:46,030 --> 00:14:49,000
‫Nuevamente, porque el navegador no enviará esta cookie

281
00:14:49,000 --> 00:14:51,470
‫junto con cada nueva solicitud.

282
00:14:51,470 --> 00:14:55,070
‫Y déjame mostrarte en nuestro back-end.

283
00:14:55,070 --> 00:14:59,930
‫Así que volvamos allí y vayamos a la aplicación. js.

284
00:14:59,930 --> 00:15:02,320
‫Y ahora estamos de vuelta en nuestra nota, o

285
00:15:02,320 --> 00:15:03,943
‫de hecho en nuestro código Express.

286
00:15:05,320 --> 00:15:07,360
‫Ahora, para poder acceder realmente a

287
00:15:07,360 --> 00:15:09,690
‫las cookies que se encuentran en nuestra solicitud.

288
00:15:09,690 --> 00:15:13,050
‫En Express, necesitamos instalar cierto middleware.

289
00:15:13,050 --> 00:15:16,630
‫Y entonces necesitamos instalar eso desde un paquete NPM.

290
00:15:16,630 --> 00:15:19,960
‫Y eso es de nuevo, ven a nuestra

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

292
00:15:22,660 --> 00:15:25,313
‫luego NPM instala el analizador de cookies.

293
00:15:26,210 --> 00:15:27,043
‫¿Okey?

294
00:15:27,043 --> 00:15:29,380
‫Entonces, básicamente, este paquete analizará todas las

295
00:15:29,380 --> 00:15:31,653
‫cookies de la solicitud 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
‫Y ahora usémoslo cerca de este analizador corporal.

299
00:15:54,770 --> 00:15:56,003
‫¿Okey?

300
00:15:56,003 --> 00:15:57,050
‫Entonces estos dos son muy similares.

301
00:15:57,050 --> 00:15:59,750
‫Este primero analiza los datos del cuerpo

302
00:15:59,750 --> 00:16:03,070
‫y el segundo analiza los datos de las cookies.

303
00:16:03,070 --> 00:16:06,600
‫Y ahora, si en este middleware aquí,

304
00:16:06,600 --> 00:16:09,803
‫podemos usar request. galletas.

305
00:16:11,470 --> 00:16:13,080
‫Y ahora, para cada

306
00:16:13,080 --> 00:16:16,593
‫solicitud, siempre mostraremos todas las cookies en la consola.

307
00:16:19,360 --> 00:16:22,440
‫Entonces, si ahora volvemos a cargar esta página, o

308
00:16:22,440 --> 00:16:24,490
‫realmente cualquier otra página, permítanme

309
00:16:24,490 --> 00:16:27,283
‫abrir esta aquí en una nueva pestaña.

310
00:16:29,780 --> 00:16:33,420
‫Entonces, si ahora regresamos, deberíamos ver esa cookie aquí.

311
00:16:33,420 --> 00:16:35,820
‫Y, de hecho, aquí está.

312
00:16:35,820 --> 00:16:38,810
‫Entonces, esta es la cookie que se

313
00:16:38,810 --> 00:16:42,960
‫envió a nuestra aplicación al cargar esa página en el navegador.

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

315
00:16:45,710 --> 00:16:49,710
‫vuelvo a hacer eso, verás otro, ¿verdad?

316
00:16:49,710 --> 00:16:51,120
‫Asi que aqui esta.

317
00:16:51,120 --> 00:16:54,790
‫Y ahora podemos usar esto para proteger nuestra ruta.

318
00:16:54,790 --> 00:16:56,863
‫Muy bien, probemos eso.

319
00:16:58,860 --> 00:16:59,693
‫¿Okey?

320
00:16:59,693 --> 00:17:01,070
‫Pero antes de

321
00:17:01,070 --> 00:17:03,080
‫que podamos hacer eso, necesitamos en

322
00:17:03,080 --> 00:17:05,770
‫nuestro controlador apagado para agregar eso aquí también.

323
00:17:05,770 --> 00:17:08,840
‫Entonces, en este momento, solo estamos leyendo el token web

324
00:17:08,840 --> 00:17:10,503
‫jsen del encabezado de autorización.

325
00:17:11,390 --> 00:17:12,223
‫¿Derecha?

326
00:17:12,223 --> 00:17:15,230
‫Y solo si comienzan con este portador, ¿de acuerdo?

327
00:17:15,230 --> 00:17:17,170
‫Así que para el token al portador.

328
00:17:17,170 --> 00:17:19,640
‫Pero ahora, básicamente, también queremos leer el

329
00:17:19,640 --> 00:17:21,970
‫token web jsen de una cookie.

330
00:17:21,970 --> 00:17:25,633
‫Entonces, lo que podemos hacer aquí es básicamente un otro si, así que

331
00:17:27,870 --> 00:17:30,860
‫si no hubiera un token en el encabezado de autorización,

332
00:17:30,860 --> 00:17:33,333
‫bueno, echemos un vistazo a las cookies.

333
00:17:34,170 --> 00:17:36,807
‫Así que solicítalo. galletas. token web jsen.

334
00:17:36,807 --> 00:17:39,520
‫Entonces JWT, que es el nombre de la

335
00:17:39,520 --> 00:17:42,550
‫cookie y, por lo tanto, en el objeto de

336
00:17:42,550 --> 00:17:45,110
‫cookies, habrá una propiedad llamada JWT.

337
00:17:45,110 --> 00:17:47,137
‫Así que esto de aquí, ¿verdad?

338
00:17:49,120 --> 00:17:51,280
‫Entonces, si esto existe,

339
00:17:51,280 --> 00:17:55,080
‫bueno, entonces el token debería ser exactamente eso.

340
00:17:55,080 --> 00:17:58,040
‫Así que solicítalo. galletas. jwt.

341
00:17:58,040 --> 00:17:58,873
‫Bueno.

342
00:18:00,117 --> 00:18:00,950
‫Y ahora, con esto, también podemos

343
00:18:02,085 --> 00:18:03,593
‫autenticar a los usuarios en función de los tokens enviados a través

344
00:18:05,590 --> 00:18:06,840
‫de cookies y no solo en el encabezado de autorización.

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

346
00:18:10,400 --> 00:18:13,210
‫Y solo para probar esto, protejamos una de

347
00:18:13,210 --> 00:18:15,780
‫nuestras rutas aquí en la vista.

348
00:18:15,780 --> 00:18:16,613
‫Y lo haré con esta página de detalles del recorrido, ¿de acuerdo?

349
00:18:16,613 --> 00:18:18,580
‫Así que eso es

350
00:18:18,580 --> 00:18:22,610
‫solo para probar porque, por supuesto, no tiene mucho sentido,

351
00:18:22,610 --> 00:18:27,170
‫pero solo quería mostrarles que, tal como está ahora, nuestro inicio

352
00:18:27,170 --> 00:18:29,460
‫de sesión ya está funcionando.

353
00:18:29,460 --> 00:18:31,920
‫Así que importemos el authController aquí.

354
00:18:31,920 --> 00:18:33,800
‫(escribiendo en un teclado) Y

355
00:18:33,800 --> 00:18:36,723
‫luego, como antes, edite aquí en esta ruta.

356
00:18:37,860 --> 00:18:39,993
‫Entonces authController. proteger.

357
00:18:41,708 --> 00:18:44,958
‫Y esto no es nada nuevo en este momento.

358
00:18:49,884 --> 00:18:54,860
‫Y luego, solo si el usuario está conectado, podemos

359
00:18:54,860 --> 00:18:58,770
‫ir a getTour.

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

361
00:19:00,930 --> 00:19:03,200
‫Entonces, lo que voy a hacer ahora es básicamente eliminar esta cookie primero

362
00:19:03,200 --> 00:19:04,993
‫solo para mostrarle lo que sucede cuando un usuario que

363
00:19:06,400 --> 00:19:07,233
‫no ha iniciado

364
00:19:08,460 --> 00:19:09,710
‫sesión intenta acceder a esa ruta ahora.

365
00:19:09,710 --> 00:19:12,450
‫Entonces, básicamente, si eliminamos esta cookie, es como cerrar la

366
00:19:12,450 --> 00:19:13,850
‫sesión del usuario, ¿verdad?

367
00:19:13,850 --> 00:19:17,293
‫Entonces, si echa un vistazo a nuestros

368
00:19:18,180 --> 00:19:20,950
‫recorridos, entonces debería verse bien.

369
00:19:20,950 --> 00:19:24,563
‫Pero, si ahora intentamos acceder a esta

370
00:19:25,730 --> 00:19:28,970
‫página, deberíamos obtener un error.

371
00:19:28,970 --> 00:19:30,653
‫Y de hecho, ahí está, diciendo que no ha iniciado sesión.

372
00:19:31,700 --> 00:19:34,090
‫Lo suficientemente justo.

373
00:19:34,090 --> 00:19:35,580
‫Así que retrocedamos e iniciemos sesión.

374
00:19:35,580 --> 00:19:39,443
‫¿Okey?

375
00:19:40,640 --> 00:19:41,550
‫Así que, aquí vamos.

376
00:19:41,550 --> 00:19:44,903
‫Y luego, en el futuro, por supuesto, también implementaremos algunas ventanas de alerta

377
00:19:50,833 --> 00:19:51,666
‫aquí y

378
00:19:51,666 --> 00:19:52,610
‫todas esas cosas buenas.

379
00:19:52,610 --> 00:19:53,550
‫Pero por ahora, nuevamente, hagámoslo funcionar.

380
00:19:53,550 --> 00:19:55,570
‫Y entonces ves que volvemos

381
00:19:55,570 --> 00:19:58,800
‫a tener nuestra linda galleta aquí, ¿de acuerdo?

382
00:19:58,800 --> 00:20:02,380
‫Entonces, ahora intentemos acceder a esta ruta protegida.

383
00:20:02,380 --> 00:20:04,240
‫Y de hecho, ahora funciona.

384
00:20:04,240 --> 00:20:08,550
‫Fantástico, eso ya es genial, ¿verdad?

385
00:20:08,550 --> 00:20:12,163
‫Ahora, idealmente, cuando un usuario está conectado, no queremos

386
00:20:13,370 --> 00:20:16,050
‫mostrar estos botones aquí, sino

387
00:20:16,050 --> 00:20:20,250
‫como un menú de usuario o una imagen del usuario.

388
00:20:20,250 --> 00:20:22,800
‫Entonces, básicamente, muestra

389
00:20:22,800 --> 00:20:26,770
‫que ese usuario está realmente conectado, ¿verdad?

390
00:20:26,770 --> 00:20:31,240
‫Así que hagámoslo en el siguiente video, junto con unir todos

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

392
00:20:32,650 --> 00:20:35,545
‫en el front-end como estaba explicando anteriormente.

393
00:20:35,545 --> 00:20:38,090
‫Así que no espere, pasemos directamente al siguiente.

394
00:20:38,090 --> 00:20:41,220
‫Te veo allí.