Un JWT, también conocido como JSON Web Token, es un estándar en el mundo de la programación que nos permite transmitir datos de manera segura. Aunque este token de validación se usa a través de todo el desarrollo web, conocer cómo interactuar con él desde nuestro lenguaje de programación base es fundamental. Por este motivo, en este post, te enseñaremos cómo codificar un JWT con JavaScript gracias al uso de los métodos atob y btoa.
¿Cómo codificar un JWT con JavaScript?
Codificar un JWT con JavaScript es realmente muy sencillo, pues este elemento de transmisión de datos no deja de ser un simple string codificado en base 64. Esto quiere decir que es un elemento que podemos manipular fácilmente con este lenguaje de programación.
Para entender los métodos y pasos que te explicaremos a continuación, te recomendamos leer el post Base64 codificando y decodificando de Mozilla Developer Network.
Para codificar un JWT con JavaScript, usaremos dos utilidades del navegador: atob y btoa. Estos dos métodos nos permiten hacer conversiones entre strings y base 64. En este sentido, son similares a los métodos JSON.stringify y JSON. parse, que hacen conversiones entre strings y objetos. A continuación, te enseñaremos qué hace exactamente cada uno de estos métodos para codificar un JWT con JavaScript.
atob ( )
El método atob del navegador nos permite decodificar un string de datos codificado en Base64. Como puedes leer en nuestro post sobre qué hay en un JWT, este elemento de transmisión de datos está codificado usando este algoritmo. Por lo tanto, el método atob nos permitirá decodificar aquello que nos permite codificar un JWT con JavaScript.
Ten presente que para utilizar este método con un JWT, deberás decodificar solo una parte del token. Para ello, deberás utilizar el método JSON.parse para convertir este string a objeto y luego usar un método split para seleccionar la sección que necesitas.
Por lo anterior, a continuación te enseñamos una línea de código fundamental para utilizar este método:
JSON.parse (atob (token.split (‘.’)[1]));
Bajo el marco de la anterior línea de código, token es una constante dentro de la que se encuentra el string de nuestro JWT. En este sentido, podemos usar cualquier palabra fuera de token, mientras se refiera a la constante en la que guardemos nuestro JWT.
¿Qué hace exactamente este proceso? Pues lo que estaremos logrando con esta línea de código de tres métodos será decodificar nuestro JWT de un string larguísimo al objeto con las credenciales que lo componen. Es decir, pasa un JWT a un objeto legible. Exactamente lo que nos permite hacer la herramienta jwt.io, pero desde JavaScript.
Esto, después, nos permitirá identificar al usuario usando sus credenciales para que podamos ejecutar distintas acciones, como darle permisos de borrado o edición sobre determinados contenidos. Para ello, deberemos revisar quién es el usuario que ha iniciado sesión y si es el mismo que ha creado el contenido. Si este es el caso, declararemos una lógica para que se activen los botones de edición y de papelera.
btoa ( )
El método btoa del navegador, al contrario del método atob, nos permite codificar un string usando el algoritmo Base64. Es decir, nos permite crear JWT, algo poco usado en el frontend, pues las API se encargan de este proceso. Para conocer más sobre los distintos usos de este método, te invitamos a leer el post btoa ( ) en la página oficial de la Mozilla Developer Network.
Ahora que conoces los métodos para decodificar y codificar un JWT con JavaScript, te invitamos a leer nuestro post sobre decodificar JWT desde JavaScript para conocer cómo se utilizan estos métodos dentro de nuestro código y para qué.
Ahora que sabes cómo codificar un JWT con JavaScript, ¡ha llegado el momento de que uses este conocimiento en tus propios proyectos web! Si quieres seguir aprendiendo sobre la creación y desarrollo de este tipo de proyectos, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás todo lo fundamental para ser un experto en este ejercicio. ¿A qué esperas para dar el siguiente paso en tu formación como desarrollador web? ¡Pide ya más información y descubre cómo puedes cambiar tu vida en pocos meses!
