Una parte fundamental del desarrollo web es el tratamiento de datos: su comunicación, codificación y protección. Los JSON Web Tokens son un elemento importante para esta parte del desarrollo. Por ello, en este post, te enseñaremos exactamente qué hay en un JWT para que puedas reconocer sus componentes más importantes y entender su funcionamiento.
¿Qué es un JWT?
Un JWT, también conocido como JSON Web Token, es un estándar para transmitir información de forma segura en internet. Normalmente, vemos un JWT cuando estamos encriptando la información de credenciales de un usuario en una aplicación web. En este sentido, es una forma de validar la identidad del usuario en nuestros proyectos web.
Para reconocer un JWT, podemos pensar en un string largo, de longitud indefinida, que parece casi ilegible y que empieza por las letras ey. Esto quiere decir que es un string que está codificado en base 64, un algoritmo de codificación sencillo que se suele usar para este tipo de entornos. Al ser de fácil reconocimiento, esta codificación no se suele usar para esconder un secreto, sino para facilitar el envío de datos en peticiones HTTP (una imagen, un JWT, un objeto o JSON, etc.).
Entonces, dada la importancia de este elemento, a continuación te explicaremos exactamente qué hay en un JWT.
¿Qué hay en un JWT?
Para conocer exactamente qué hay en un JWT, debemos inspeccionar profundamente uno de estos tokens. Para ello, te recomendamos obtener un JWT de tu proyecto usando las credenciales de un usuario que estés manejando, ya sea desde Postman o desde API locales, como sparREST.
Una herramienta fundamental a la hora de descomponer y revisar qué hay en un JWT es jwt.io, en donde también podemos verificar y generar este tipo de elementos. Usar esta herramienta es muy sencillo, basta con insertar un JWT en la sección de encoded y revisar el resultado depurado en la sección decoded.
Entonces, al insertar tu propio token o el ejemplo de la web, verás que un JWT se compone de tres partes, que se reconocen porque un punto las separa. A continuación, te enseñamos cuáles son estas partes y qué rol cumplen en un JWT.
Header
La primera parte de un JWT es el header o cabecera. Esta se reconoce en la herramienta como el primer string en rojo antes del primer punto de un JWT. Esta sección nos permite conocer el algoritmo de encriptación de este elemento. Una vez desglosamos esta sección en nuestra herramienta, veremos un objeto con dos propiedades clave-valor.
A continuación, te mostramos lo que nosotros vemos. La primera propiedad nos dice el algoritmo de encriptación y la segunda nos dice el tipo de elemento, que será JWT.
{
“alg”: “HS256”,
“typ”: “JWT”
}
Payload
La segunda parte de un JWT es el payload, que representa los datos que se han metido dentro de este token. Estos se descomponen en la herramienta como un objeto con las claves y valores que hemos insertado. En el contexto normal de un JWT, estos valores serán las credenciales del usuario (username, password, etc.).
En nuestro caso, esta sección se desglosa en un objeto con cuatro propiedades: userId, username, iat y exp. Las primeras dos propiedades se refieren al usuario, la tercera a la fecha de creación del JWT y la cuarta a su fecha de caducidad (que normalmente se define a las 24 horas de su creación).
Las propiedades de fecha en un JWT están codificadas en otro formato. Para revisar esta fecha en términos que nosotros podamos leer, podemos pasar el valor de las propiedades a un objeto Date.
Verify signature
La última parte de un JWT es la verificación de su firma. Aunque los JWT no suelen usarse para esconder secretos, esta sección es fundamental para la seguridad de un JWT, pues es la firma de identificación de este elemento. Es decir, si llegamos a modificar algún dato del JWT dentro de la herramienta, veremos que este se procesará, pero su firma aparecerá como no verificada (invalid signature).
¿Te animas a seguir aprendiendo?
Ahora que sabes qué hay en un JWT, ¡te invitamos a probar este elemento en tus propios proyectos! Para seguir aprendiendo sobre el desarrollo y la creación de todo tipo de proyectos web, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás a dominar los conceptos, lenguajes y herramientas fundamentales para este ejercicio. ¡No te lo pierdas y solicita información!
