[ jwt ] React, Nodejs - jwt토큰을 발급하고 유효성을 검사해보자.

토큰을 발급하고 인증받고, 검증하려는데 구조와 프로세싱을 이해하는데 5일이 걸린 거 같다...
개발될수록 티스토리의 내용 및 코드가 변경될 수 있습니다.
 
참고사이트
- 구글 검색으로 "jwt", "token" 인증 관련 검색으로 나온 내용 전부
 

 
 

🧠 사전 지식

const jwt = require('jsonwebtoken');

//
// 토큰 발급 코드
//
// Data - 토큰에 담을 내용을 담습니다.
// SecretKey - 임의적으로 개발자가 정해줍니다.
// options - 토큰의 유효기간 및 서명 옵션을 지정했습니다.
const token = jwt.sign(Data<jwtContent>, SecretKey, signOptions )

//
// 토큰 검증 코드
//
// token - 발급 받은 토큰을 담습니다.
// SecretKey - 발급 시에 사용한 SecretKey를 넣습니다.
// Callback - 검증에 대한 결과를 나타내는 함수를 삽입합니다. 
const isVerified = jwt.verify(token, SecretKey, Callback);

 
• jwt.sign()을 이용하여 토큰을 발급한다.
• jwt.verify()를 이용하여 토큰을 검증한다.
 
이때, 토큰이 어떻게 검증되는 것인지 계속 궁금했다.
bcrypt를 공부한 직후라 어떠한 기준 값(Refresh-Token)과 비교하여 유효성을 검사하는 줄 알았지만, 그렇지 않았다.
 
서명에 발급자를 확인한다는데, 사이트에 인증된 발급자인 것을 어떻게 확인하는지 - 나를 구분하기 위해서는 SecretKey가 전부인데...
 
GPT에게 질문해보았다.
 
🧑🏻 Refresh-Token과 비교하여 발급된 Access-Token을 검증하는거야?
🤖 토큰을 검증할 때, access_token과 refresh_token을 서로 비교하는 것은 일반적으로 사용되지 않습니다. 대신, access_token의 유효성을 확인하고 만료되었는지 확인한 후, 만료된 경우에만 refresh_token을 사용하여 새로운 access_token을 발급하는 방식이 일반적입니다.

1. 서명 확인: 서버는 받은 access_token의 서명을 확인하여 해당 토큰이 신뢰할 수 있는 발급자에서 발급되었는지 확인합니다.
2. 유효 기간 확인: 서버는 토큰의 유효 기간을 확인하여 토큰이 만료되었는지 확인합니다.
3. 권한 확인: 서버는 토큰에 포함된 사용자의 권한 정보를 확인하여 해당 요청이 허용되는지 확인합니다.
4. 기타 사용자 정의 검증: 필요에 따라 추가적인 사용자 정의 검증을 수행할 수 있습니다. 예를 들어, 특정 사용자의 상태를 확인하거나, 특정 요청에 대한 권한을 검사할 수 있습니다.

 jwt.verify() 함수를 사용하면 위에서 설명한 1~4번의 과정을 한 번에 수행할 수 있습니다. jwt.verify() 함수는 받은 토큰을 디코딩하고, 서명을 확인하며, 유효 기간을 검사하고, 필요한 경우 사용자 정의 검증도 수행할 수 있습니다.
 
결론은 우선 코드를 작성해보고 하나하나 테스트해보자였다.
 
작성하는 시점 기준, SecretKey가 일치하면 문제가 없는 것으로 보인다.
 

2024. 03. 09 수정

고민하고 있을 때
유튜브 생활코딩에서 jwt강의를 올려주셨다.
 
https://www.youtube.com/watch?v=36lpDzQzVXs&pp=ygUR7IOd7Zmc7L2U65SpICBqd3Q%3D

 
참고하면 도움이 많이 될 거 같다.
 
앞서 작성한 내용에서 jwt토큰은 header와 payload, 그리고 header와 payload를 SecretKey로 암호화하여 3가지의 base64를 "."으로 이어서 만든다고 했다.
여기서 SecretKey는 서버만이 알고 있다(알고있어야만한다.)
 
따라서 검증방법은 서버는 클라이언트가 token을 보내면 해당 토큰의 header와 payload를 가져와서 디코딩한 다음,
서버에 등록된 SecretKey로 다시 한 번 토큰을 만든다.
이때 서버에서 검증을 위해 다시 만든 토큰과 클라이언트에서 전송된 토큰을 비교하여 검증하는 방식이라고한다.
 
 

🎫  토큰 발급

우선 데이터베이스를 연결하여 간단한 로그인 로직 Client Server를 만들자.
( 🔗 향후 MongoDB 카테고리 작성 후 링크 연결하기 )
 

🔐 쿠키 관리 코드 작성

우선 쿠키를 관리하기 위해 쿠키 관련 메소드를 정의한다.

import { Cookies } from 'react-cookie';

// 리액트 쿠키 인스턴스 생성
const cookies = new Cookies();

// 클라이언트에 쿠키를 저장합니다.
export const setCookie = (name, value, option) => {
  return cookies.set(name, value, { ...option });
};

// 클라이언트에 쿠키를 가져옵니다.
export const getCookie = (name) => {
  return cookies.get(name);
};

// 클라이언트의 쿠키를 삭제합니다.
export const removeCookie = (name) => {
  return cookies.remove(name);
};

 

🔐 로그인 코드 작성

로그인 과정은 다음과 같다.

const executeLogin = async (e) => {
    e.preventDefault();

    if (input.userId && input.userPw) {
      // 1. 사용자가 입력한 아이디와 패스워드를 받아
      const payload = {
        id: input.userId,
        password: input.userPw,
      };
      
      // 2. login을 관리하는 서버로 api를 post 요청을 보낸다.
      const response = await axios.post('/auth/login', payload, {
        headers: {
          'Content-Type': `application/json`,
          'Access-Control-Allow-Origin': `*`,
          'Access-Control-Allow-Credentials': 'true',
          Authorization: `Bearer ${getCookie('accesss_token')}`,
        },
      });

      if (response?.data.success) {
        // 3. Server의 응답으로부터 발급된 토큰을 쿠키에 저장 후 꺼내어 사용
        // httpOnly
        setCookie('access_token', `${response.data.access_token}`);

	// 4. 발급 받은 토큰을 API 통신할 때, headers 기본값에 담아서 사용
        axios.defaults.headers.common[
          'Authorization'
        ] = `Bearer ${response.data.access_token}`;

        navigate('/', { replace: true });
      } else {
        alert(response.data.message);
      }
    } else {
      alert('회원 정보를 입력해주세요.');
    }
  };

 
이러면 클라이언트 브라우저에 쿠키를 저장할 수 있다.
 

⚠️ 보안 취약

다음과 같이 작성하면 암호화 진행 후 토큰으로 발급되어 저장이 됐지만, 토큰 방식은 해당 토큰 값을 보여주는게 검증하는게 다 이기 때문에 누군가에게 탈취 당하면 유효시간까지 해커에게 당할 수 밖에 없다.
해커가 사용자에게 javascript 문법을 전송한다면 탈취 당할 수 있다.
 
개발자 도구를 열고 document.cookie를 검색하면 현재 도큐먼트에 존재하는 쿠키를 확인할 수 있다.

이러한 문제를 해결하기 위해 javascript로의 접근을 금지하여야하는데 방법은 다음과 같다.
 

(어떻게 개발해야 최선의 보안을 유지할 지 공부하고 재작성 하겠습니다.)