Autenticação JWT com Angular

Autenticação JWT com Angular

Featured Image Post2 (binary/octet-stream)

Existem diversas formas de se autenticar em um sistema. A mais famosa e adotada pela internet como padrão é o modelo de usuário e senha, onde apresentamos nosso identificador (id, nome de usuário, email ou semelhante) e um segredo compartilhado com o serviço que queremos acessar, que após sua validação, nos é devolvido um token que funciona como um bilhete de acesso aos nossos recursos pessoais naquele serviço. Quando implementamos sistemas monolíticos onde o backend e o frontend estão juntos esta manutenção deste token acontece de forma automática pela maioria das bibliotecas de autenticação disponíveis por aí. No máximo decidimos coisas como tempo de validade da sessão ou onde o tokenserá armazenado trocando uma variável de configuração ou outra. Porém, ao separarmos o backend do frontend esta gestão fica um pouco mais por nossa conta as decisões sobre o que fazer e usar para isso deve ser tomadas por nós durante a implementação. E existem enumeras formas de se fazer esta gestão de acesso, uma delas é simplesmente utilizar o tokenpadrão devolvido pelo sistema, mas neste caso como eles estão separados perdemos a possibilidade de atualizar a validade deste token nos obrigando a colocar novamente a senha para obter um novo acesso. Para nos auxiliar com estes problemas utilizaremos o JWT.

Autenticação

JWT

JWT ou JSON Web Token nada mais é que um objeto JSON definido na RFC 7519 para realizar transferência informação de permissões de acesso entre duas pontas. Ele é codificado e assinado e possuí o seguinte formato:   header.payload.signature

Pic Logo (image/png)

No header (cabeçalho) ficam os dados do token, que informam seu tipo e o algoritmo utilizado em sua assinatura: {    "alg": "HS256",     "typ": "JWT" } No payload (carga) ficam os dados do usuário e alguns metadados como a expiração do token: {     "sub": "1234567890",     "name": "John Doe",     "iat": 1516239022 }

header.payload.signature

Na signature (assinatura) os dados de header e payload codificados em base 64 e unidos por . (ponto) para serem assinados usando o algoritmo definido no header:   HMACSHA256(     base64UrlEncode(header) + "." +     base64UrlEncode(payload),     secret )   Com a assinatura é possível verificar se o token não foi alterado no caminho, garantindo sua integridade. Com ela também é possível confirmar a autenticidade de sua fonte.

JWT Token

Estes três blocos unidos por . (ponto) cada um codificado em base 64 compõem o JWT Token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.PcmVIPbcZl9j7qFzXRAeSyhtuBnHQNMuLHsaG5l804A   Após confirmar os dados de usuário e receber o JWT ele deve ser armazenado, normalmente em local storage, para ser utilizado nas requisições autenticadas usando o esquema de cabeçalho JWT:   Authorization: JWT <token>

Jwt Diagram (image/png)

Lets Code E1519841635832 (image/png)

Conclusão

O padrão JSON Web Token pode ser usado em várias linguagens e é rápido e facilmente transmitido. Você pode usar o token em um URL, um parâmetro POST ou um cabeçalho HTTP. A versatilidade do JSON Web Token nos permite autenticar uma API de maneira rápida e fácil, transmitindo informações por meio do token.   Já existem bibliotecas no Angular que implementam a autenticação usando JWT automaticamente, porém, ter a autonomia para fazer os ajustes necessários de acordo com suas necessidades e compreender o funcionamento deste mecanismo, faz com que uma implementação um pouco mais manual valha a pena o esforço.

OBRIGADO

Like (image/png)

Caption: : Caio Régis - @caioregiiis