[SSO] OAuth 2.0 & JWT 구현하기

작성자:

로그인부터 토큰 인증까지 OAuth 2.0과 JWT(Json Web Token)는 오늘날 웹 개발에서 빠질 수 없는 인증 기술입니다.
이 글에서는 OAuth로 소셜 로그인을 구현하고, JWT를 통해 사용자 인증을 유지하는 기본적인 흐름을 쉽게 설명해드릴게요.

OAuth 2.0이란?

OAuth 2.0은 사용자의 로그인 정보를 직접 받지 않고도 인증할 수 있도록 해주는 권한 위임 방식입니다.
예를 들어, 사용자가 “구글 로그인” 버튼을 클릭하면 구글 로그인 창으로 이동하고, 인증 후 우리 앱으로 돌아와 로그인됩니다.

구현 흐름 요약:

  1. 클라이언트에서 인증 요청 (ex: 구글 로그인 버튼 클릭)
  2. 사용자가 구글 로그인
  3. 콜백 URL로 인가 코드(authorization code) 전달
  4. 서버에서 이 코드를 사용해 액세스 토큰(access token) 발급
  5. 토큰으로 사용자 정보 요청 → 로그인 처리

JWT란?

JWT는 로그인 후 발급된 토큰으로, 사용자 정보를 안전하게 담아 전송할 수 있는 기술입니다.
이 토큰을 HTTP 요청 헤더에 넣으면 로그인 상태를 유지할 수 있습니다.

JWT 구조:

  • Header: 알고리즘 정보 (예: HS256)
  • Payload: 사용자 정보 (예: id, email)
  • Signature: 위변조 방지용 서명

예: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

예제: Node.js + Express + JWT 로그인 구현

const jwt = require('jsonwebtoken');

// 로그인 성공 시
app.post('/login', (req, res) => {
  const user = { id: 1, name: '홍길동' }; // 예시 사용자
  const token = jwt.sign(user, '비밀키', { expiresIn: '1h' });
  res.json({ token });
});

// 인증 필요한 요청
app.get('/profile', (req, res) => {
  const token = req.headers.authorization?.split(' ')[1];
  if (!token) return res.status(401).send('인증 필요');

  try {
    const user = jwt.verify(token, '비밀키');
    res.json(user); // 인증된 사용자 정보 반환
  } catch {
    res.status(403).send('토큰 유효하지 않음');
  }
});

이 방식은 프론트엔드와 백엔드가 분리된 구조(SPA, React, Vue 등)에서 특히 유용합니다.

실전 팁

  • 토큰 저장 위치: 브라우저에서는 localStorage보단 httpOnly cookie가 보안상 안전
  • 토큰 만료 시간 설정: 보안을 위해 적절한 만료 시간 필수
  • Refresh Token 사용: Access Token이 만료됐을 때 재발급용으로 사용

마무리

OAuth 2.0은 외부 인증 연결, JWT는 로그인 유지와 인증 처리에 필수입니다.
둘을 잘 조합하면 사용자 경험도 향상되고, 보안도 강화됩니다.

댓글 남기기