# Apresentação

A seguinte documentação descreve o Componente de Login, cujo código fonte está presente no repositório <https://github.com/miklt/pcs3443-2021>

Este projeto foi criado com o intuito de apresentar o desenvolvimento de uma aplicação web composta de um frontend e um backend que se comunicam via o protocolo REST. Uma demo está rodando no seguinte link <https://pcs3443-2021.vercel.app/>&#x20;

## Login

* O usuário digita o login e senha no frontend e envia esses dados ao backend. Se houver um match no banco de dados, o backend retorna um token JWT que contém informações do usuário.&#x20;
* Se o token for assinado com a mesma chave configurada no frontend, o token é armazendo num cookie e o usuário é redirecionado à tela de perfil apresentadas e o token é armazendo num cookie durante a sessão do usuário.

<div align="center"><img src="https://3342710934-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MaeDguhNRPW5Hnd85sl%2F-MbO4o6FNSQAw25avOhT%2F-MbO9VMXh33WjAnfBTg6%2Ftela_login.png?alt=media&#x26;token=5103c571-4da1-4b15-b13d-e9b66b7afdf7" alt="Tela de login"></div>

![Tela de Perfil](https://3342710934-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MaeDguhNRPW5Hnd85sl%2F-MbO4o6FNSQAw25avOhT%2F-MbODfm0Hts82PvoG2YJ%2Ftela_perfil.png?alt=media\&token=ca8f03ba-0468-4639-804d-19711c7beac1)

## Exceções

* Caso os dados digitados não pertençam a algum registro o backend retorna um erro HTTP 400.
* Caso o token fornecido pelo backend for assinado com uma chave diferente da do frontend, o frontend apresenta um erro e retorna para a tela principal.
* O token tem um tempo de expiração de 15 minutos

![](https://3342710934-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MaeDguhNRPW5Hnd85sl%2F-MbO4o6FNSQAw25avOhT%2F-MbODuzwXmFHXTmSxuF9%2Ftela_erro_perfil.png?alt=media\&token=1eadb8f0-34ae-4e30-a678-27c249e4199f)

## Cadastro

* O usuário digita o login, email e senha no frontend e envia esses dados ao backend por meio de uma requisição POST contendo um payload em JSON.&#x20;
* O backend recebe a requisição, obtem o login, email e criptografa a senha.&#x20;
* O backend armazena os dados no banco de dados
* O backend retorna o código HTTP 201, indicando sucesso na operação
* O frontend recebe o retorno do backend e redireciona o usuário para a tela de login.

![](https://3342710934-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MaeDguhNRPW5Hnd85sl%2F-MbO4o6FNSQAw25avOhT%2F-MbO9fkjftSQRoD5wOV5%2Ftela_cadastro.png?alt=media\&token=b56bdcd6-80be-4c50-8fc5-29a266bf887b)