[ 쿠키 | 세션 | JWT | TIL ] 쿠키와 세션, JWT에 대해서 - 쿠키

Haksoo JI·2022년 12월 23일

[ TIL ]

목록 보기

10/30

쿠키와 세션, JWT에 대해서 - 쿠키

Node.js를 공부하면서 로그인 기능을 구현하기 위해서 쿠키와 세션, JWT에 대해서 공부하고 알아보게 되었다. 평소에 굉장히 간단하게 로그인을 해서 여러 사이트의 기능들을 사용하고 있지만, 사실은 그리 간단한 기능은 아니라는 것을 알 수 있게 되었다.

자세한 설명들은 여러 블로그 등의 글에 많기 때문에 개념적인 이해와 사용을 위해서 정리해보고자 한다.

얄팍한 코딩사전 - 세션 VS. 토큰! JWT가 뭔가요?

노마드 코더 - 세션 vs 토큰 vs 쿠키? 기초개념 잡아드림. 10분 순삭!

JWT, 정확하게 무엇이고 왜 쓰이는 걸까?

위 영상들과 블로그 글을 통해 많은 도움을 받았다.

개요

위의 세 단어는 모두 로그인과 관련이 있는 단어이다. 특히 이 글에서는 쿠키에 대해서 살펴보려고 한다.

처음 로그인을 할 때
이후 로그인이 유지될 때

로 나누어서 각 기능들이 사용되는 흐름을 설명해보고자 한다. 위의 두 가지로 나누는 이유는 클라이언트와 서버가 통신을 하는 방식이 다르기 때문이다. 아래에 좀 더 자세하게 써보겠다.

쿠키

쿠키는 누구나 볼 수 있다. 예를 들자면 크롬 개발자 툴을 켜서 애플리케이션 항목에 보면 쿠키 저장소가 있고, 누르면 브라우저가 가진 쿠키들이 무엇이 있는지 알 수 있다. 따라서 보안에 매우 취약하기 때문에 로그인 기능을 쿠키 하나만으로 구현하지는 않는다. 다만 이해를 위해서 기록해본다.

1. 처음 로그인을 할 때

처음 로그인을 할 때 요구되어지는 기능은 1. 회원 확인(사용자 인증)과 추가적인 로그인 데이터 전송 없이도 서버에 사용자를 지속적으로 확인시켜 줄 수 있도록 따로 2. 브라우저에 로그인 정보 저장해놓기 이다. 클라이언트에서는 이런 정보를 브라우저의 쿠키 저장소에 쿠키로 저장해놓을 수 있다.

1번을 위해서는 DB에 등록된 데이터와 비교할 수 있어야 하겠고, 2번을 위해서는 전에 로그인했을 때의 데이터를 어딘가에 저장해놓고 서버에게 계속 보내주어야 사용자가 다시 로그인 시도를 하는 일이 없이 서버가 저장해놓은 데이터를 통해서 사용자를 알아볼 수 있을 것이다.

클라이언트에서 로그인 정보(Id, Pw 등)를 서버에 전달한다.
서버는 받은 정보와 DataBase의 정보를 비교하여 일치하는지 확인한다.
일치한다면 서버는 클라이언트가 보낸 요청에 허락한다는 응답을 보낸다.
응답을 보낼 때, 클라이언트가 로그인 정보를 브라우저의 쿠키 저장소에 저장하도록 설정한다.
클라이언트에서 로그인 기능이 구현되고 쿠키 저장소에 데이터가 저장된다.

코드

라이브러리는 express, cookie-parser를 임포트했다.

const express = require('express');
const app = express();
app.use(express.json());

const cookieParser = require('cookie-parser');
app.use(cookieParser());

const port = 3000;
app.listen(port, () => {
  console.log(port, '포트로 서버가 열렸어요!');
});

app.get("/", (req, res) => { res.status(200).send("set-cookie test") })

// 클라이언트에 쿠키 할당하기 - Set-Cookie 헤더를 생성 -> 헤더값으로 쿠키를 할당
// 즉 응답시 res.cookie() 메서드를 통해서 { 헤더 생성, 쿠키 설정, 쿠키 할당 } 실행됨.
// res.writeHead() 메서드도 사용가능하지만 복잡하고 가독성이 떨어짐.
app.get("/set-cookie", (req, res) => {
  const expires = new Date();
  expires.setMinutes(expires.getMinutes() + 60); // 만료 시간을 60분으로 설정합니다.

  res.cookie(`id`,`testId`, { expires });
  const cookie = req.cookies;
  console.log(cookie); 
  return res.status(200).json(cookie);
});

2. 로그인이 유지될 때

처음 로그인 이후 로그인이 유지되기 위해서

클라이언트의 request에는 항상 쿠키가 담겨서 서버로 전달된다.
원래는 그 요청에 맞는 자격을 갖추고 있는지 서버가 사용자에게 물어봐야 하겠지만
전송된 쿠키를 통해 로그인 정보를 확인할 수 있게 된다.
따라서 클라이언트는 별도의 추가 작업 없이도 계속해서 서버에게 자격을 증명할 수 있게된다.

코드


// 클라이언트가 보낸 requset의 header에 들어있는 쿠키를 받아서 출력하기
// cookie-parser 라이브러리 사용 -> req.cookies 로 쿠키에 접근.
app.get("/get-cookie", (req, res) => {
  const cookie = req.cookies; // { id: 'testId' }
  console.log(cookie)
  return res.status(200).json({cookie});
})