Autenticação no React
Usando Django REST Framework e JWT
Autenticação pode ser uma coisa simples de se fazer, mas para usuários iniciais pode se tornar uma dor de cabeça (como acabou sendo para mim no começo), com isso, resolvi criar este artigo para ajudar quem está começando ou já tem experiência, mas não conheça sobre React ou até mesmo Django REST.
Instalando as dependências
Para auxiliar neste artigo, eu criei um repositório no GitHub, lá estão todos os passos necessários para que o projeto funcione, junto com as dependências necessárias para que o projeto rode com tudo certo.
Django REST Framework
Django REST Framework é uma ferramenta poderosa e flexível para a construção de APIs Web.
Quem já desenvolveu em Django sabe como é fácil a manipulação do Banco de Dados e de objetos, e isso não é diferente com essa ferramenta! Objetos são facilmente manipuláveis e possuem uma forma de consulta aos seus valores muito fácil.
A ideia com Django REST é muito semelhante na manipulação de suas views, mas aqui, ao invés de retornar um HTML preenchido com os dados, como é no Django comum, você retorna um JSON contendo todas as informações solicitadas naquela URL.
Para a autenticação, iremos usar o Simple JWT, um plugin de autenticação de JSON Web Token para o Django REST Framework.
Quem quiser saber mais sobre o JWT, recomendo esse artigo do Vitor Freitas que mostra o que está por trás daquele monte de letras e números.
Com o Simple JWT, nós podemos criar uma url que retorne o Token de acesso e o Token de recarga após o usuário informar o seu usuário e senha.
Com essa url, é possível acessar o /api/token/ para realizar o login de sua aplicação front-end. Falando em aplicação front-end, vamos falar sobre o React.
React
No React, que é uma interface JavaScript para construir interfaces de usuário, eu vou construir somente uma página que conterá o formulário de login e de cadastro, é um código bem simples, somente para entendermos como funciona a conexão com o back-end.
Nessa página eu chamei o módulo de Login.
No módulo de Login, teremos o formulário que pede para o usuário digitar um username e uma senha.
Bem, temos o formulário, mas agora precisamos mandar as informações que coletarmos para o servidor, certo!? Para isso, precisamos criar um método na classe Login que seja chamado toda vez que o botão de enviar for chamado. Para isso, criei o método chamado login (sim, eu não tenho criatividade).
Como é possível ver na linha 4, estamos criando a requisição e na linha 6 é passado os atributos necessários para se fazer o login, que são o username e a senha informados pelo usuário.
Para a requisição ao servidor, eu estou usando a fetch API, que promete ter um conjunto de funcionalidades mais poderosos e flexíveis. Essa API, trabalha com o conceito de Promises do JavaScript. Promises representam uma eventual completude (ou falha) de uma operação assíncrona, e seu valor resultante.
Na linha 12, podemos ver a URL para o nosso servidor back-end. Na linha seguinte, nós tratamos a resposta do servidor, caso seja ok — com o código HTTP 200 — então nós sabemos que tudo ocorreu bem com nossa requisição, caso não seja 200, lançamos um erro para ser exibido ao usuário.
Se a requisição for bem sucedida, precisamos salvar nossos tokens no armazenamento local de quem está acessando nossa página, para isso, usamos o localStorage para salvar esses tokens localmente. O retorno do servidor é algo como:
Mas ainda precisamos extrair o token de dentro do JSON retornado! Temos que pegar o que está dentro dele para salvarmos no lado do cliente. Para isso, usamos o JSON.parse, que transforma o Json em uma lista, que é mais fácil de manipular.
Fiz o Login, e agora?
Agora que você tem os tokens necessários para que o Login do cliente seja feito, precisamos usar esse Token para pegar as informações confidenciais do servidor, certo?
Para isso, no Header da requisição precisamos passar o access_token:
Como é possível ver na linha 10, estamos passando o token junto com o Header na requisição HTTP. O formato padrão desse Header é o que você encontra nessa mesma linha, com a chave sendo “Authorization” e o valor sendo “Bearer ” seguido do token de acesso.
E chegamos ao final
Com tudo que vimos até aqui nós conseguimos realizar o login de nosso usuário e também requisitar informações que precisem de um usuário ativo.
Até o próximo post, galera!
