Vamos a crear un JWT Token con Node.js para ver un ejemplo práctico del artículo anterior de JSON Web Tokens . En este caso he elegido Javascript ya que la implementación es muy sencilla. Lo primero que tendremos que hacer es instalar varias librerías de Node.
- npm install express
- npm install body-parser
- npm install jsonwebtoken
- npm install express-jwt
JWT Token y Node
Es momento de construir nuestra aplicación con Node.js:
var express = require('express');
var bodyParser=require('body-parser');
var jwt=require('jsonwebtoken');
var expressJwt=require('express-jwt');
var app = express();
var jwtClave="laclave_de_cecilio";
app.use(express.static('publica'));
app.use(bodyParser.json());
app.use(expressJwt({secret:jwtClave}).unless({path: ["/login"]}));
var usuario= {
nombre:"cecilio",
clave:"cecilio"
}
var noticias = [{
id: 1,
titulo: "noticia 1"
}];
app.get('/noticias', function(req, res) {
res.send(noticias);
});
app.post("/login",function(request,response) {
if (request.body.nombre==usuario.nombre || request.body.clave==usuario.clave) {
var token=jwt.sign({
usuario:"cecilio"
},jwtClave);
response.send(token);
}else {
response.status(401).end("usuario incorrecto")
}
});
app.listen(3000, function() {
console.log('aplicacion en el puerto 3000!');
});
No es mucho código pero vamos a explicarlo. En primer lugar lo que más destaca es que disponemos de dos URL de acceso. Una es /login que servirá para logearnos en el servidor la otra es /noticias que nos devuelve una noticia.
Ambas URL están protegidas por el módulo de express-jwt que se registra previamente y que hace la función de filtro o interceptor:
var jwtClave="laclave_de_cecilio";
app.use(expressJwt({secret:jwtClave}).unless({path: ["/login"] }));
Este módulo protege todas las URL salvo la url de Login y los recursos estáticos :
Cada vez que nosotros solicitemos la url de noticias nos devolverá acceso no permitido ya que no tenemos un token:
Así pues tenemos que construirnos una aplicación cliente que envíe una petición POST al servidor a la URL de Login y pase usuario “cecilio” y clave “cecilio”, esto nos devolverá un token:
app.post("/login",function(request,response) {
if (request.body.nombre==usuario.nombre || request.body.clave==usuario.clave) {
var token=jwt.sign({
usuario:"cecilio"
},jwtClave);
response.send(token);
}else {
response.status(401).end("usuario incorrecto")
}
});
Vamos a construir un documento html en la carpeta pública del servidor que se apoye en jQuery y se encargue de realizar tanto la petición de login como la de las noticias:
<body> <input type="text" id="nombre" /> <input type="text" id="clave" /> <input type="button" id="login" value="login" /> <input type="button" id="noticias" value="noticias" /> </body>
Unicamente tenemos dos cajas de texto y dos botones (login,noticias) .
El primer botón realiza una petición Ajax al servidor y nos devuelve un token. El segundo botón solicita las noticias. Vamos a ver el código de JavaScript creado con jQuery que es algo que todos entendemos.
$(document).ready(function() {
var token = "";
$("#login").click(function() {
var usuario = {
nombre: $("#nombre").val(),
clave: $("#clave").val()
};
$.ajax({
url: 'login',
type: 'post',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(usuario),
success: function(data) {
token=data;
},
error:function(error) {
console.log(error);
}
});
});
$("#noticias").click(function() {
$.ajax({
url: 'noticias',
type: 'get',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function(data) {
console.log(data);
},
beforeSend: function(xhr) {
console.log(token);
xhr.setRequestHeader("Accept", "application/json");
xhr.setRequestHeader("Authorization", "Bearer "+token);
},
});
});
});
El código no es muy complicado y únicamente gestiona dos eventos “login” y “noticias” . El primero de ellos solicita un token al servidor realizando una petición AJAX y enviando los datos en JSON. Cuando recibe la respuesta almacena el token en una variable global. El evento de noticias hace una petición al servidor solicitando las noticias y pasando el token que acabamos de obtener como parámetro en la cabecera.
De esta forma podremos acceder a los datos solicitando primero el JWT token para despues imprimirlos en la consola:
Otros artículos relacionados:
donde puedo contactarte?
puedes escribirme a contacto@arquitecturajava.com
muchas gracias por explicar! muy buen post!
De nada 🙂
Excelente forma de explicarlo, mas claro no se puede. Lo entendí, muchas gracias
de nada 🙂
Extraordinario ejemplo Cecilio, me aclaro muchos conceptos.
Muchas gracias por compartir tus conocimientos y entregar valor de primer nivel en el área de desarrollo web.
Slds 😉
me alegro que te haya sido de utilidad 🙂
Muy bueno. Gracias
de nada 🙂