Como o JWT (JSON Web Token) funciona_ Saiba agora!

Prévia do material em texto

15/06/2020 Como o JWT (JSON Web Token) funciona? Saiba agora!
https://www.devmedia.com.br/como-o-jwt-funciona/40265 1/12
Marcar como concluído Anotar
Artigos
JavaScript
Como o JWT funciona
O que é JSON Web Token?
JWT (JSON Web Token) é um método RCT 7519 padrão da indústria para
realizar autenticação entre duas partes por meio de um token assinado que
autentica uma requisição web. Esse token é um código em Base64 que armazena
objetos JSON com os dados que permitem a autenticação da requisição.
Artigo
Como o JWT funciona
JWT, sigla para JSON Web Token, é uma técnica de�nida na RFC 7519 para autenticação remota
entre duas partes. Ele é uma das formas mais utilizadas para autenticar usuários em APIs RESTful.
Invista em você! Saiba como a DevMedia pode ajudar sua
carreira.
24
https://www.devmedia.com.br/artigos/
https://www.devmedia.com.br/artigos/javascript
https://www.devmedia.com.br/tecnologia/
https://www.devmedia.com.br/tecnologia/
https://www.devmedia.com.br/assistente/
https://www.devmedia.com.br/
https://www.devmedia.com.br/
15/06/2020 Como o JWT (JSON Web Token) funciona? Saiba agora!
https://www.devmedia.com.br/como-o-jwt-funciona/40265 2/12
No exemplo da Figura 1 vemos um cliente que enviará uma requisição HTTP ao
endpoint de autenticação de uma API. Nela o cliente envia, no corpo da
requisição dados como endereço de e-mail e senha.
Saiba mais: JWT: Web services seguros em Java
Figura 1. Cliente enviando requisição com dados de autenticação
Uma vez que os dados enviados pelo cliente tenham sido autenticados no
servidor, este criará um token JWT assinado com um segredo interno da API e
enviará este token de volta ao cliente, como mostra a Figura 2.
24
https://www.devmedia.com.br/curso/jwt-web-services-seguros-em-java/2152
https://www.devmedia.com.br/tecnologia/
https://www.devmedia.com.br/tecnologia/
https://www.devmedia.com.br/assistente/
https://www.devmedia.com.br/
https://www.devmedia.com.br/
15/06/2020 Como o JWT (JSON Web Token) funciona? Saiba agora!
https://www.devmedia.com.br/como-o-jwt-funciona/40265 3/12
Figura 2. Servidor envia o token assinado ao cliente
Provido com o token autenticado, o cliente possui acesso aos endpoints da
aplicação que antes lhes eram restritos. Para realizar esse acesso, conforme
mostra a Figura 3 é preciso informar esse token no header Authorization da
requisição e, por convenção, após a palavra Bearer .
Figura 3. Usuário com token autenticado pode acessar endpoints restritos24
https://www.devmedia.com.br/tecnologia/
https://www.devmedia.com.br/tecnologia/
https://www.devmedia.com.br/assistente/
https://www.devmedia.com.br/
https://www.devmedia.com.br/
15/06/2020 Como o JWT (JSON Web Token) funciona? Saiba agora!
https://www.devmedia.com.br/como-o-jwt-funciona/40265 4/12
Como é por dentro?
Um JSON Web Token é composto por três componentes básicos: HEADER,
PAYLOAD e SIGNATURE. Vamos passar por cada um desses componentes com
um exemplo.
Header
É o cabeçalho do token e contém dois campos: alg , que informa o algoritmo
usado para criar a hash da assinaturas; e typ , que indica que este se trata de um
token JWT.
Payload
É o componente onde se encontram os dados referentes à própria autenticação.
Signature
24
1
2
3
4
{
 "alg": "HS256",
 "typ": "JWT"
}
1
2
3
4
{
 "email": "aylan@boscarino.com",
 "password": "ya0gsqhy4wzvuvb4"
}
https://www.devmedia.com.br/tecnologia/
https://www.devmedia.com.br/tecnologia/
https://www.devmedia.com.br/assistente/
https://www.devmedia.com.br/
https://www.devmedia.com.br/
15/06/2020 Como o JWT (JSON Web Token) funciona? Saiba agora!
https://www.devmedia.com.br/como-o-jwt-funciona/40265 5/12
É a assinatura única de cada token que é gerada a partir de um algoritmo de
criptogra�a e tem seu corpo com base no header, no payload e no segredo
de�nido pela aplicação. No próximo tópico entraremos em mais detalhes.
Construção de um token
A assinatura de um JSON Web Token é seu componente mais sensível por
tratar justamente da segurança deste token. Por conta disto existe uma fórmula
padrão para que o token seja adequadamente assinado, exigindo que o token seja
uma hash em Base64 gerada de um algoritmo de criptogra�a, por exemplo
SHA256 ou SHA512, e essa hash precisa ser feita a partir do header e do payload
do token.
A seguir temos um exemplo ilustrando como criar uma signature no padrão JWT
utilizando o header e o payload que citamos previamente. O exemplo é feito
utilizando Node.js, porém qualquer tecnologia pode ser aplicada para esse �m,
contanto que siga o padrão da especi�cação JWT:
24
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const crypto = require('crypto');
 
const header = JSON.stringify({
 'alg': 'HS256',
 'typ': 'JWT'
});
 
const payload = JSON.stringify({
 'email': 'aylan@boscarino.com',
 'password': 'ya0gsqhy4wzvuvb4'
});
 
const base64Header = Buffer.from(header).toString('base64').replace(/=/g, '');
const base64Payload = Buffer.from(payload).toString('base64').replace(/=/g, '');
const secret = 'my-custom-secret';
 
const data = base64Header + '.' + base64Payload;
 
const signature = crypto
https://www.devmedia.com.br/tecnologia/
https://www.devmedia.com.br/tecnologia/
https://www.devmedia.com.br/assistente/
https://www.devmedia.com.br/
https://www.devmedia.com.br/
15/06/2020 Como o JWT (JSON Web Token) funciona? Saiba agora!
https://www.devmedia.com.br/como-o-jwt-funciona/40265 6/12
Linha 1: Importamos a biblioteca interna do Node.js crypo , que possui as
ferramentas padrão de criptogra�a da plataforma:
Linhas 3 a 8: Transformamos o objeto JSON do header e do payload em
strings simples:
24
20
21
22
23
24
25
26
27
28
29
 .createHmac('sha256', secret)
 .update(data)
 .digest('base64');
 
const signatureUrl = signature
 .replace(/\+/g, '-')
 .replace(/\//g, '_')
 .replace(/=/g, '')
 
console.log(signatureUrl);
1 const crypto = require('crypto');
1
2
3
4
const header = JSON.stringify({
 'alg': 'HS256',
 'typ': 'JWT'
});
1
2
3
4
const payload = JSON.stringify({
 'email': 'aylan@boscarino.com',
 'password': 'ya0gsqhy4wzvuvb4'
});
https://www.devmedia.com.br/tecnologia/
https://www.devmedia.com.br/tecnologia/
https://www.devmedia.com.br/assistente/
https://www.devmedia.com.br/
https://www.devmedia.com.br/
15/06/2020 Como o JWT (JSON Web Token) funciona? Saiba agora!
https://www.devmedia.com.br/como-o-jwt-funciona/40265 7/12
Linhas 13 e 14: Convertemos o header e o payload para o formato Base64,
conforme manda a especi�cação do JWT. Quando criamos uma string em
Base64 é comum ter um ou mais caracteres de = em seu �nal: isso ocorre
porque o número de caracteres de uma string Base64 é sempre múltiplo de 4
e quando isso não acontece naturalmente a string é preenchida com iguais
= . Para remove-los utilizamos um replace:.
Linha 16: Salvamos o segredo do nosso exemplo em uma constante. Um
segredo pode ser qualquer string, a partir da qual será feito o hashing da
nossa assinatura. Quanto mais complexo for o segredo, mais seguro é o
nosso JWT:
Linha 18: Para criarmos a signature precisamos primeiro concatenar ambas
as strings em Base64 do header e do payload com um ponto, seguindo um
formato especí�co: header.payload .
24
1
2
const base64Header = Buffer.from(header).toString('base64').replace(/=/g, '
const base64Payload = Buffer.from(payload).toString('base64').replace(/=/g,
1 const secret = 'my-custom-secret';
1 const data = base64Header + '.' + base64Payload;
https://www.devmedia.com.br/tecnologia/
https://www.devmedia.com.br/tecnologia/
https://www.devmedia.com.br/assistente/
https://www.devmedia.com.br/
https://www.devmedia.com.br/
15/06/2020 Como o JWT (JSON Web Token) funciona? Saiba agora!
https://www.devmedia.com.br/como-o-jwt-funciona/40265 8/12
Linha 20: Criamos efetivamente a signature utilizando o método createHmac
da biblioteca crypto. Este método retornará um objeto do tipo hmac .
Executaremos seu métodoupdate com os dados que queremos assinar e, por
�m, digest com o formato da hash que o JWT exige: Base64.
Linha 25: O formato Base64 utiliza os caracteres + e /+ por hífen - e as
barras / por underscores _ :
Linha 30: Imprimimos nosso token no console para visualizá-lo.
Com a assinatura concluída terminamos o token concatenando seu header,
payload e signature, no formato Base64 adequado para URL em uma única string
dividida por pontos seguindo a ordem: header.payload.signature .
24
1
2
3
4
const signature = crypto
 .createHmac('sha256', secret)
 .update(data)
 .digest('base64');
1
2
3
4
const signatureUrl = signature
 .replace(/\+/g, '-')
 .replace(/\//g, '_')
 .replace(/=/g, '')
1 console.log(signatureUrl);
https://www.devmedia.com.br/tecnologia/
https://www.devmedia.com.br/tecnologia/
https://www.devmedia.com.br/assistente/
https://www.devmedia.com.br/
https://www.devmedia.com.br/
15/06/2020 Como o JWT (JSON Web Token) funciona? Saiba agora!
https://www.devmedia.com.br/como-o-jwt-funciona/40265 9/12
Seguindo nosso exemplo �caria:
Veri�cação de um token
Com um token construído e seguro, é matematicamente impossível decodi�car a
assinatura sem ter o segredo-chave da aplicação. Porém, uma vez em posse do
segredo, qualquer aplicação pode decodi�car a assinatura e veri�car se ela é
válida. Isso é feito gerando uma signature utilizando o header e o payload
fornecidos pelo cliente para então comparamos essa signature gerada com a
presente no token enviado pelo cliente. Uma vez que as assinaturas sejam
idênticas, podemos permitir o acesso do cliente a uma área restrita da nossa
aplicação.
Tecnologias:
JavaScript JWT
Marcar como concluído Anotar
Saiba mais Veja a Série Primeiro contato com JWT
24
1
2
3
4
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJlbWFpbCI6ImF5bGFuQGJvc2Nhcmluby5
jb20iLCJwYXNzd29yZCI6InlhMGdzcWh5NHd6dnV2YjQifQ.yN_8-
Mge9mFgsnYHnPEh_ZzNP7YKvSbQ3Alug9HMCsM
https://www.devmedia.com.br/javascript
https://www.devmedia.com.br/guia/rest-e-java/36819
https://www.devmedia.com.br/jwt-json-web-tokens/
https://www.devmedia.com.br/tecnologia/
https://www.devmedia.com.br/tecnologia/
https://www.devmedia.com.br/assistente/
https://www.devmedia.com.br/
https://www.devmedia.com.br/
15/06/2020 Como o JWT (JSON Web Token) funciona? Saiba agora!
https://www.devmedia.com.br/como-o-jwt-funciona/40265 10/12
FAÇA PARTE DESSE TIME
Faça parte dessa comunidade 100% focada em programação e tenha acesso
ilimitado. Nosso compromisso é tornar a sua experiência de estudo cada vez mais
dinâmica e ef iciente. Portanto, se você quer programar de verdade seu lugar é
aqui. Junte-se a mais de...
+ 800 MIL
PROGRAMADORES
GRÁTIS
Cadastre-se
Por Aylan
Em 2019
Séries
Projetos completos
Cursos
Guias de carreiras
DevCasts
Desa�os
Artigos
App
Suporte em tempo real
24
https://www.devmedia.com.br/join/
https://www.devmedia.com.br/space/aylan-de-sousa-boscarino-1
https://www.devmedia.com.br/tecnologia/
https://www.devmedia.com.br/tecnologia/
https://www.devmedia.com.br/assistente/
https://www.devmedia.com.br/
https://www.devmedia.com.br/
15/06/2020 Como o JWT (JSON Web Token) funciona? Saiba agora!
https://www.devmedia.com.br/como-o-jwt-funciona/40265 11/12
RECEBA NOSSAS NOVIDADES
Informe o seu e-mail
Receber Newsletter
Cursos
Artigos
Revistas
Fale conosco
Trabalhe conosco
Assinatura para
empresas
Suporte ao aluno - Deixe a sua dúvida.
Postar
Poste aqui sua dúvida ou comentário.
24
https://certificacao.gptw.info/certificated-company/08401613000142
https://www.devmedia.com.br/cursos/
https://www.devmedia.com.br/artigos/
https://www.devmedia.com.br/revistas/
https://www.devmedia.com.br/fale-conosco/
https://www.devmedia.com.br/perfil/empresarial/devmedia
https://www.devmedia.com.br/empresarial/
https://github.com/DevMedia
https://www.facebook.com/devmedia.com.br/
http://twitter.com/devmedia
https://www.instagram.com/devmedia.com.br/
https://www.youtube.com/c/DevmediaBrasil
https://www.devmedia.com.br/tecnologia/
https://www.devmedia.com.br/tecnologia/
https://www.devmedia.com.br/assistente/
https://www.devmedia.com.br/
https://www.devmedia.com.br/
15/06/2020 Como o JWT (JSON Web Token) funciona? Saiba agora!
https://www.devmedia.com.br/como-o-jwt-funciona/40265 12/12
Hospedagem web por Porta 80 Web Hosting
24
https://github.com/DevMedia
https://www.facebook.com/devmedia.com.br/
http://twitter.com/devmedia
https://www.instagram.com/devmedia.com.br/
https://www.youtube.com/c/DevmediaBrasil
https://www.devmedia.com.br/tecnologia/
https://www.devmedia.com.br/tecnologia/
https://www.devmedia.com.br/assistente/
https://www.devmedia.com.br/
https://www.devmedia.com.br/