‫-: Agora é finalmente hora de usar a API de
‫login que criamos nas seções
‫anteriores e há uma tonelada de coisas
‫a fazer aqui para fazer o front-end interagir com o back-end.
‫E então estamos fazendo isso em palestras separadas.
‫De qualquer forma, vamos começar agora.
‫E é assim que vai funcionar.
‫Então, vamos permitir que os usuários façam login em nosso
‫site fazendo uma solicitação HTTP ou uma chamada ATEX, como
‫muitas pessoas também gostam de chamá-la.
‫E estamos fazendo essa solicitação HTTP para o ponto de extremidade da API de
‫login que implementamos antes de usar os
‫dados que o usuário fornece neste formulário que temos aqui.
‫Portanto, lembre-se de que nossa API enviará de volta
‫um cookie que é automaticamente armazenado no navegador.
‫E também é enviado de volta
‫automaticamente com cada solicitação subsequente.
‫E como você verá, esta é uma
‫chave fundamental para que nosso sistema de autenticação funcione.
‫Mas de qualquer forma,
‫como estamos fazendo essa solicitação HTTP no
‫navegador, vamos, é claro, mais uma vez, trabalhar no lado do cliente.
‫De qualquer forma, como estamos
‫fazendo uma solicitação HTTP no navegador, ainda estaremos
‫trabalhando no código de script de jobs do lado do cliente.
‫Assim como fizemos com a implementação do Mapbox.
‫Tudo bem?
‫Portanto, vamos agora criar um novo arquivo aqui.
‫E isso está em público, js, e novo arquivo, que
‫chamarei de login. js e no
‫próximo vídeo, vamos agrupar todos esses
‫arquivos JavaScript separados que
‫estamos criando aqui para o front-end
‫juntos em um grande pacote.
‫Tudo bem?
‫Mas, por enquanto, vamos nos concentrar apenas em fazer
‫essa funcionalidade de login funcionar.
‫Mas de qualquer forma, vamos começar adicionando um ouvinte
‫de evento, ouvindo o evento de envio em nosso formulário de login, certo?
‫Portanto, nosso formulário de login tem essa classe de formulário aqui.
‫Ok, agora vamos selecionar este elemento
‫e, em seguida, ouvir o evento de envio.
‫Espero que você esteja familiarizado com esse tipo de
‫lógica no JavaScript do lado do cliente.
‫E, com sorte, isso não é novidade para você.
‫Portanto, documente. querySelector, que usamos
‫para selecionar com base na classe.
‫Adicione então esse nome
‫de Seletor e agora adicione EventListener, ouvindo o evento de envio.
‫Então, basicamente, um evento que o navegador irá
‫disparar sempre que um usuário clicar no botão enviar do formulário.
‫Adicione então na
‫função collect, nós teremos acesso a esse evento em si, ok?
‫E então a terceira coisa que
‫realmente fazemos é dizer evento. preventDefault.
‫OK?
‫Portanto, isso evita que o formulário carregue qualquer outra página.
‫Em seguida, vamos obter o e-mail
‫e o valor da senha que o usuário inseriu.
‫E assim estão, neste elemento, com o e-mail do ID,
‫e a senha do ID, ok?
‫Então, esses dois campos
‫de entrada e vamos obter esses dados também.
‫(digitando em um teclado) Documente,
‫obtenha elemento por
‫ID.
‫E-mail, e então usamos a propriedade value para
‫chegar a esse valor lá fora.
‫Não nodeValue, apenas valor.
‫Vamos duplicar essa linha, ok?
‫E agora vamos fazer o
‫login real em uma função separada, ok?
‫Agora chegamos aqui, este
‫erro eslint e isso de novo porque
‫temos eslint configurado apenas para código não JS.
‫E então vamos realmente desabilitar isso assim como fizemos aqui.
‫Então, apenas pegue este pedaço de código.
‫Tudo bem?
‫E agora, como eu
‫estava dizendo, vamos criar essa função de login.
‫Então e assim
‫mesmo, e essa função vai aceitar
‫um e-mail e uma senha.
‫E antes
‫de tudo, vamos ver se esse código está realmente funcionando.
‫Então, vamos alertar,
‫então basicamente crie uma janela de alerta.
‫E com este email e senha.
‫Tudo bem?
‫Agora, é claro, também precisamos
‫chamar essa função novamente com e-mail e senha.
‫E, finalmente, também precisamos incluir este arquivo de
‫login em nosso template base, certo?
‫E novamente, como eu estava dizendo no
‫início, no próximo vídeo,
‫vamos agrupar todo esse código de front-end
‫aqui em um grande arquivo JavaScript.
‫Tudo bem?
‫Isso é muito melhor para o desempenho
‫e também é uma melhor experiência de desenvolvedor para nós mesmos.
‫De qualquer forma, isso agora deve estar funcionando.
‫Vamos apenas recarregar esta página aqui.
‫Então eu tenho que preencher, validar
‫aqui, enfim, o Chrome nem vai permitir que eu envie o formulário.
‫Tudo bem, então aqui recebemos nosso
‫alerta com o e-mail que
‫acabamos de inserir e a
‫senha, eu
‫acho, não aparece porque especificamos dois valores lá.
‫Em vez disso, vamos especificar um objeto aqui e ver
‫se funciona novamente.
‫(digitando no teclado) Bem, acho que ele tenta
‫converter esse objeto
‫em uma string aqui.
‫Ok, mas, isso realmente não importa aqui.
‫Normalmente estou mais acostumado a usar o Console. log em vez de alerta.
‫Tudo bem?
‫De qualquer forma, tenho certeza de que está funcionando agora aqui.
‫E então vamos agora criar esta função.
‫Então, para fazer essas requisições HTTP para o login,
‫vamos
‫usar uma biblioteca muito popular chamada Axios, ok?
‫E no próximo vídeo vamos baixar
‫essa biblioteca do NPM e empacotá-la junto com todos
‫os nossos outros scripts,
‫mas por enquanto, vamos usá-la de um CDN.
‫Então, vamos apenas Google
‫Axios CDN, certo?
‫Então, vá em frente e copie este aqui,
‫e então, em
‫nosso script básico, vamos colocá-lo bem aqui no primeiro, certo?
‫Então, isso
‫irá expor um objeto Axios para o
‫escopo global, que podemos usar em nossa função de login, ok?
‫E então agora podemos dizer Axios
‫e, em seguida, passar as opções para nossa solicitação.
‫Então, primeiro, digamos que estamos fazendo uma pós-solicitação.
‫Então, precisamos de um URL.
‫Tudo bem?
‫Então, vamos pegar isso do Postman.
‫Então, este é o nosso URL aqui.
‫E também vamos,
‫é claro, anexar o host ali.
‫Então aqui, é claro, é http e, basicamente,
‫o host local.
‫E, portanto, esta
‫é a nossa entrada de login e
‫agora precisamos especificar os dados que
‫estamos enviando junto com a solicitação no corpo.
‫Tudo bem?
‫E isso é e-mail: e-mail.
‫E assim, como você já sabe, podemos remover este e-mail.
‫OK?
‫Portanto, é chamado de e-mail aqui, porque
‫nosso ponto de extremidade espera que os dados sejam chamados de e-mail, certo?
‫Então é isso que temos aqui no corpo.
‫Precisamos especificar uma propriedade chamada email e
‫outra chamada senha.
‫E isso é exatamente o que
‫estamos fazendo aqui, mas tem o mesmo nome que este parâmetro aqui.
‫E então basta dizer e-mail
‫e o mesmo se aplica à senha.
‫OK?
‫Agora, o Axios aqui retorna uma promessa
‫e, portanto, vamos realmente usar
‫um único await para esperar que esse valor volte.
‫Portanto, aguarde aqui e assíncrono aqui mesmo.
‫Agora, tenha em mente que este é um código voltado
‫para o cliente e apenas
‫os navegadores mais modernos podem realmente executar uma
‫única função de espera, mas neste curso, não vou entrar nisso.
‫OK?
‫De qualquer forma, vamos salvar o resultado disso aguardando
‫a promessa na variável de resultado.
‫E então, para dar uma olhada no
‫resultado, digamos console. resultado do log.
‫OK?
‫Agora, uma coisa que eu realmente gosto no Axios
‫é o fato de que ele gerará
‫um erro sempre que recebermos um erro de nossa entrada de API.
‫Digamos que haja uma senha errada e o
‫servidor enviará de volta um 403 e,
‫basicamente, um erro.
‫E assim, sempre que houver um
‫erro, o Axios também irá disparar um erro.
‫E isso é muito útil porque, com isso, agora podemos
‫usar um bloco try catch.
‫OK?
‫Então, basicamente, para fazer algum tratamento de erros aqui
‫no lado do cliente.
‫Então, por exemplo,
‫quando o usuário está conectado corretamente,
‫você deseja exibir alguma mensagem dizendo
‫isso, e talvez alguma outra lógica,
‫mas se não, bem, então vamos entrar no bloco
‫catch,
‫e então podemos , execute alguma outra ação com base no erro.
‫(digitando no teclado) Então, vamos dar uma
‫olhada no erro também.
‫E só para ter certeza, também quero registrar o e-mail e
‫a senha no console.
‫Então, vamos tentar isso aqui.
‫Recarregue nossa
‫página, (digitando em um teclado) E estou
‫inserindo uma senha errada agora, ok?
‫Teste um, dois, três, quatro, cinco.
‫Vamos dar uma olhada em nosso console aqui também.
‫E recebemos esse erro aqui do mapbox, js, mas não
‫se preocupe com isso.
‫Vamos consertar isso um pouco mais tarde novamente.
‫Por enquanto, vamos dar uma olhada no que acontece aqui.
‫E aqui temos alguns erros legais, certo?
‫E então, na verdade, quando precisamos dar uma olhada, aqui está
‫o erro. resposta.
‫E então aponte os dados.
‫Ok, e você encontrará isso aqui na documentação do Axios, caso esteja
‫se perguntando de onde isso está vindo.
‫Tudo bem?
‫Na verdade, vou copiar este e-mail
‫porque não é tão bom escrevê-lo sempre manualmente.
‫E agora, na verdade, obtemos alguns erros bem formatados aqui.
‫OK?
‫E isso é basicamente o jsencode
‫que enviamos de nosso servidor.
‫Direito?
‫Então, isso é
‫exatamente o mesmo que vimos no Postman.
‫Assim, obtemos todo o nosso erro, a mensagem e também a pilha.
‫E então vemos que provavelmente não fornecemos o e-mail
‫e a senha corretamente por algum motivo.
‫Então, vamos voltar, dar uma olhada.
‫Ah, então eu fiz algo estranho aqui onde passei
‫um objeto com o e-mail
‫e a senha.
‫E então acho que foi antes,
‫quando ele tentou fazer aquele
‫alerta e acho que fiz isso no lugar errado.
‫E então, é por isso que realmente vimos undefined aqui.
‫E aqui temos este objeto.
‫Então, basicamente, e-mail era todo esse objeto,
‫e a senha era indefinida.
‫OK?
‫Então agora, isso deve consertar, dê
‫uma recarga.
‫Ah, agora temos esse erro correto
‫que estávamos esperando.
‫Então agora é um e-mail ou senha
‫incorreta porque eu especifiquei uma senha errada, certo?
‫Mas agora, vamos remover o cinco e
‫então o teste um, dois, três, quatro deve estar correto.
‫Então, vamos fazer
‫o login, e agora temos uma resposta 200.
‫Então, um sucesso.
‫Então, vamos abrir isso
‫e o que realmente nos interessa são os dados.
‫Então, basicamente, resposta. dados porque é
‫aqui
‫que nossa resposta jsen está localizada.
‫Aqui, obtemos esses
‫dados aqui, e também obtemos o status e o token.
‫E então, este é o nosso token da web jsen
‫correto correspondente a este usuário conectado.
‫Agora, o que é realmente
‫interessante é dar uma olhada em nossos cookies.
‫E fazemos isso no Google Chrome,
‫pelo menos clicando neste ícone
‫aqui e aqui embaixo, você tem os cookies.
‫E também diz que nossa conexão não é
‫segura, simplesmente
‫porque não estamos usando HTTPS neste momento, mas não
‫se preocupe com isso.
‫O que importa aqui é que agora
‫temos esse cookie e, na verdade, ele se chama
‫jsen web token, e tem exatamente o jsen web token
‫que vemos aqui.
‫Então, esse é apenas o fim, basicamente, da corda,
‫então você vê que isso é igual ao que temos aqui embaixo.
‫E é esse cookie aqui, que realmente
‫nos permitirá construir essa autenticação inteira.
‫Novamente, porque o navegador não enviará esse cookie
‫junto com cada nova solicitação.
‫E deixe-me realmente mostrar a você em nosso back-end.
‫Então, vamos voltar lá e vamos para o aplicativo. js.
‫E agora estamos de volta à nossa nota ou,
‫na verdade, ao nosso código Express.
‫Agora, para realmente obter acesso
‫aos cookies que estão em nosso pedido.
‫No Express, precisamos instalar um determinado middleware.
‫E então precisamos instalar isso de um pacote NPM.
‫E isso é mais uma vez, vá para o nosso
‫outro terminal e, em
‫seguida, o NPM instale o analisador de cookies.
‫OK?
‫Então, basicamente, este pacote analisará todos os
‫cookies da solicitação de entrada.
‫cookieParser.
‫Tudo bem?
‫E agora vamos usá-lo próximo a este analisador de corpo.
‫OK?
‫Portanto, esses dois são muito semelhantes.
‫Este primeiro analisa os dados do
‫corpo e o segundo analisa os dados dos cookies.
‫E agora, se estiver neste middleware aqui,
‫podemos usar request. biscoitos.
‫E agora, para
‫cada solicitação, sempre exibiremos todos os cookies no console.
‫Portanto, se agora recarregarmos esta página, ou realmente
‫qualquer outra página, deixe-me
‫apenas abri-la aqui em uma nova guia.
‫Então, se voltarmos, devemos ver aquele cookie aqui.
‫E, de fato, aqui está.
‫Então este é o cookie que acabou
‫de ser enviado ao nosso aplicativo carregando aquela página no navegador.
‫E se eu
‫fizer isso de novo, então, você vai ver outro, certo?
‫Então aqui está.
‫E agora podemos usar isso para proteger nossa rota.
‫Tudo bem, então vamos experimentar.
‫OK?
‫Mas antes
‫de fazermos isso, precisamos de
‫nosso controle off para adicioná-lo aqui também.
‫Portanto, agora, estamos apenas lendo o token da web jsen
‫do cabeçalho de autorização.
‫Direito?
‫E só se começarem com este portador, certo?
‫Então, para o token do portador.
‫Mas agora, basicamente, também queremos ler o token
‫da web jsen de um cookie.
‫E o que podemos fazer aqui é basicamente um else if,
‫portanto, se não houver um token no cabeçalho de
‫autorização, vamos dar uma olhada nos cookies.
‫Portanto, peça. biscoitos. token da web jsen.
‫Então JWT, que é o nome
‫do cookie, portanto, no objeto cookies, haverá
‫uma propriedade chamada JWT.
‫Então está aqui, certo?
‫E se isso
‫existe, bem, o token deve ser exatamente isso.
‫Portanto, peça. biscoitos. jwt.
‫OK.
‫E agora com isso, também
‫podemos autenticar usuários com base em tokens enviados por meio de
‫cookies e não apenas o cabeçalho de autorização.
‫Excelente.
‫E só para testar isso, vamos proteger uma
‫de nossas rotas aqui na visualização.
‫E farei isso com esta página de detalhes do tour, ok?
‫Isso é apenas
‫para teste, porque é claro que não faz muito
‫sentido, mas eu só queria mostrar que, como está agora,
‫nosso login já está funcionando.
‫Então, vamos importar o authController aqui.
‫(digitando em um teclado)
‫E então, como antes, edite aqui nesta rota.
‫Então, authController. proteger.
‫E, portanto, não há nada de novo neste ponto.
‫E então, apenas se o usuário estiver logado, podemos ir
‫para o getTour.
‫Excelente.
‫Então, o que vou fazer agora é basicamente excluir esse cookie
‫primeiro, apenas para mostrar o que acontece quando
‫um usuário não
‫conectado tenta acessar essa rota agora.
‫Então, basicamente, se removermos esse cookie, é como
‫desconectar o usuário, certo?
‫Portanto, se você der uma olhada em nossos
‫tours, deve estar tudo bem.
‫Mas, se agora tentarmos acessar esta
‫página, devemos obter um erro.
‫E, de fato, aí está, dizendo que você não está logado.
‫É justo.
‫Então, vamos voltar e realmente fazer o login.
‫OK?
‫Aqui vamos nos.
‫E então, no futuro, é claro que também implementaremos algumas janelas de alerta
‫aqui e
‫todas essas coisas boas.
‫Mas, por agora, novamente, vamos apenas fazer funcionar.
‫E então você vê que
‫estamos de volta com nosso belo biscoito aqui, ok?
‫E então, vamos agora tentar acessar esta rota protegida.
‫E, de fato, agora funciona.
‫Fantástico, isso já é ótimo, certo?
‫Agora, idealmente, quando um usuário está logado, não queremos exibir
‫esses botões aqui, mas em vez
‫disso, como algum menu do usuário ou uma imagem do usuário.
‫Então, basicamente mostrando
‫que o usuário está realmente logado, certo?
‫Então, vamos fazer isso no próximo vídeo, junto com o agrupamento de
‫todos os nossos
‫arquivos JavaScript juntos no front-end, como expliquei anteriormente.
‫Portanto, não espere, vamos direto para o próximo.
‫Vejo você lá.