Guardando JWT en una 쿠키

가장 중요한 것은 JSON 웹 토큰의 중간에 웹 응용 프로그램, API 등을 사용하기 위한 자동화 메커니즘입니다.

Cuando estamos desarrollando una SPA puede resultarnos muy fácil utilizar el localStorage o el sessionStorage para persistir nuestro token en el lado del cliente. Aunque esto puede ser fácil, tiene un costo de seguridad 상당한. Por lo tanto, un mecanismo más seguro para persistir nuestro token de autorización, es guardarlo en una cookie. Veamos는 Express와 백엔드 앱을 모두 지원합니다.

Express Cookie-Parser에서 미들웨어를 먼저 설치하십시오.

추가로, 새로운 서버 웹을 위한 기본 모듈을 설치하십시오.

npm i express express-jwt jsonwebtoken cors cookie-parser --save

Este 미들웨어 inyecta las cookies proofientes en el request desde el cliente a nuestro objeto req. Este 미들웨어 facilita la lectura de las cookies al procesar solicitudes a nuestros endpoints.

Postiormente podemos crear nuestra cookie una vez el token ha sido firmado y la cookie contendrá dicho token.

// server.js

const express = require('express');
const jwt = require('express-jwt');
const jsonwebtoken = require('jsonwebtoken');
const cors = require('cors');
const jwtSecret = process.env.SECRET;
const app = express();

app.use(cors());
app.use(cookieParser());
app.use(
  jwt(
  { 
    secret: jwtSecret, 
    algorithms: ['HS256'],
    getToken: req => req.cookies.token
  }));

app.post('/login', (req, res) => {
    let authenticatedUser;
    // implementación del mecanismo de autenticación. buscar las credenciales en la base de datos u otro método, etc.
    // al finalizar el mecanismo anterior, pasamos a asignarle un valor a authenticatedUser
      const token = jsonwebtoken.sign(authenticatedUser, jwtSecret);

      res.cookie('token', token, { httpOnly: true });

      res.json({ success: 'welcome' });
});

app.listen(3000);

la línea 19 es la clave en este punto. En esta instrucción estamos logrando 2 objetivos:

Estamos creando un header en la respuesta que se enviará al cliente. Este header es Set-Cookie y contendrá el token generado. A partir de aquí, todos los 요청 http proofientes del cliente, tendrán el token en las cookies y servirá para validar a nuestro usuario.

La bandera httpOnly servirá para prevenir el acceso a esta cookie mediante javascript, adicionalmente sólo podrá ser usada en el protocolo http al mismo origin del que provino, mismo servidor e incluso mismo puerto. ****

¿cómo validamos el token una vez comencemos a recibir request desde el cliente autenticado?

Es muy sencillo, hagamos un zoom a nuestro código

app.use(
  jwt(
  { 
    secret: jwtSecret, 
    algorithms: ['HS256'],
    getToken: req => req.cookies.token
  }));

Notamos, para que el middleware express-jwt, valide el token alojado en las cookies, es necesario una función corta que le avise al middleware dónde debe ir a buscar el token, en este caso en el objeto req en el atributo cookies, subatributo 토큰(recordemos que cookie-parser se encarga de hacer la inyección de las cookies en el objeto req).

De esta manera podemos utilizar nuestros JWT alojándolos en Cookies.