JWT를 선택한 이유

서버 기반의 인증 시스템 vs 토큰 기반의 인증 시스템

서버 기반의 인증 시스템과 토큰 기반의 인증 시스템의 장단점을 고려했고 확장하기 쉬운 토큰 기반의 인증 시스템을 선택했습니다.

서버 기반의 인증 시스템 단점

• 세션

세션은 메모리 또는 DB에 저장하는데, 로그인 중인 사용자가 늘어날 경우에는 부하가 걸리게 된다.

• 확장성

사용자가 늘어나게 되면 서버를 확장해야 하는데 세션을 분산시키는 시스템을 설계가 어렵다.

토큰 기반의 인증 시스템 장점

• 무상태성(Stateless) & 확장성(Scalability)

토큰은 클라이언트 측에 저장되기 때문에 서버는 완전히 Stateless하며, 확장하기에 매우 적합하다.

• 확장성(Extensibility)

토큰에 선택적인 권한만 부여하여 발급할 수 있으며 OAuth의 경우 Facebook, Google 등과 같은 소셜 계정을 이용하여 다른 웹서비스에서도 로그인을 할 수 있다.

JWT 구현

Oauth 인증과 JWT 토큰을 발급

https://github.com/boostcampwm-2021/Web11-Donggle/pull/86

• 발급 과정

1. Frontend에서 Github에 authorization code를 요청
2. Github에 지정한 callback url로 redirect된 뒤 받은 authorization code를 BE에 요청
3. BE에서 autorization code를 이용해 Github에 access Token을 요청
4. Github에서 받은 Acess Token을 이용해 또다시 Github에 사용자 정보 요청
5. Github에서 받은 사용자 정보를 이용해 JWT 토큰을 발급
6. Frontend에서 JWT토큰을 Session Storage에 저장
   • (왼쪽 사진 5번~7번) 이후 요청에 Access Token을 넣고 검증을 통해 응답을 받습니다.
   • Access Token은 계속 세션 스토리지에 저장하고 있습니다.

• JWT

JWT는 만료기간을 주지 않고, SecretKey와 algorithm을 적용하여 생성했습니다.

그리고 만든 JWT는 Frontend에서 새로고침을 해도 로그인이 유지되도록 하기 위해 Session Storage에 저장하였습니다.

const jwtConfig: Config = {
  secretKey: config.jwt_secret,
  options: {
    algorithm: config.jwt_algorithm as jwt.Algorithm,
  },
};