Node.js / 토큰(Token)

JWT(JSON Web Token)

인터넷 표준 인증 방식으로, JSON 객체에 인증 정보를 담고 토큰으로 암호화한 것

* 토큰(Token) : 출입증 역할을 하는 도구로, 클라이언트가 소지하고 있음

구조

검증 방식

Header와 Payload를 각각 base64로 인코딩
인코딩한 Header와 Payload를 합쳐서, Secret(서버만 알고 있는 비밀 키)으로 서명(Signature 생성)
서버는 전달받은 JWT의 Signature가 Secret으로 다시 계산한 것과 일치하는지 확인
→ 일치하면 위조되지 않은 유효한 토큰으로 판단

* 이 때 base64 인코딩 방식은 얼마든지 디코딩이 가능하기 때문에, payload에 민감한 정보를 넣지 않도록 해야한다.

공식 홈페이지에서 토큰의 유효성을 확인해볼 수 있다. base64로 인코딩하는 사이트는 여기

토큰의 종류

액세스 토큰 : 권한 인증용
리프레시 토큰 : 액세스 토큰 재발급용

토큰 인증의 흐름

1) 정상적으로 인증이 완료됐을 때

2) 토큰 인증에 이상이 생겼을 때

실습은 쿠키 기반 인증과 토큰 기반 인증 방식 두 가지가 있다.

둘다 이전 세션 실습에서 했던 로그인 기능의 세션 부분을 토큰으로 재구현하도록 했다.

실습 - 쿠키 기반 인증 방식

서버가 인증 후 클라이언트에 쿠키로 토큰을 주는 방식이다.

클라이언트는 이 쿠키를 브라우저가 자동으로 저장함.
이후 요청마다 자동으로 Cookie 헤더에 쿠키를 포함함.
사용자는 신경 안 써도 됨 (브라우저가 알아서 쿠키 전송).

server.js

const express = require('express');
const cors = require('cors');
const cookieParser = require('cookie-parser');
const jwt = require('jsonwebtoken');

const users = [
  {
    user_id: 'test',
    user_password: '1234',
    user_name: '테스트유저',
    user_info: '저는 테스트유저입니다...',
  },
];

const app = express();
app.use(
  cors({
    origin: ['http://127.0.0.1:5500', 'http://localhost:5500'],
    methods: ['POST', 'GET', 'DELETE', 'OPTIONS'],
    credentials: true, // 쿠키 저장을 위해 필요
  }),
);

app.use(cookieParser());
app.use(express.json());
// app.use(
//   session({
//     // 암호화를 위해 설정하는 비밀 코드
//     secret: 'session secret',
//     resave: false, // request가 될 때마다 세션 데이터를 항상 다시 저장할지 여부 (변경이 없어도)
//     // 초기화되지 않은 세션을 저장할지 여부 (세션에 아무 내용이 없어도 저장할지)
//     saveUninitialized: false,
//     name: 'session_id',
//   }),
// );
const secretKey = 'ozcodingschool';

session말고 jwt을 사용하기 때문에 session 부분은 삭제하고 jwt 모듈을 require로 불러왔다.

그 외 express()로 서버 객체 생성이나 cors 설정 부분, 쿠키나 json 부분은 그대로 사용하며 session 부분은 사용하지 않는다.

그리고 토큰을 사용할 것이기 때문에 secretKey 값을 생성했다.

app.post()

// 라우팅
app.post('/', (req, res) => {
  const { userId, userPassword } = req.body;

  const userInfo = users.find(
    (el) => el.user_id === userId && el.user_password === userPassword,
  );

  if (!userInfo) {
    res.status(401).send('로그인 실패');
  } else {
    // sign() : 토큰 생성 함수
    // expiresIn : 토큰의 유효기간
    // 지금은 10분으로 설정
    const accessToken = jwt.sign({ userId: userInfo.user_id }, secretKey, {
      expiresIn: 1000 * 60 * 10,
    });
    console.log(accessToken);
    // 세션 부분 사용X
    // req.session.userId = userInfo.user_id;
    
    // 토큰 값을 쿠키로 저장
    res.cookie('accessToken', accessToken);
    res.send('토큰 생성 완료');
  }
});

절대 127.0.0.1을 localhost로 바꾸는걸 잊어선 안돼....

일단 accessToken가 어떻게 구성되는지 확인해보면

이렇게 나온다... 일단 . 을 기준으로 나누면

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJ1c2VySWQiOiJ0ZXN0IiwiaWF0IjoxNzQ3MzI1MDM1LCJleHAiOjE3NDc5MjUwMzV9.
U-SYp3267fZKH23SL5r_Gw298PthzjdMHuOe6uY0I3g

중간부분인 eyJ1c ~~ 부분이 payload 부분이 된다. 이걸 위에 언급한 base64 인코딩 사이트에서 확인해보면

userId 값을 잘 확인할 수 있다!

이 때 iat는 토큰이 언제 생성됐는지, exp는 언제 만기되는지의 값이라서

exp - lat를 계산해보면 600000(밀리초 단위라 10분을 의미)이 나온다

아무튼 쿠키도 잘 생성되고 있는 것을 확인할 수 있다!

app.get()

app.get('/', (req, res) => {
  // 구조분해할당 문법 이용
  const { accessToken } = req.cookies;
  // verify() : 토큰을 검증할 때 사용
  // payload 부분을 base64형식을 디코딩한 것과 동일한 값을 반환한다
  const payload = jwt.verify(accessToken, secretKey);
  const userInfo = users.find((el) => el.user_id === payload.userId);
  return res.json(userInfo);
});

login.js에서 get 메소드 요청 시 유저정보를 렌더링하도록 했는데, 잘 실행되고있음을 확인할 수 있다!

app.delete()

app.delete('/', (req, res) => {
  // 쿠키에 토큰 정보가 들어있으므로 쿠키만 삭제
  res.clearCookie('accessToken');
  res.send('토큰 삭제 완료');
});

아무튼 쿠키 기반 인증 방식의 server.js 코드는 아래와 같다

const express = require('express');
const cors = require('cors');
const cookieParser = require('cookie-parser');
const jwt = require('jsonwebtoken');

const users = [
  {
    user_id: 'test',
    user_password: '1234',
    user_name: '테스트유저',
    user_info: '저는 테스트유저입니다...',
  },
];

const app = express();
app.use(
  cors({
    origin: ['http://127.0.0.1:5500', 'http://localhost:5500'],
    methods: ['POST', 'GET', 'DELETE', 'OPTIONS'],
    credentials: true, // 쿠키 저장을 위해 필요
  }),
);

app.use(cookieParser());
app.use(express.json());
const secretKey = 'ozcodingschool';

// 라우팅
app.post('/', (req, res) => {
  const { userId, userPassword } = req.body;

  // 로그인 성공 여부를 userInfo에 담음
  const userInfo = users.find(
    (el) => el.user_id === userId && el.user_password === userPassword,
  );

  if (!userInfo) {
    res.status(401).send('로그인 실패');
  } else {
    // expiresIn : 토큰의 유효기간
    // 지금은 10분으로 설정
    const accessToken = jwt.sign({ userId: userInfo.user_id }, secretKey, {
      expiresIn: 1000 * 60 * 10,
    });
    console.log(accessToken);
    res.cookie('accessToken', accessToken);
    res.send('토큰 생성 완료');
  }
});

app.get('/', (req, res) => {
  const { accessToken } = req.cookies;
  // verify() : 토큰을 검증할 때 사용
  // payload 부분을 base64형식을 디코딩한 것과 동일한 값을 반환한다
  const payload = jwt.verify(accessToken, secretKey);
  const userInfo = users.find((el) => el.user_id === payload.userId);
  return res.json(userInfo);
});

app.delete('/', (req, res) => {
  // 쿠키에 토큰 정보가 들어있으므로 쿠키만 삭제
  res.clearCookie('accessToken');
  res.send('토큰 삭제 완료');
});

app.listen(3000, () => console.log('서버 실행'));

실습 - Bearer Token 방식

쿠키에 저장하지 않고, 자바스크립트 변수(localStorage, sessionStorage, 또는 React state 등)에 저장해 직접 Authorization 헤더에 붙이는 방식

로그인 시 서버에서 **토큰(JWT 등)**을 응답으로 보냄.
클라이언트가 이 토큰을 js 변수에 저장.
이후 API 요청 시 직접 헤더에 포함시킴.

app.post()

server.js

// 라우팅
app.post('/', (req, res) => {
  const { userId, userPassword } = req.body;

  // 로그인 성공 여부를 userInfo에 담음
  const userInfo = users.find(
    (el) => el.user_id === userId && el.user_password === userPassword,
  );

  if (!userInfo) {
    res.status(401).send('로그인 실패');
  } else {
    const accessToken = jwt.sign({ userId: userInfo.user_id }, secretKey, {
      expiresIn: 1000 * 60 * 10,
    });
    // 응답으로 바로 토큰을 전송
    res.send(accessToken);
  }
});

이번엔 쿠키를 사용하지 않고 바로 응답으로 토큰을 전송했다.

// 클라이언트에서 쿠키 대신 관리해줄 변수
let accessToken = '';

function login() {
  const userId = idInput.value;
  const userPassword = passwordInput.value;
  return axios
    .post('http://localhost:3000', { userId, userPassword })
    .then((res) => (accessToken = res.data));
}

바로 토큰을 전송했으므로 응답을 받아온 뒤 콘솔창에 출력했다.

응답이 잘 도착한 것까지 확인했으니 이제 쿠키 대신 변수에 저장해 불러오도록 해야된다.

app.get()

function getUserInfo() {
  return axios.get('http://localhost:3000', {
    // 이게 정해진 양식이므로 이렇게 보내줘야함!!
    headers: { Authorization: `Bearer ${accessToken}` },
  });
}

server.js

app.get('/', (req, res) => {
  const accessToken = req.headers.authorization.split(' ')[1];
  const payload = jwt.verify(accessToken, secretKey);
  const userInfo = users.find((el) => el.user_id === payload.userId);
  return res.json(userInfo);
});

지금 코드에서는 굳이 Bearer를 써서 굳이 굳이 굳이... split(' ')[1]해서 가져오고 있는데 단순 기술적으로는 현재 코드에서는 안써도 되긴하지만 표준에 맞추기 위해 쓴다고 한다.

* Authorization 헤더는 HTTP 표준에 따라 여러 방식의 인증 정보를 보낼 수 있게 되어 있는데 그 중 하나가 Bearer 토큰 방식이라 Bearer를 먼저 쓰고 그 다음 토큰을 쓰는 식으로 사용하고 있다.

app.delete()

사실 지금은 그냥 변수에 담아두고 있기 때문에 delete() 라우팅 자체가 필요가 없다.

그래서 클라이언트(login.js) 에서 그냥 accessToken 값을 비워두면 해결된다.

function logout() {
  accessToken = '';
}

logoutBtn.onclick = () => {
  logout();
  renderLoginForm();
};

쿠키 vs 세션 vs 토큰

'Node.js' 카테고리의 다른 글

Node.js / 세션(Session) (0)	2025.05.14
Node.js / 쿠키(Cookie) (0)	2025.05.14
Node.js / 네트워크 기초 (0)	2025.05.12

hykim

Node.js / 토큰(Token)

JWT(JSON Web Token)

구조

검증 방식

토큰의 종류

토큰 인증의 흐름

실습 - 쿠키 기반 인증 방식

app.post()

app.get()

app.delete()

실습 - Bearer Token 방식

app.post()

app.get()

app.delete()

쿠키 vs 세션 vs 토큰

'Node.js' 카테고리의 다른 글

티스토리툴바

Node.js / 토큰(Token)

JWT(JSON Web Token)

구조

검증 방식

토큰의 종류

토큰 인증의 흐름

실습 - 쿠키 기반 인증 방식

app.post()

app.get()

app.delete()

실습 - Bearer Token 방식

app.post()

app.get()

app.delete()

쿠키 vs 세션 vs 토큰

'Node.js' 카테고리의 다른 글

'Node.js' Related Articles

티스토리툴바