JWT

인증과 인가

인증 (=로그인)

: Authentication

: 사이트에 가입된 유저라는 것을 알려줌

: 관리자든 고객이든 사이트에 가입된 사용자라는 걸 증명하는 것

 

인가

: Authorization

: 인증 후에, 페이지에 접근 권한이 있는지 확인하는 것

( ex. 같은 사이트 내에 관리자, 고객에 따라 접근할 수 있는 페이지가 다를 때 ) 

---

쿠키 vs 세션 vs JWT 

🍪 쿠키 

1) 로그인 -> 서버가 쿠키를 구워준다.

2) 사용자 <-> 서버가 쿠키를 핑퐁

• 장점: 서버가 저장 X, Stateless => RESTful 
• 단점: 보안 취약 

세션

1) 로그인 -> 서버가 금고를 만들어서 정보를 저장해두고, 금고 번호를 준다. 

2) 사용자 <-> 서버가 금고 번호만 가지고 대화한다. 

• 장점: 보안이 비교적 좋다.
• 단점: 서버가 저장 O => 서버 저장 공간, Stateless X 

JWT (JSON Web Token)

쿠키와 세션의 단점을 보완

 

✔️ 개념

: JSON 형태의 데이터를 안전하게 전송하기 위한 웹에서 사용하는 토큰   

= 토큰을 가진 사용자가 "증명" 하기 위한 수단   

cf. 토큰: (인증용) 입장 가능한 유저야 / (인가용) 관리자 권한 & 일반 유저 권한

 

✔️ 장점

: 보안에 강하다 <= 암호화가 되어 있다. 

: 서버가 상태를 저장하지 않는다. (stateless 하다 , HTTP 특징을 잘 따르고 있다)

: 서버의 부담을 줄여준다. 

cf. 토큰을 발행하는 서버를 따로 만들어줄 수도 있음

 

✔️ 구조 

• 헤더: 토큰을 암호화하는 데 사용한 알고리즘, 토큰의 형태(jwt)
• 페이로드: 사용자 정보 ( 이름, 주소, 핸드폰, ... ,비밀번호 X) 
• 서명: 만약 페이로드 값이 바뀌면, 이 서명값 통째로 바뀌기 때문에 JWT 를 믿고 쓸 수 있다. 

✔️JWT 로 인증/ 인가 하는 절차

---

.env (environment: 환경 변수 '설정 값')

✔️개념

: 개발을 하다가 포트 넘버, 데이터베이스 계정, 암호키 , .. 등등 외부에 유출되면 안되는 중요한 환경 변수들을 따로 관리하기 위한 파일   

cf. 깃허브에 올라가면 안되는 값 , dotenv 모듈 사용

 

👩🏻‍💻 youtube-demo 에 JWT 적용하기

모듈 사용하기

//jwt 모듈
const jwt = require('jsonwebtoken')

//dotenv 모듈
const dotenv = require('dotenv')
dotenv.config();

 

 

로그인 할 때 토큰 발급하기

if (loginUser && loginUser.password === password) {
          // token 발급
          const token = jwt.sign({
            email: loginUser.email,
            name: loginUser.name
          }, process.env.PRIVATE_KEY, {
            expiresIn: '30m',
            issuer: "songa"
          });

          res.cookie("token", token, {
            httpOnly: true
          }) // 쿠키에 토큰 담아서 보내기

          console.log(token);

          res.status(200).json({
            message: `${loginUser.name} 님 로그인 되었습니다.`
          })
}

로그인 하는 유저의 email 과 name 에 대한 토큰을 발급한다. 토큰의 유효기간은 30분으로 설정하고, 발급한 사람은 songa 로 설정하였다. 쿠키에 토큰을 담아 보낼 때  HttpOnly 쿠키 속성을 사용하여 JavaScript를 통해 쿠키에 접근할 수 없게 한다. 이는 악성 스크립트를 통해 쿠키 값에 접근하는 것을 막아준다.

jwt.io 에서 확인하기

 

로그인 후 콘솔에 출력된 토큰을 encoded 에 입력하면 decoded 에 로그인 한 사용자의 토큰 발급을 요청했던 정보인 email 과 name 이 뜬다. iat 은 토큰 발급을 요청한 시간이고, exp 는 토큰의 유효시간이다. 

---

🌟 배운 점

오늘은 JWT(토큰 기반 인증)에 대해 배웠다. 쿠키와 세션은 익숙했지만, JWT는 처음 접한 개념이었다. 로그인 유지나 만료 등, 우리가 일상적으로 경험하는 기능들이 이 토큰을 통해 이루어진다는 사실이 신기했다. youtube-demo 프로젝트에서 직접 토큰 발급을 적용하는 과정이 다소 헷갈리는 부분이 있어서, 익숙해질 수 있도록 혼자 복습하는 시간을 가져야겠다.