1
00:00:01,160 --> 00:00:04,610
‫-: Agora é finalmente hora de usar a API de

2
00:00:04,610 --> 00:00:06,830
‫login que criamos nas seções

3
00:00:06,830 --> 00:00:09,100
‫anteriores e há uma tonelada de coisas

4
00:00:09,100 --> 00:00:12,880
‫a fazer aqui para fazer o front-end interagir com o back-end.

5
00:00:12,880 --> 00:00:15,680
‫E então estamos fazendo isso em palestras separadas.

6
00:00:15,680 --> 00:00:17,833
‫De qualquer forma, vamos começar agora.

7
00:00:19,740 --> 00:00:21,570
‫E é assim que vai funcionar.

8
00:00:21,570 --> 00:00:25,180
‫Então, vamos permitir que os usuários façam login em nosso

9
00:00:25,180 --> 00:00:28,990
‫site fazendo uma solicitação HTTP ou uma chamada ATEX, como

10
00:00:28,990 --> 00:00:31,580
‫muitas pessoas também gostam de chamá-la.

11
00:00:31,580 --> 00:00:35,890
‫E estamos fazendo essa solicitação HTTP para o ponto de extremidade da API de

12
00:00:35,890 --> 00:00:38,340
‫login que implementamos antes de usar os

13
00:00:38,340 --> 00:00:41,820
‫dados que o usuário fornece neste formulário que temos aqui.

14
00:00:41,820 --> 00:00:45,614
‫Portanto, lembre-se de que nossa API enviará de volta

15
00:00:45,614 --> 00:00:49,010
‫um cookie que é automaticamente armazenado no navegador.

16
00:00:49,010 --> 00:00:51,650
‫E também é enviado de volta

17
00:00:51,650 --> 00:00:53,990
‫automaticamente com cada solicitação subsequente.

18
00:00:53,990 --> 00:00:56,950
‫E como você verá, esta é uma

19
00:00:56,950 --> 00:01:00,040
‫chave fundamental para que nosso sistema de autenticação funcione.

20
00:01:00,040 --> 00:01:01,940
‫Mas de qualquer forma,

21
00:01:01,940 --> 00:01:04,518
‫como estamos fazendo essa solicitação HTTP no

22
00:01:04,518 --> 00:01:09,220
‫navegador, vamos, é claro, mais uma vez, trabalhar no lado do cliente.

23
00:01:09,220 --> 00:01:10,900
‫De qualquer forma, como estamos

24
00:01:10,900 --> 00:01:13,570
‫fazendo uma solicitação HTTP no navegador, ainda estaremos

25
00:01:13,570 --> 00:01:17,010
‫trabalhando no código de script de jobs do lado do cliente.

26
00:01:17,010 --> 00:01:20,410
‫Assim como fizemos com a implementação do Mapbox.

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

28
00:01:21,570 --> 00:01:24,430
‫Portanto, vamos agora criar um novo arquivo aqui.

29
00:01:24,430 --> 00:01:29,063
‫E isso está em público, js, e novo arquivo, que

30
00:01:30,190 --> 00:01:33,030
‫chamarei de login. js e no

31
00:01:33,960 --> 00:01:36,380
‫próximo vídeo, vamos agrupar todos esses

32
00:01:36,380 --> 00:01:38,260
‫arquivos JavaScript separados que

33
00:01:38,260 --> 00:01:40,630
‫estamos criando aqui para o front-end

34
00:01:40,630 --> 00:01:42,970
‫juntos em um grande pacote.

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

36
00:01:43,820 --> 00:01:47,240
‫Mas, por enquanto, vamos nos concentrar apenas em fazer

37
00:01:47,240 --> 00:01:49,510
‫essa funcionalidade de login funcionar.

38
00:01:49,510 --> 00:01:52,820
‫Mas de qualquer forma, vamos começar adicionando um ouvinte

39
00:01:52,820 --> 00:01:57,139
‫de evento, ouvindo o evento de envio em nosso formulário de login, certo?

40
00:01:57,139 --> 00:02:01,260
‫Portanto, nosso formulário de login tem essa classe de formulário aqui.

41
00:02:01,260 --> 00:02:04,307
‫Ok, agora vamos selecionar este elemento

42
00:02:04,307 --> 00:02:07,820
‫e, em seguida, ouvir o evento de envio.

43
00:02:07,820 --> 00:02:10,430
‫Espero que você esteja familiarizado com esse tipo de

44
00:02:10,430 --> 00:02:12,510
‫lógica no JavaScript do lado do cliente.

45
00:02:12,510 --> 00:02:14,810
‫E, com sorte, isso não é novidade para você.

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

47
00:02:20,260 --> 00:02:23,063
‫para selecionar com base na classe.

48
00:02:24,940 --> 00:02:27,040
‫Adicione então esse nome

49
00:02:27,040 --> 00:02:32,040
‫de Seletor e agora adicione EventListener, ouvindo o evento de envio.

50
00:02:32,940 --> 00:02:35,740
‫Então, basicamente, um evento que o navegador irá

51
00:02:35,740 --> 00:02:39,363
‫disparar sempre que um usuário clicar no botão enviar do formulário.

52
00:02:40,220 --> 00:02:41,810
‫Adicione então na

53
00:02:41,810 --> 00:02:46,123
‫função collect, nós teremos acesso a esse evento em si, ok?

54
00:02:47,680 --> 00:02:49,500
‫E então a terceira coisa que

55
00:02:49,500 --> 00:02:52,843
‫realmente fazemos é dizer evento. preventDefault.

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

57
00:02:57,750 --> 00:03:01,580
‫Portanto, isso evita que o formulário carregue qualquer outra página.

58
00:03:01,580 --> 00:03:03,925
‫Em seguida, vamos obter o e-mail

59
00:03:03,925 --> 00:03:06,740
‫e o valor da senha que o usuário inseriu.

60
00:03:06,740 --> 00:03:10,485
‫E assim estão, neste elemento, com o e-mail do ID,

61
00:03:10,485 --> 00:03:13,310
‫e a senha do ID, ok?

62
00:03:13,310 --> 00:03:15,020
‫Então, esses dois campos

63
00:03:15,020 --> 00:03:18,114
‫de entrada e vamos obter esses dados também.

64
00:03:18,114 --> 00:03:21,364
‫(digitando em um teclado) Documente,

65
00:03:24,933 --> 00:03:26,440
‫obtenha elemento por

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

67
00:03:29,310 --> 00:03:32,230
‫E-mail, e então usamos a propriedade value para

68
00:03:32,230 --> 00:03:34,670
‫chegar a esse valor lá fora.

69
00:03:34,670 --> 00:03:37,893
‫Não nodeValue, apenas valor.

70
00:03:39,520 --> 00:03:42,930
‫Vamos duplicar essa linha, ok?

71
00:03:42,930 --> 00:03:45,330
‫E agora vamos fazer o

72
00:03:45,330 --> 00:03:47,940
‫login real em uma função separada, ok?

73
00:03:47,940 --> 00:03:49,880
‫Agora chegamos aqui, este

74
00:03:49,880 --> 00:03:53,040
‫erro eslint e isso de novo porque

75
00:03:53,040 --> 00:03:56,450
‫temos eslint configurado apenas para código não JS.

76
00:03:56,450 --> 00:03:59,963
‫E então vamos realmente desabilitar isso assim como fizemos aqui.

77
00:04:01,340 --> 00:04:03,233
‫Então, apenas pegue este pedaço de código.

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

79
00:04:08,630 --> 00:04:09,910
‫E agora, como eu

80
00:04:09,910 --> 00:04:12,123
‫estava dizendo, vamos criar essa função de login.

81
00:04:15,270 --> 00:04:16,370
‫Então e assim

82
00:04:17,380 --> 00:04:19,120
‫mesmo, e essa função vai aceitar

83
00:04:19,120 --> 00:04:20,520
‫um e-mail e uma senha.

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

85
00:04:25,770 --> 00:04:29,080
‫de tudo, vamos ver se esse código está realmente funcionando.

86
00:04:29,080 --> 00:04:30,533
‫Então, vamos alertar,

87
00:04:31,560 --> 00:04:33,740
‫então basicamente crie uma janela de alerta.

88
00:04:33,740 --> 00:04:36,563
‫E com este email e senha.

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

90
00:04:42,920 --> 00:04:45,710
‫Agora, é claro, também precisamos

91
00:04:45,710 --> 00:04:49,300
‫chamar essa função novamente com e-mail e senha.

92
00:04:49,300 --> 00:04:54,300
‫E, finalmente, também precisamos incluir este arquivo de

93
00:04:54,600 --> 00:04:58,370
‫login em nosso template base, certo?

94
00:04:58,370 --> 00:05:00,600
‫E novamente, como eu estava dizendo no

95
00:05:00,600 --> 00:05:02,340
‫início, no próximo vídeo,

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

97
00:05:04,640 --> 00:05:06,423
‫aqui em um grande arquivo JavaScript.

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

99
00:05:08,653 --> 00:05:10,810
‫Isso é muito melhor para o desempenho

100
00:05:10,810 --> 00:05:14,143
‫e também é uma melhor experiência de desenvolvedor para nós mesmos.

101
00:05:15,250 --> 00:05:18,330
‫De qualquer forma, isso agora deve estar funcionando.

102
00:05:18,330 --> 00:05:20,093
‫Vamos apenas recarregar esta página aqui.

103
00:05:25,783 --> 00:05:27,620
‫Então eu tenho que preencher, validar

104
00:05:27,620 --> 00:05:30,563
‫aqui, enfim, o Chrome nem vai permitir que eu envie o formulário.

105
00:05:32,920 --> 00:05:35,100
‫Tudo bem, então aqui recebemos nosso

106
00:05:35,100 --> 00:05:37,020
‫alerta com o e-mail que

107
00:05:37,020 --> 00:05:38,860
‫acabamos de inserir e a

108
00:05:38,860 --> 00:05:40,080
‫senha, eu

109
00:05:40,080 --> 00:05:42,983
‫acho, não aparece porque especificamos dois valores lá.

110
00:05:46,140 --> 00:05:50,470
‫Em vez disso, vamos especificar um objeto aqui e ver

111
00:05:50,470 --> 00:05:52,020
‫se funciona novamente.

112
00:05:54,072 --> 00:05:57,322
‫(digitando no teclado) Bem, acho que ele tenta

113
00:06:03,770 --> 00:06:05,410
‫converter esse objeto

114
00:06:05,410 --> 00:06:07,473
‫em uma string aqui.

115
00:06:08,400 --> 00:06:11,530
‫Ok, mas, isso realmente não importa aqui.

116
00:06:11,530 --> 00:06:15,573
‫Normalmente estou mais acostumado a usar o Console. log em vez de alerta.

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

118
00:06:17,900 --> 00:06:20,960
‫De qualquer forma, tenho certeza de que está funcionando agora aqui.

119
00:06:20,960 --> 00:06:23,783
‫E então vamos agora criar esta função.

120
00:06:24,640 --> 00:06:28,910
‫Então, para fazer essas requisições HTTP para o login,

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

122
00:06:29,890 --> 00:06:34,130
‫usar uma biblioteca muito popular chamada Axios, ok?

123
00:06:34,130 --> 00:06:36,430
‫E no próximo vídeo vamos baixar

124
00:06:36,430 --> 00:06:39,460
‫essa biblioteca do NPM e empacotá-la junto com todos

125
00:06:39,460 --> 00:06:41,000
‫os nossos outros scripts,

126
00:06:41,000 --> 00:06:43,713
‫mas por enquanto, vamos usá-la de um CDN.

127
00:06:45,240 --> 00:06:48,860
‫Então, vamos apenas Google

128
00:06:48,860 --> 00:06:52,260
‫Axios CDN, certo?

129
00:06:52,260 --> 00:06:55,513
‫Então, vá em frente e copie este aqui,

130
00:06:57,650 --> 00:06:59,403
‫e então, em

131
00:07:00,610 --> 00:07:04,583
‫nosso script básico, vamos colocá-lo bem aqui no primeiro, certo?

132
00:07:06,230 --> 00:07:07,300
‫Então, isso

133
00:07:07,300 --> 00:07:10,080
‫irá expor um objeto Axios para o

134
00:07:10,080 --> 00:07:14,500
‫escopo global, que podemos usar em nossa função de login, ok?

135
00:07:14,500 --> 00:07:17,123
‫E então agora podemos dizer Axios

136
00:07:18,000 --> 00:07:21,003
‫e, em seguida, passar as opções para nossa solicitação.

137
00:07:22,320 --> 00:07:26,380
‫Então, primeiro, digamos que estamos fazendo uma pós-solicitação.

138
00:07:26,380 --> 00:07:28,593
‫Então, precisamos de um URL.

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

140
00:07:31,140 --> 00:07:33,313
‫Então, vamos pegar isso do Postman.

141
00:07:39,530 --> 00:07:41,543
‫Então, este é o nosso URL aqui.

142
00:07:43,250 --> 00:07:45,040
‫E também vamos,

143
00:07:45,040 --> 00:07:47,853
‫é claro, anexar o host ali.

144
00:07:49,400 --> 00:07:52,910
‫Então aqui, é claro, é http e, basicamente,

145
00:07:55,440 --> 00:07:57,093
‫o host local.

146
00:08:01,250 --> 00:08:02,530
‫E, portanto, esta

147
00:08:02,530 --> 00:08:05,260
‫é a nossa entrada de login e

148
00:08:05,260 --> 00:08:07,490
‫agora precisamos especificar os dados que

149
00:08:07,490 --> 00:08:10,473
‫estamos enviando junto com a solicitação no corpo.

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

151
00:08:13,873 --> 00:08:17,870
‫E isso é e-mail: e-mail.

152
00:08:17,870 --> 00:08:21,600
‫E assim, como você já sabe, podemos remover este e-mail.

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

154
00:08:22,433 --> 00:08:24,810
‫Portanto, é chamado de e-mail aqui, porque

155
00:08:24,810 --> 00:08:29,210
‫nosso ponto de extremidade espera que os dados sejam chamados de e-mail, certo?

156
00:08:29,210 --> 00:08:31,250
‫Então é isso que temos aqui no corpo.

157
00:08:31,250 --> 00:08:33,997
‫Precisamos especificar uma propriedade chamada email e

158
00:08:33,997 --> 00:08:35,790
‫outra chamada senha.

159
00:08:35,790 --> 00:08:37,830
‫E isso é exatamente o que

160
00:08:37,830 --> 00:08:41,630
‫estamos fazendo aqui, mas tem o mesmo nome que este parâmetro aqui.

161
00:08:41,630 --> 00:08:44,030
‫E então basta dizer e-mail

162
00:08:45,000 --> 00:08:48,123
‫e o mesmo se aplica à senha.

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

164
00:08:50,760 --> 00:08:53,350
‫Agora, o Axios aqui retorna uma promessa

165
00:08:53,350 --> 00:08:55,890
‫e, portanto, vamos realmente usar

166
00:08:55,890 --> 00:08:59,210
‫um único await para esperar que esse valor volte.

167
00:08:59,210 --> 00:09:04,210
‫Portanto, aguarde aqui e assíncrono aqui mesmo.

168
00:09:05,110 --> 00:09:07,950
‫Agora, tenha em mente que este é um código voltado

169
00:09:07,950 --> 00:09:09,750
‫para o cliente e apenas

170
00:09:09,750 --> 00:09:12,290
‫os navegadores mais modernos podem realmente executar uma

171
00:09:12,290 --> 00:09:15,573
‫única função de espera, mas neste curso, não vou entrar nisso.

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

173
00:09:18,310 --> 00:09:22,510
‫De qualquer forma, vamos salvar o resultado disso aguardando

174
00:09:22,510 --> 00:09:25,640
‫a promessa na variável de resultado.

175
00:09:25,640 --> 00:09:28,623
‫E então, para dar uma olhada no

176
00:09:30,000 --> 00:09:33,453
‫resultado, digamos console. resultado do log.

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

178
00:09:35,333 --> 00:09:37,870
‫Agora, uma coisa que eu realmente gosto no Axios

179
00:09:37,870 --> 00:09:40,240
‫é o fato de que ele gerará

180
00:09:40,240 --> 00:09:43,780
‫um erro sempre que recebermos um erro de nossa entrada de API.

181
00:09:43,780 --> 00:09:46,480
‫Digamos que haja uma senha errada e o

182
00:09:46,480 --> 00:09:48,980
‫servidor enviará de volta um 403 e,

183
00:09:48,980 --> 00:09:50,610
‫basicamente, um erro.

184
00:09:50,610 --> 00:09:52,768
‫E assim, sempre que houver um

185
00:09:52,768 --> 00:09:55,290
‫erro, o Axios também irá disparar um erro.

186
00:09:55,290 --> 00:09:58,680
‫E isso é muito útil porque, com isso, agora podemos

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

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

189
00:10:03,493 --> 00:10:05,840
‫Então, basicamente, para fazer algum tratamento de erros aqui

190
00:10:05,840 --> 00:10:07,173
‫no lado do cliente.

191
00:10:08,750 --> 00:10:09,770
‫Então, por exemplo,

192
00:10:09,770 --> 00:10:12,090
‫quando o usuário está conectado corretamente,

193
00:10:12,090 --> 00:10:14,375
‫você deseja exibir alguma mensagem dizendo

194
00:10:14,375 --> 00:10:16,470
‫isso, e talvez alguma outra lógica,

195
00:10:16,470 --> 00:10:19,540
‫mas se não, bem, então vamos entrar no bloco

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

197
00:10:21,770 --> 00:10:26,093
‫e então podemos , execute alguma outra ação com base no erro.

198
00:10:27,022 --> 00:10:30,272
‫(digitando no teclado) Então, vamos dar uma

199
00:10:31,670 --> 00:10:34,023
‫olhada no erro também.

200
00:10:37,480 --> 00:10:42,120
‫E só para ter certeza, também quero registrar o e-mail e

201
00:10:43,200 --> 00:10:45,253
‫a senha no console.

202
00:10:49,130 --> 00:10:51,583
‫Então, vamos tentar isso aqui.

203
00:10:52,430 --> 00:10:53,663
‫Recarregue nossa

204
00:10:55,249 --> 00:10:58,499
‫página, (digitando em um teclado) E estou

205
00:11:02,240 --> 00:11:05,160
‫inserindo uma senha errada agora, ok?

206
00:11:05,160 --> 00:11:06,993
‫Teste um, dois, três, quatro, cinco.

207
00:11:09,100 --> 00:11:12,070
‫Vamos dar uma olhada em nosso console aqui também.

208
00:11:12,070 --> 00:11:15,740
‫E recebemos esse erro aqui do mapbox, js, mas não

209
00:11:15,740 --> 00:11:17,330
‫se preocupe com isso.

210
00:11:17,330 --> 00:11:19,430
‫Vamos consertar isso um pouco mais tarde novamente.

211
00:11:21,848 --> 00:11:24,890
‫Por enquanto, vamos dar uma olhada no que acontece aqui.

212
00:11:24,890 --> 00:11:28,900
‫E aqui temos alguns erros legais, certo?

213
00:11:28,900 --> 00:11:32,670
‫E então, na verdade, quando precisamos dar uma olhada, aqui está

214
00:11:32,670 --> 00:11:34,253
‫o erro. resposta.

215
00:11:36,630 --> 00:11:38,910
‫E então aponte os dados.

216
00:11:38,910 --> 00:11:42,550
‫Ok, e você encontrará isso aqui na documentação do Axios, caso esteja

217
00:11:42,550 --> 00:11:45,113
‫se perguntando de onde isso está vindo.

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

219
00:11:49,290 --> 00:11:52,140
‫Na verdade, vou copiar este e-mail

220
00:11:53,450 --> 00:11:56,713
‫porque não é tão bom escrevê-lo sempre manualmente.

221
00:12:00,200 --> 00:12:04,263
‫E agora, na verdade, obtemos alguns erros bem formatados aqui.

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

223
00:12:06,273 --> 00:12:08,810
‫E isso é basicamente o jsencode

224
00:12:08,810 --> 00:12:11,310
‫que enviamos de nosso servidor.

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

226
00:12:12,143 --> 00:12:13,320
‫Então, isso é

227
00:12:13,320 --> 00:12:15,220
‫exatamente o mesmo que vimos no Postman.

228
00:12:15,220 --> 00:12:20,220
‫Assim, obtemos todo o nosso erro, a mensagem e também a pilha.

229
00:12:20,270 --> 00:12:23,420
‫E então vemos que provavelmente não fornecemos o e-mail

230
00:12:23,420 --> 00:12:26,523
‫e a senha corretamente por algum motivo.

231
00:12:27,550 --> 00:12:30,330
‫Então, vamos voltar, dar uma olhada.

232
00:12:30,330 --> 00:12:34,230
‫Ah, então eu fiz algo estranho aqui onde passei

233
00:12:34,230 --> 00:12:36,230
‫um objeto com o e-mail

234
00:12:36,230 --> 00:12:38,003
‫e a senha.

235
00:12:38,980 --> 00:12:41,060
‫E então acho que foi antes,

236
00:12:41,060 --> 00:12:42,900
‫quando ele tentou fazer aquele

237
00:12:42,900 --> 00:12:45,670
‫alerta e acho que fiz isso no lugar errado.

238
00:12:45,670 --> 00:12:49,570
‫E então, é por isso que realmente vimos undefined aqui.

239
00:12:49,570 --> 00:12:51,260
‫E aqui temos este objeto.

240
00:12:51,260 --> 00:12:53,820
‫Então, basicamente, e-mail era todo esse objeto,

241
00:12:53,820 --> 00:12:56,023
‫e a senha era indefinida.

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

243
00:12:59,123 --> 00:13:01,400
‫Então agora, isso deve consertar, dê

244
00:13:01,400 --> 00:13:02,613
‫uma recarga.

245
00:13:07,930 --> 00:13:10,760
‫Ah, agora temos esse erro correto

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

247
00:13:12,500 --> 00:13:15,580
‫Então agora é um e-mail ou senha

248
00:13:15,580 --> 00:13:18,880
‫incorreta porque eu especifiquei uma senha errada, certo?

249
00:13:18,880 --> 00:13:21,441
‫Mas agora, vamos remover o cinco e

250
00:13:21,441 --> 00:13:24,973
‫então o teste um, dois, três, quatro deve estar correto.

251
00:13:25,860 --> 00:13:28,010
‫Então, vamos fazer

252
00:13:28,010 --> 00:13:31,810
‫o login, e agora temos uma resposta 200.

253
00:13:31,810 --> 00:13:33,253
‫Então, um sucesso.

254
00:13:34,290 --> 00:13:35,890
‫Então, vamos abrir isso

255
00:13:35,890 --> 00:13:39,410
‫e o que realmente nos interessa são os dados.

256
00:13:39,410 --> 00:13:42,030
‫Então, basicamente, resposta. dados porque é

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

258
00:13:43,260 --> 00:13:46,960
‫que nossa resposta jsen está localizada.

259
00:13:46,960 --> 00:13:48,653
‫Aqui, obtemos esses

260
00:13:50,210 --> 00:13:55,210
‫dados aqui, e também obtemos o status e o token.

261
00:13:55,410 --> 00:13:59,030
‫E então, este é o nosso token da web jsen

262
00:13:59,030 --> 00:14:01,550
‫correto correspondente a este usuário conectado.

263
00:14:01,550 --> 00:14:03,170
‫Agora, o que é realmente

264
00:14:03,170 --> 00:14:05,400
‫interessante é dar uma olhada em nossos cookies.

265
00:14:05,400 --> 00:14:07,540
‫E fazemos isso no Google Chrome,

266
00:14:07,540 --> 00:14:09,560
‫pelo menos clicando neste ícone

267
00:14:09,560 --> 00:14:12,180
‫aqui e aqui embaixo, você tem os cookies.

268
00:14:12,180 --> 00:14:14,900
‫E também diz que nossa conexão não é

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

270
00:14:15,940 --> 00:14:19,330
‫porque não estamos usando HTTPS neste momento, mas não

271
00:14:19,330 --> 00:14:20,920
‫se preocupe com isso.

272
00:14:20,920 --> 00:14:23,530
‫O que importa aqui é que agora

273
00:14:24,630 --> 00:14:27,620
‫temos esse cookie e, na verdade, ele se chama

274
00:14:27,620 --> 00:14:31,060
‫jsen web token, e tem exatamente o jsen web token

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

276
00:14:33,360 --> 00:14:36,620
‫Então, esse é apenas o fim, basicamente, da corda,

277
00:14:36,620 --> 00:14:40,710
‫então você vê que isso é igual ao que temos aqui embaixo.

278
00:14:40,710 --> 00:14:43,560
‫E é esse cookie aqui, que realmente

279
00:14:43,560 --> 00:14:46,030
‫nos permitirá construir essa autenticação inteira.

280
00:14:46,030 --> 00:14:49,000
‫Novamente, porque o navegador não enviará esse cookie

281
00:14:49,000 --> 00:14:51,470
‫junto com cada nova solicitação.

282
00:14:51,470 --> 00:14:55,070
‫E deixe-me realmente mostrar a você em nosso back-end.

283
00:14:55,070 --> 00:14:59,930
‫Então, vamos voltar lá e vamos para o aplicativo. js.

284
00:14:59,930 --> 00:15:02,320
‫E agora estamos de volta à nossa nota ou,

285
00:15:02,320 --> 00:15:03,943
‫na verdade, ao nosso código Express.

286
00:15:05,320 --> 00:15:07,360
‫Agora, para realmente obter acesso

287
00:15:07,360 --> 00:15:09,690
‫aos cookies que estão em nosso pedido.

288
00:15:09,690 --> 00:15:13,050
‫No Express, precisamos instalar um determinado middleware.

289
00:15:13,050 --> 00:15:16,630
‫E então precisamos instalar isso de um pacote NPM.

290
00:15:16,630 --> 00:15:19,960
‫E isso é mais uma vez, vá para o nosso

291
00:15:19,960 --> 00:15:21,550
‫outro terminal e, em

292
00:15:22,660 --> 00:15:25,313
‫seguida, o NPM instale o analisador de cookies.

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

294
00:15:27,043 --> 00:15:29,380
‫Então, basicamente, este pacote analisará todos os

295
00:15:29,380 --> 00:15:31,653
‫cookies da solicitação de entrada.

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

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

298
00:15:45,680 --> 00:15:50,377
‫E agora vamos usá-lo próximo a este analisador de corpo.

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

300
00:15:56,003 --> 00:15:57,050
‫Portanto, esses dois são muito semelhantes.

301
00:15:57,050 --> 00:15:59,750
‫Este primeiro analisa os dados do

302
00:15:59,750 --> 00:16:03,070
‫corpo e o segundo analisa os dados dos cookies.

303
00:16:03,070 --> 00:16:06,600
‫E agora, se estiver neste middleware aqui,

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

305
00:16:11,470 --> 00:16:13,080
‫E agora, para

306
00:16:13,080 --> 00:16:16,593
‫cada solicitação, sempre exibiremos todos os cookies no console.

307
00:16:19,360 --> 00:16:22,440
‫Portanto, se agora recarregarmos esta página, ou realmente

308
00:16:22,440 --> 00:16:24,490
‫qualquer outra página, deixe-me

309
00:16:24,490 --> 00:16:27,283
‫apenas abri-la aqui em uma nova guia.

310
00:16:29,780 --> 00:16:33,420
‫Então, se voltarmos, devemos ver aquele cookie aqui.

311
00:16:33,420 --> 00:16:35,820
‫E, de fato, aqui está.

312
00:16:35,820 --> 00:16:38,810
‫Então este é o cookie que acabou

313
00:16:38,810 --> 00:16:42,960
‫de ser enviado ao nosso aplicativo carregando aquela página no navegador.

314
00:16:42,960 --> 00:16:44,223
‫E se eu

315
00:16:45,710 --> 00:16:49,710
‫fizer isso de novo, então, você vai ver outro, certo?

316
00:16:49,710 --> 00:16:51,120
‫Então aqui está.

317
00:16:51,120 --> 00:16:54,790
‫E agora podemos usar isso para proteger nossa rota.

318
00:16:54,790 --> 00:16:56,863
‫Tudo bem, então vamos experimentar.

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

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

321
00:17:01,070 --> 00:17:03,080
‫de fazermos isso, precisamos de

322
00:17:03,080 --> 00:17:05,770
‫nosso controle off para adicioná-lo aqui também.

323
00:17:05,770 --> 00:17:08,840
‫Portanto, agora, estamos apenas lendo o token da web jsen

324
00:17:08,840 --> 00:17:10,503
‫do cabeçalho de autorização.

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

326
00:17:12,223 --> 00:17:15,230
‫E só se começarem com este portador, certo?

327
00:17:15,230 --> 00:17:17,170
‫Então, para o token do portador.

328
00:17:17,170 --> 00:17:19,640
‫Mas agora, basicamente, também queremos ler o token

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

330
00:17:21,970 --> 00:17:25,633
‫E o que podemos fazer aqui é basicamente um else if,

331
00:17:27,870 --> 00:17:30,860
‫portanto, se não houver um token no cabeçalho de

332
00:17:30,860 --> 00:17:33,333
‫autorização, vamos dar uma olhada nos cookies.

333
00:17:34,170 --> 00:17:36,807
‫Portanto, peça. biscoitos. token da web jsen.

334
00:17:36,807 --> 00:17:39,520
‫Então JWT, que é o nome

335
00:17:39,520 --> 00:17:42,550
‫do cookie, portanto, no objeto cookies, haverá

336
00:17:42,550 --> 00:17:45,110
‫uma propriedade chamada JWT.

337
00:17:45,110 --> 00:17:47,137
‫Então está aqui, certo?

338
00:17:49,120 --> 00:17:51,280
‫E se isso

339
00:17:51,280 --> 00:17:55,080
‫existe, bem, o token deve ser exatamente isso.

340
00:17:55,080 --> 00:17:58,040
‫Portanto, peça. biscoitos. jwt.

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

342
00:18:00,117 --> 00:18:00,950
‫E agora com isso, também

343
00:18:02,085 --> 00:18:03,593
‫podemos autenticar usuários com base em tokens enviados por meio de

344
00:18:05,590 --> 00:18:06,840
‫cookies e não apenas o cabeçalho de autorização.

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

346
00:18:10,400 --> 00:18:13,210
‫E só para testar isso, vamos proteger uma

347
00:18:13,210 --> 00:18:15,780
‫de nossas rotas aqui na visualização.

348
00:18:15,780 --> 00:18:16,613
‫E farei isso com esta página de detalhes do tour, ok?

349
00:18:16,613 --> 00:18:18,580
‫Isso é apenas

350
00:18:18,580 --> 00:18:22,610
‫para teste, porque é claro que não faz muito

351
00:18:22,610 --> 00:18:27,170
‫sentido, mas eu só queria mostrar que, como está agora,

352
00:18:27,170 --> 00:18:29,460
‫nosso login já está funcionando.

353
00:18:29,460 --> 00:18:31,920
‫Então, vamos importar o authController aqui.

354
00:18:31,920 --> 00:18:33,800
‫(digitando em um teclado)

355
00:18:33,800 --> 00:18:36,723
‫E então, como antes, edite aqui nesta rota.

356
00:18:37,860 --> 00:18:39,993
‫Então, authController. proteger.

357
00:18:41,708 --> 00:18:44,958
‫E, portanto, não há nada de novo neste ponto.

358
00:18:49,884 --> 00:18:54,860
‫E então, apenas se o usuário estiver logado, podemos ir

359
00:18:54,860 --> 00:18:58,770
‫para o getTour.

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

361
00:19:00,930 --> 00:19:03,200
‫Então, o que vou fazer agora é basicamente excluir esse cookie

362
00:19:03,200 --> 00:19:04,993
‫primeiro, apenas para mostrar o que acontece quando

363
00:19:06,400 --> 00:19:07,233
‫um usuário não

364
00:19:08,460 --> 00:19:09,710
‫conectado tenta acessar essa rota agora.

365
00:19:09,710 --> 00:19:12,450
‫Então, basicamente, se removermos esse cookie, é como

366
00:19:12,450 --> 00:19:13,850
‫desconectar o usuário, certo?

367
00:19:13,850 --> 00:19:17,293
‫Portanto, se você der uma olhada em nossos

368
00:19:18,180 --> 00:19:20,950
‫tours, deve estar tudo bem.

369
00:19:20,950 --> 00:19:24,563
‫Mas, se agora tentarmos acessar esta

370
00:19:25,730 --> 00:19:28,970
‫página, devemos obter um erro.

371
00:19:28,970 --> 00:19:30,653
‫E, de fato, aí está, dizendo que você não está logado.

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

373
00:19:34,090 --> 00:19:35,580
‫Então, vamos voltar e realmente fazer o login.

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

375
00:19:40,640 --> 00:19:41,550
‫Aqui vamos nos.

376
00:19:41,550 --> 00:19:44,903
‫E então, no futuro, é claro que também implementaremos algumas janelas de alerta

377
00:19:50,833 --> 00:19:51,666
‫aqui e

378
00:19:51,666 --> 00:19:52,610
‫todas essas coisas boas.

379
00:19:52,610 --> 00:19:53,550
‫Mas, por agora, novamente, vamos apenas fazer funcionar.

380
00:19:53,550 --> 00:19:55,570
‫E então você vê que

381
00:19:55,570 --> 00:19:58,800
‫estamos de volta com nosso belo biscoito aqui, ok?

382
00:19:58,800 --> 00:20:02,380
‫E então, vamos agora tentar acessar esta rota protegida.

383
00:20:02,380 --> 00:20:04,240
‫E, de fato, agora funciona.

384
00:20:04,240 --> 00:20:08,550
‫Fantástico, isso já é ótimo, certo?

385
00:20:08,550 --> 00:20:12,163
‫Agora, idealmente, quando um usuário está logado, não queremos exibir

386
00:20:13,370 --> 00:20:16,050
‫esses botões aqui, mas em vez

387
00:20:16,050 --> 00:20:20,250
‫disso, como algum menu do usuário ou uma imagem do usuário.

388
00:20:20,250 --> 00:20:22,800
‫Então, basicamente mostrando

389
00:20:22,800 --> 00:20:26,770
‫que o usuário está realmente logado, certo?

390
00:20:26,770 --> 00:20:31,240
‫Então, vamos fazer isso no próximo vídeo, junto com o agrupamento de

391
00:20:31,240 --> 00:20:32,650
‫todos os nossos

392
00:20:32,650 --> 00:20:35,545
‫arquivos JavaScript juntos no front-end, como expliquei anteriormente.

393
00:20:35,545 --> 00:20:38,090
‫Portanto, não espere, vamos direto para o próximo.

394
00:20:38,090 --> 00:20:41,220
‫Vejo você lá.