You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Atualmente, ao entrar na tela de login o usuario se depara com um texto que indica o inicio do "login automatico".
O objetivo dessa mudança é criar um novo componente, dentro de uma nova rota, que irá realizar essa tarefa de login automatico.
Esse issue é ideal para iniciantes, devido a sua baixa complexidade. Também é interessante para quem quer se familiarizar com o código e como as requisições para o Biblioterra funcionam.
Antes de começar:
Deixe a documentação do Biblioterra aberta, lá você pode fazer as requisições diretamente do seu navegador.
Siga o tutorial básico para deixar seu ambiente de desenvolvimento pronto.
Requisitos gerais:
Você deve criar uma nova rota que vai levar ao seu novo componente, nós utilizamos o react-router no Bibliomar, e você pode aprender sobre ele aqui:
Nós usamos componentes funcionais no Bibliomar (isso significa que usamos funções ao invés de classes).
As requisições devem ser feitas utilizando a biblioteca axios, ou a padrão do navegador fetch.
Não há requisitos quanto a forma que você quer apresentar essa tela de login. Apenas lembre-se que em todo o site incluímos o componente <Navbar />, que é a barra de navegação e usamos a classe css bg-alt como plano de fundo.
Dicas gerais:
Essas dicas devem lhe ajudar a se situar em como o processo de autenticação (e consequentemente, re-autenticação) funciona.
Você irá trabalhar com uma rota principal, a /user/validate, ela vai receber um token JWT, e retornará um novo token com uma data de expiração postergada. (Vamos entender melhor, passo a passo)
O login automatico é feito utilizando o endpoint /user/validate do Biblioterra. Este endpoint é protegido.
Endpoints protegidos significam que você deve estar autorizado para poder utilizar-los:
O Biblioterra trabalha com autenticação usando JWT do tipo Bearer.
Isso significa que você deve enviar, junto da sua chamada a API, um token Bearer no cabeçalho Authorization.
Você recebe um token JWT sempre que realizar um login correto em /user/login ou uma re-autenticação em /user/validate
Você, o desenvolvedor, salva esse token em algum lugar para poder utilizar-lo nas operações com o usuario autenticado.
Existem longas discussões sobre onde é o lugar mais seguro para salvar este token, e cada alternativa apresenta seus prós e contras.
Por isso, nós salvamos o token na interface localStorage, onde ele pode ser utilizado em toda a aplicação, e persiste mesmo quando o usuario fecha o navegador. Esse token é salvo na chave "jwt-token", e é muito importante manter esse nome.
O endpoint de revalidação retorna dois códigos de resposta principais, 200 e 401. 200 significa que tudo ocorreu bem, e no corpo dessa resposta está o novo token JWT atualizado. 401 significa que o token é inválido ou expirou, nesse caso, o usuario deve fazer login novamente.
Passo a passo:
Adicione sua rota no aplicativo:
Navegue até o arquivo App.tsx e sem seguida adicione o seguinte dentro da parte de <Routes>:
<Routes>
// ...
// Não substitua as outras rotas, apenas adicione isso ao final
<Routepath="/autologin"element={<SeuNovoComponente/>}/></Routes>
Isso vai definir que toda vez que alguém entrar na url /autologin, seu componente será renderizado.
Já no seu componente, salve o valor do token em alguma variavel:
constjwtToken=localStorage.getItem("jwt-token")
Em seguida, envie sua requisição com esse token no cabeçalho Authorization: Usamos a biblioteca axios nesse exemplo
constconfig={url: "https://biblioterra.herokuapp.com/v1/user/validate",method: "GET",/* Parte importante */headers: {Authorization: `Bearer ${jwtToken}`,},};
Em seguida, faça sua requisição, utilizando async/await ou promises.
letreq=awaitaxios.request(config);
ou
axios.request(config).then(...);
Você pode verificar o status e o corpo da requisição usando:
// Statusreq.status// Corpo (com o token JWT)req.data
Caso o status da requisição retorne OK (200), salve o novo token no localStorage:
constnewToken=req.data["access_token"]//Sempre nomeie a chave como "jwt-token", ou ela não será usada no resto do site. localStorage.setItem("jwt-token",newToken)
Seu melhor amigo nessa hora é o hook useEffect(), que vai executar seu código assim que o usuario entrar na página e ela renderizar. Lembre-se sempre de adicionar tratamento de erros. Cheque a documentação da biblioteca de requisições que você está usando para entender como fazer isso.
Agradeço o interesse, e estou aberto a responder qualquer pergunta ou sugestão, boa sorte!
The text was updated successfully, but these errors were encountered:
Atualmente, ao entrar na tela de login o usuario se depara com um texto que indica o inicio do "login automatico".
O objetivo dessa mudança é criar um novo componente, dentro de uma nova rota, que irá realizar essa tarefa de login automatico.
Esse issue é ideal para iniciantes, devido a sua baixa complexidade. Também é interessante para quem quer se familiarizar com o código e como as requisições para o Biblioterra funcionam.
Antes de começar:
Deixe a documentação do Biblioterra aberta, lá você pode fazer as requisições diretamente do seu navegador.
Siga o tutorial básico para deixar seu ambiente de desenvolvimento pronto.
Requisitos gerais:
Você deve criar uma nova rota que vai levar ao seu novo componente, nós utilizamos o
react-router
no Bibliomar, e você pode aprender sobre ele aqui:Nós usamos componentes funcionais no Bibliomar (isso significa que usamos funções ao invés de classes).
As requisições devem ser feitas utilizando a biblioteca
axios
, ou a padrão do navegadorfetch
.Não há requisitos quanto a forma que você quer apresentar essa tela de login. Apenas lembre-se que em todo o site incluímos o componente
<Navbar />
, que é a barra de navegação e usamos a classe cssbg-alt
como plano de fundo.Dicas gerais:
Essas dicas devem lhe ajudar a se situar em como o processo de autenticação (e consequentemente, re-autenticação) funciona.
Você irá trabalhar com uma rota principal, a
/user/validate
, ela vai receber um token JWT, e retornará um novo token com uma data de expiração postergada. (Vamos entender melhor, passo a passo)O login automatico é feito utilizando o endpoint
/user/validate
do Biblioterra. Este endpoint é protegido.Endpoints protegidos significam que você deve estar autorizado para poder utilizar-los:
O Biblioterra trabalha com autenticação usando JWT do tipo Bearer.
Isso significa que você deve enviar, junto da sua chamada a API, um token
Bearer
no cabeçalhoAuthorization
.Você recebe um token JWT sempre que realizar um login correto em
/user/login
ou uma re-autenticação em/user/validate
Você, o desenvolvedor, salva esse token em algum lugar para poder utilizar-lo nas operações com o usuario autenticado.
Existem longas discussões sobre onde é o lugar mais seguro para salvar este token, e cada alternativa apresenta seus prós e contras.
Por isso, nós salvamos o token na interface
localStorage
, onde ele pode ser utilizado em toda a aplicação, e persiste mesmo quando o usuario fecha o navegador. Esse token é salvo na chave "jwt-token", e é muito importante manter esse nome.O endpoint de revalidação retorna dois códigos de resposta principais,
200
e401
.200
significa que tudo ocorreu bem, e no corpo dessa resposta está o novo token JWT atualizado.401
significa que o token é inválido ou expirou, nesse caso, o usuario deve fazer login novamente.Passo a passo:
Adicione sua rota no aplicativo:
Navegue até o arquivo
App.tsx
e sem seguida adicione o seguinte dentro da parte de<Routes>
:Isso vai definir que toda vez que alguém entrar na url
/autologin
, seu componente será renderizado.Já no seu componente, salve o valor do token em alguma variavel:
Em seguida, envie sua requisição com esse token no cabeçalho
Authorization
:Usamos a biblioteca axios nesse exemplo
Em seguida, faça sua requisição, utilizando async/await ou promises.
ou
Você pode verificar o status e o corpo da requisição usando:
Caso o status da requisição retorne OK (200), salve o novo token no
localStorage
:Seu melhor amigo nessa hora é o hook
useEffect()
, que vai executar seu código assim que o usuario entrar na página e ela renderizar. Lembre-se sempre de adicionar tratamento de erros. Cheque a documentação da biblioteca de requisições que você está usando para entender como fazer isso.Agradeço o interesse, e estou aberto a responder qualquer pergunta ou sugestão, boa sorte!
The text was updated successfully, but these errors were encountered: