[인증] 세션, 쿠키,jwt, 토큰 정리 (nextjs getSession, jwt)

구글로그인 구현 후 vercel에 deploy했는데 middleware에는 SSR인 getsession을 쓸 수 없다는 에러가 나왔다. 

이를 해결하려고 웹 에플리케이션의 인증 방식에 대해 공부했다. 

[ 인증이란? ]

인증과 인가에 대해 구분할 필요가 있다. 

 

Authentication - 인증

- 유저식별, 신원검증 , 로그인하는 것이라고 생각하면 된다. 

 

Authorization - 인가

- 인증 후, 유저가 어디까지 접근하는 것을 허락할 것인가

- 관리자 권한을 가진 유저만 관리자 페이지에 엑세스할 수 있다. 

 

[쿠키와 세션]

쿠키

서버 -> 브라우저로 전송해 클라이언트에 저장할 작은 파일

브라우저(클라이언트)는 받은 쿠키를 요청시 같이 전송함

예를 들어 사용자가 로그인하면 서버는 아이디, 비번을 쿠키에 담아 서버로 보낸다. 매번 유저가 로그인할 때마다 서버는 로그인 정보가 담긴 쿠키를 받는다

매번 요청에 사용자정보담은 쿠키를 보내기때문에 보안상의 이슈가 있다. 쿠키가 커지면 네트워크 부하가 심해진다. 

클라이언트에서 쿠키를 쉽게 변경하거나 삭제할 수 있다. 

 

세션

쿠키와 마찬가지로 웹 애플리케이션에서 상태를 유지하고 사용자 정보를 관리하는 데 사용된다.

서버에서 일정시간동안 클라이언트의 상태를 유지하기 위해 사용한다. 

쿠키와 비교하며 차이점 비교

 

• 저장 위치:
  • 쿠키: 클라이언트 측(브라우저)에 저장됩니다.
  • 세션: 서버 측에 저장됩니다.
• 보안:
  • 쿠키: 클라이언트에 저장되므로 사용자가 수정할 수 있어 상대적으로 덜 안전합니다.
  • 세션: 서버에 저장되어 클라이언트에서 직접 접근할 수 없으므로 더 안전합니다.
• 수명:
  • 쿠키: 만료 시간을 설정할 수 있으며, 브라우저가 닫혀도 유지될 수 있습니다.
  • 세션: 일반적으로 브라우저가 닫히면 종료됩니다. 서버 설정에 따라 다를 수 있습니다.
• 크기 제한:
  • 쿠키: 브라우저마다 다르지만 일반적으로 4KB 정도로 제한됩니다.
  • 세션: 서버 메모리에 의해서만 제한되므로 상대적으로 큰 데이터를 저장할 수 있습니다.
• 전송:
  • 쿠키: 모든 HTTP 요청에 함께 전송되어 네트워크 트래픽을 증가시킬 수 있습니다.
  • 세션: 세션 ID만 쿠키를 통해 전송되고, 실제 데이터는 서버에 유지됩니다.
• 사용 목적:
  • 쿠키: 사용자 선호 설정, 트래킹, 간단한 데이터 저장 등에 사용됩니다.
  • 세션: 로그인 상태 유지, 장바구니 정보 등 보안이 필요한 임시 데이터 저장에 사용됩니다.
• 구현 방식:
  • 쿠키: 브라우저에 의해 자동으로 관리되며, 서버에서 Set-Cookie 헤더를 통해 설정합니다.
  • 세션: 서버 측 프로그래밍 언어와 프레임워크에 의해 관리됩니다.
• 데이터 접근:
  • 쿠키: JavaScript를 통해 클라이언트 측에서 직접 접근 가능합니다.
  • 세션: 서버 측 코드를 통해서만 접근 가능합니다.

 

 

쿠키와 세션의 생김새?

1. 쿠키의 생김새:

쿠키는 텍스트 형태의 문자열로, 일반적으로 다음과 같은 구조를 가집니다:

 

name=value; expires=date; path=path; domain=domain_name; secure; HttpOnly

예시

user_id=12345; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/; domain=example.com; secure; HttpOnly

 

• name=value: 쿠키의 이름과 값
• expires: 쿠키의 만료 날짜
• path: 쿠키가 유효한 경로
• domain: 쿠키가 유효한 도메인
• secure: HTTPS에서만 전송
• HttpOnly: JavaScript에서 접근 불가

 

세션 데이터는 키-벨류 쌍 으로 저장된다. 

{
  "session_id": "ab12cd34ef56gh78",
  "user_id": 12345,
  "username": "john_doe",
  "login_time": "2023-07-15T10:30:00Z",
  "is_admin": false,
  "cart": [
    { "product_id": 1, "quantity": 2 },
    { "product_id": 3, "quantity": 1 }
  ]
}

클라이언트 측에서는 세션 ID만을 쿠키를 통해 저장하고 전송

요약하면, 쿠키는 브라우저에서 직접 볼 수 있는 텍스트 형태의 문자열이고, 세션은 서버에 저장된 객체 형태의 데이터

 

[ JWT ]

JSON Web Token

JWT 인증에 필요한 정보들을 암호화시킨 토큰

HTTP 헤더에 담음으로써 서버가 클라이언트를 식별

토큰? - 사용자 인증정보를 담은 메시지, 서버로부터 클라이언트가 받아 임시저장한다. 

인증 통한 로그인 성공시 서버는 인증 정보를 Payload에 담고, Secret Key를 사용해서 JWT을 발급한다.

서버가 JWT를 클라이언트에 전달하면 클라이언트는 토큰을 쿠키나 로컬스토리지 등에 저장한다. 

서버는 클라이언트가 전달한 토큰의 signature를 Secret Key로 복호화한 후 위변조 여부 및 유효기간을 검증한다. 성공하면, JWT에서 사용자 정보를 확인하고 요청에 응답한다. 

소셜로그인 할 때 사용한다.(클라이언트, 서버가 다른 도메인 사용) 동시접속자가 많을 때 서버 부하를 낮춘다. 인증정보를 서버에 별도 저장할 필요가 없다. 

그러나, 구현하기 복잡하다. 

 

 

구조

인코딩된 것처럼 보여지고, 헤더, payload, signature로 구성되어있다. 

1. 헤더

{
      "alg": "HS256",
      "typ": "JWT"
    }

타입과 해싱알고리즘 정의

2. payload

{
      "sub": "1234567890",
      "name": "John Doe",
      "admin": true
    }

유저 와 같은 엔티티 정의를 담고 있다. 

3. signature

HMACSHA256(
      base64UrlEncode(header) + "." +
      base64UrlEncode(payload),
      secret)

 검증할 때 사용, HMAC SHA256를 사용해서 signature를 만드는 예시