안녕하세요! 오늘부터 JWT(JSON Web Token) 인증에 관한 시리즈를 시작하려고 합니다. 현대 웹 개발에서 인증은 필수적인 요소이며, 그중에서도 JWT는 가장 널리 사용되는 인증 메커니즘 중 하나입니다. 이 시리즈에서는 JWT의 개념부터 실제 구현까지 단계별로 자세히 알아보겠습니다.
목차
- JWT란 무엇인가?
- JWT의 등장 배경
- 기존 인증 방식과 JWT의 차이점
- JWT의 구조
- JWT 동작 원리
- JWT 구현 예제 (TypeScript)
- JWT의 장단점
- 마무리
JWT란 무엇인가?
JWT(JSON Web Token)는 당사자 간에 정보를 JSON 객체로 안전하게 전송하기 위한 개방형 표준(RFC 7519)입니다. 이 정보는 디지털 서명되어 있어 신뢰할 수 있습니다. JWT는 HMAC 알고리즘 또는 RSA나 ECDSA와 같은 공개/개인 키 쌍을 사용하여 서명할 수 있습니다.
간단히 말해, JWT는 서버와 클라이언트 간에 정보를 안전하게 주고받을 수 있는 토큰 기반 인증 시스템입니다. 이 토큰은 사용자 인증 정보와 기타 클레임(claim)을 포함하고 있으며, 서명되어 있어 위조가 불가능합니다.
JWT의 등장 배경
전통적인 웹 애플리케이션에서는 서버 측에서 사용자의 세션을 관리했습니다. 사용자가 로그인하면 서버는 세션 ID를 생성하고, 이를 쿠키에 저장하여 클라이언트에게 전달했습니다. 그러나 이 방식에는 몇 가지 문제가 있었습니다:
- 확장성(Scalability) 문제: 서버 측에서 세션을 관리하면 서버의 메모리나 데이터베이스 부하가 증가합니다.
- 분산 시스템 문제: 여러 서버가 있는 환경에서는 세션 정보를 모든 서버에서 공유해야 하는 복잡성이 있습니다.
- CORS(Cross-Origin Resource Sharing) 문제: 다른 도메인 간 요청 시 쿠키 전송이 제한됩니다.
이러한 문제를 해결하기 위해 토큰 기반 인증 시스템이 등장했고, 그 중에서도 JWT가 가장 널리 채택되었습니다. JWT는 서버 측에서 상태를 유지할 필요가 없어 확장성이 좋고, 토큰 자체에 필요한 모든 정보가 포함되어 있어 분산 시스템에서도 효과적으로 작동합니다.
기존 인증 방식과 JWT의 차이점
세션 기반 인증
세션 기반 인증은 다음과 같은 흐름으로 작동합니다:
- 사용자가 로그인합니다.
- 서버는 세션을 생성하고 세션 ID를 발급합니다.
- 세션 ID는 쿠키에 저장되어 클라이언트에게 전송됩니다.
- 클라이언트는 요청할 때마다 이 쿠키를 서버에 전송합니다.
- 서버는 세션 ID를 확인하고 세션 정보를 조회하여 사용자를 인증합니다.
- 사용자가 로그아웃하면 서버에서 세션이 삭제됩니다.
이 방식의 가장 큰 특징은 상태 유지(Stateful)입니다. 서버는 세션 정보를 메모리나 데이터베이스에 저장하고 있어야 합니다.
JWT 기반 인증
JWT 기반 인증은 다음과 같이 작동합니다:
- 사용자가 로그인합니다.
- 서버는 사용자 정보와 권한 등을 담은 JWT를 생성하고 서명합니다.
- JWT는 클라이언트에게 전송됩니다(주로 LocalStorage나 쿠키에 저장).
- 클라이언트는 요청할 때마다 이 JWT를 Authorization 헤더에 포함시켜 전송합니다.
- 서버는 JWT의 서명을 검증하고, 그 내용을 신뢰하여 사용자를 인증합니다.
- 토큰이 만료되면 사용자는 다시 로그인하거나 리프레시 토큰을 사용해 새로운 JWT를 발급받습니다.
이 방식의 가장 큰 특징은 상태 비유지(Stateless)입니다. 서버는 토큰의 유효성만 검증하면 되고, 별도로 세션 정보를 저장할 필요가 없습니다.
JWT의 구조
JWT는 세 부분으로 구성되어 있으며, 각 부분은 점(.)으로 구분됩니다:
xxxxx.yyyyy.zzzzz
여기서 각 부분은 다음과 같습니다:
- Header(xxxxx): 토큰의 타입과 사용된 해시 알고리즘을 지정합니다.
- Payload(yyyyy): 토큰에 담을 클레임(claim) 정보를 포함합니다.
- Signature(zzzzz): 토큰이 변조되지 않았음을 확인하는 서명입니다.
각 부분을 자세히 살펴보겠습니다:
1. Header
Header는 일반적으로 토큰의 타입(type)과 사용된 서명 알고리즘(alg)으로 구성됩니다:
{
"alg": "HS256",
"typ": "JWT"
}
이 JSON은 Base64Url로 인코딩되어 JWT의 첫 번째 부분을 형성합니다.
2. Payload
Payload에는 토큰에 담을 정보인 클레임(claim)들이 포함됩니다. 클레임은 사용자에 대한 정보나 토큰 자체에 대한 메타데이터일 수 있습니다. 클레임에는 세 가지 유형이 있습니다:
- 등록된 클레임(Registered Claims): 미리 정의된 클레임으로, 필수는 아니지만 권장됩니다. 예: iss(발급자), exp(만료 시간), sub(주제), aud(대상) 등
- 공개 클레임(Public Claims): 사용자 정의 클레임으로, 충돌을 방지하기 위해 URI 형태로 정의합니다.
- 비공개 클레임(Private Claims): 당사자 간에 정보를 공유하기 위해 생성된 맞춤 클레임입니다.
예시:
{
"sub": "1234567890",
"name": "홍길동",
"admin": true,
"iat": 1625112000,
"exp": 1625198400
}
이 JSON도 Base64Url로 인코딩되어 JWT의 두 번째 부분을 형성합니다.
3. Signature
Signature는 Header와 Payload를 Base64Url로 인코딩한 값과 비밀 키를 사용하여 Header에 지정된 알고리즘으로 서명한 결과입니다:
HMACSHA256(
base64UrlEncode(header) + "." + base64UrlEncode(payload),
secret
)
이 서명은 메시지가 도중에 변경되지 않았는지 확인하는 데 사용됩니다. 개인 키로 서명된 토큰의 경우, 발신자가 누구인지 확인할 수도 있습니다.
완성된 JWT
세 부분을 모두 합치면 다음과 같은 형태의 JWT가 완성됩니다:
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6Iuytneq4uOuPmSIsImFkbWluIjp0cnVlLCJpYXQiOjE2MjUxMTIwMDAsImV4cCI6MTYyNTE5ODQwMH0.8DZ7pCNZvicg4NnvEI_qzXqbSXdKNa1buYX7qeBJvPQ
JWT 동작 원리
JWT의 동작 원리를 시퀀스 다이어그램으로 표현하면 다음과 같습니다:
클라이언트 서버
| |
| 1. 사용자 인증 요청 (ID/PW) |
|-------------------------------------->|
| | 2. 사용자 정보 확인
| | 3. JWT 생성 및 서명
| 4. JWT 반환 |
|<--------------------------------------|
| |
| 5. JWT 저장 (localStorage/쿠키) |
| |
| 6. 보호된 리소스 요청 + JWT |
|-------------------------------------->|
| | 7. JWT 서명 검증
| | 8. 페이로드 정보 확인
| 9. 응답 |
|<--------------------------------------|
| |
- 사용자가 ID와 비밀번호로 로그인합니다.
- 서버는 사용자 정보를 확인합니다.
- 정보가 올바르면 서버는 JWT를 생성하고 비밀 키로 서명합니다.
- 서버는 생성된 JWT를 클라이언트에게 반환합니다.
- 클라이언트는 JWT를 저장합니다(일반적으로 localStorage나 쿠키에).
- 클라이언트가 보호된 리소스에 접근할 때 JWT를 포함시켜 요청합니다.
- 서버는 JWT의 서명을 검증합니다.
- 서명이 유효하면 JWT의 페이로드 정보를 사용하여 필요한 처리를 합니다.
- 서버는 요청에 대한 응답을 클라이언트에게 전송합니다.
JWT 구현 예제 (TypeScript)
이제 TypeScript를 사용하여 JWT를 생성하고 검증하는 간단한 예제를 살펴보겠습니다.
먼저, 필요한 패키지를 설치합니다:
npm install jsonwebtoken @types/jsonwebtoken
JWT 생성 예제
import jwt from 'jsonwebtoken';
// 비밀 키 설정 (실제 프로젝트에서는 환경변수로 관리해야 합니다!)
const SECRET_KEY = 'your-secret-key';
// 사용자 정보 타입 정의
interface UserPayload {
id: number;
username: string;
role: string;
}
// JWT 생성 함수
function generateToken(user: UserPayload): string {
// 토큰 만료 시간 설정 (예: 1시간)
const expiresIn = '1h';
// JWT 생성
const token = jwt.sign(
{
id: user.id,
username: user.username,
role: user.role
},
SECRET_KEY,
{ expiresIn }
);
return token;
}
// 사용 예시
const user: UserPayload = {
id: 1,
username: '홍길동',
role: 'user'
};
const token = generateToken(user);
console.log('생성된 JWT:', token);
JWT 검증 예제
import jwt from 'jsonwebtoken';
// 비밀 키 설정 (실제 프로젝트에서는 환경변수로 관리해야 합니다!)
const SECRET_KEY = 'your-secret-key';
// JWT 검증 함수
function verifyToken(token: string): UserPayload | null {
try {
// JWT 검증 및 디코딩
const decoded = jwt.verify(token, SECRET_KEY) as UserPayload;
return decoded;
} catch (error) {
console.error('토큰 검증 실패:', error);
return null;
}
}
// 사용 예시
const sampleToken = '여기에_실제_JWT_입력';
const userData = verifyToken(sampleToken);
if (userData) {
console.log('인증된 사용자:', userData);
} else {
console.log('인증 실패');
}
Express 미들웨어로 구현하기
실제 Express 애플리케이션에서는 JWT 인증을 미들웨어로 구현하는 것이 일반적입니다:
import express, { Request, Response, NextFunction } from 'express';
import jwt from 'jsonwebtoken';
const app = express();
const SECRET_KEY = 'your-secret-key';
// 사용자 정보 타입 정의
interface UserPayload {
id: number;
username: string;
role: string;
}
// 요청 객체에 user 정보를 추가하기 위한 인터페이스 확장
declare global {
namespace Express {
interface Request {
user?: UserPayload;
}
}
}
// JWT 인증 미들웨어
function authenticateToken(req: Request, res: Response, next: NextFunction) {
// 헤더에서 Authorization 값 추출
const authHeader = req.headers['authorization'];
const token = authHeader && authHeader.split(' ')[1]; // "Bearer TOKEN" 형식
if (!token) {
return res.status(401).json({ message: '인증 토큰이 필요합니다' });
}
try {
// 토큰 검증
const decoded = jwt.verify(token, SECRET_KEY) as UserPayload;
req.user = decoded;
next();
} catch (error) {
return res.status(403).json({ message: '유효하지 않은 토큰입니다' });
}
}
// 로그인 라우트
app.post('/login', (req: Request, res: Response) => {
// 실제로는 데이터베이스에서 사용자 확인 후 토큰 발급
const user: UserPayload = {
id: 1,
username: '홍길동',
role: 'user'
};
const token = jwt.sign(user, SECRET_KEY, { expiresIn: '1h' });
res.json({ token });
});
// 보호된 라우트
app.get('/protected', authenticateToken, (req: Request, res: Response) => {
res.json({ message: '보호된 데이터에 접근했습니다', user: req.user });
});
app.listen(3000, () => {
console.log('서버가 3000번 포트에서 실행 중입니다');
});
JWT의 장단점
장점
- 상태 비유지(Stateless): 서버는 클라이언트의 상태를 저장할 필요가 없습니다.
- 확장성: 토큰 기반 시스템은 다중 서버 환경에서도 잘 작동합니다.
- 이식성: JWT는 어떤 도메인에서든 사용할 수 있습니다(CORS 문제 해결).
- 보안성: 토큰은 서명되어 위조를 방지할 수 있습니다.
- 효율성: 요청마다 데이터베이스를 조회할 필요가 없습니다.
단점
- 토큰 크기: JWT는 세션 ID보다 크기가 커서 네트워크 오버헤드가 발생할 수 있습니다.
- 저장소 보안: 클라이언트 측에 토큰을 저장하는 것은 보안 위험을 초래할 수 있습니다(XSS 공격에 취약).
- 토큰 무효화: 발급된 토큰은 만료되기 전에 서버 측에서 무효화하기 어렵습니다.
- Secret Key 유출: 비밀 키가 유출되면 토큰 위조가 가능해집니다.
마무리
이번 글에서는 JWT의 개념, 구조, 동작 원리를 자세히 살펴보고, TypeScript로 간단한 구현 예제도 확인해보았습니다. JWT는 현대 웹 애플리케이션에서 널리 사용되는 인증 메커니즘으로, 그 특성을 잘 이해하고 적절히 활용하는 것이 중요합니다.
다음 글에서는 Node.js와 Express를 활용한 JWT 인증 구현에 대해 더 자세히 알아보겠습니다. 구체적인 코드 예제와 함께 실제 애플리케이션에서 JWT를 어떻게 적용할 수 있는지 알아보겠습니다.
궁금한 점이나 피드백이 있으시면 댓글로 남겨주세요!
참고 자료
'Study > Authentication' 카테고리의 다른 글
| JWT 인증 시리즈 4편: JWT 보안 강화 및 모범 사례 (1) | 2025.04.27 |
|---|---|
| JWT 인증 시리즈 3편: Frontend에서의 JWT 구현 (React/Next.js) (0) | 2025.04.27 |
| JWT 인증 시리즈 2편: Node.js와 Express를 활용한 JWT 인증 구현 (0) | 2025.04.27 |