¿Cómo usar el JWT?

Contenido del Bootcamp Dirigido por: | Última modificación: 8 de abril de 2024 | Tiempo de Lectura: 3 minutos

Algunos de nuestros reconocimientos:

Premios KeepCoding

¿Sabes cómo usar e JWT? El JSON Web Token, también conocido como JWT, es un sistema seguro para transmitir datos en la web usando el formato JSON. Normalmente, este sistema se usa para gestionar las credenciales de un usuario cuando entra en una aplicación. En este sentido, es un objeto que devuelve una API al recibir credenciales validas de inicio de sesión. Sin embargo, este objeto puede hacer mucho más. En este post, te enseñaremos cómo usar el JWT para permitirle a tu usuario ejecutar diversas acciones.

Antes de empezar

Antes de enseñarte cómo usar el JWT, creemos que es importante que tengas claro este sistema. Por ello, te recomendamos leer nuestro post sobre qué es JSON Web Token, donde aprenderás sobre la estructura de un JWT y cómo practicar su creación.

¿Donde encontramos normalmente un JWT? Como te mencionamos antes, este sistema de transmisión de datos se emplea mucho para manejar la validación de credenciales de un usuario. En nuestro post sobre cómo usar sparREST puedes leer que este objeto está configurado como respuesta en el endpoint de autenticación POST/auth/login. Es decir, al recibir los parámetros de username y password y comprobar que estos son válidos, el endpoint devuelve un JWT de autenticación.

Ten presente que este proceso es común en muchas API, no solo en sparREST. Por ello, te recomendamos revisar el proceso de obtención de tokens cuando estés desarrollando tus aplicaciones web.

Este es el contexto en el que nos encontramos un JWT, pero no es el único uso que tiene este código de autenticación. A continuación, te enseñamos en qué otros momentos podemos usar el JWT y cómo asegurarnos de tenerlo a la mano.

¿Cómo usar el JWT?

Un código JWT nos permite identificar al usuario cuando ha iniciado sesión. En este sentido, será útil para permitir muchas de las acciones que solo un usuario validado podrá ejecutar. Por ejemplo, en todas las redes sociales necesitas haber iniciado sesión para crear un post. Entonces, un JWT es el que se encarga de saber si lo has hecho o no.

Otro caso en el que podremos usar el JWT es cuando queramos validar la identidad del usuario para permitir una acción sobre su contenido (solo el usuario que ha creado un post podrá eliminarlo o editarlo). Para reconocer al usuario y activar o no los botones de borrado y edición, deberemos conocer sus credenciales y, por ende, su JWT.

Ahora, para usar el JWT necesitamos tener este código a la mano. En los testeos de un proyecto, que se pueden hacer con Postman, normalmente nos vale con copiar el token y pegarlo en la sección headers. Sin embargo, en proyectos más grandes queremos una acción automática que perdure en el tiempo. Para ello, deberemos usar alguno de los medios que tenemos disponibles para la persistencia de datos en el navegador (localstorage, session storage, etc.).

¿Por qué debemos guardar este dato fuera de nuestro código? Pues porque los datos almacenados en simples variables de nuestro código se liberan de la memoria cuando se cumple la función dentro de la que están. Es decir, las variables declaradas en el ámbito de la función desaparecen una vez esta se ejecute. Por ello, y porque es un dato necesitado por muchas de las pantallas de la aplicación, deberemos guardarlo dentro de un espacio diferente.

A la hora de usar el JWT, es muy común guardar este código en el localstorage del navegador, pues este nos permite tener el dato disponible más allá de la sesión de búsqueda. De este modo, podemos guardar las credenciales de un usuario más allá de su sesión, lo que le permite acceder automáticamente a su cuenta cada vez que entre a nuestra aplicación.

Ten en cuenta que un dato guardado en localstorage se quedará ahí hasta que decidamos borrarlo (una acción común con botones de log out). Para conocer más sobre este proceso, te invitamos a leer nuestro post sobre guardar JWT en localstorage.

¿Qué sigue?

Ahora que sabes cómo usar el JWT en tus proyectos de desarrollo web, te invitamos a seguir aprendiendo sobre la creación y desarrollo de todo tipo de proyectos en nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás los conceptos, lenguajes, patrones y herramientas fundamentales para este ejercicio. ¿Quieres seguir formándote con nosotros para convertirte en todo un experto? ¡Inscríbete ya!

Posts más leídos

¡CONVOCATORIA ABIERTA!

Desarrollo Web

Full Stack Bootcamp

Clases en Directo | Profesores en Activo | Temario 100% actualizado