2회차 주제: JWT의 개념과 토큰을 이용한 로그인 구현 알아보기

토큰이란?

• 신원 증명
• 다른 개인 정보를 표현하고 대체하는 데이터

로그인에 토큰을 사용해야 하는 이유

• HTTP 요청들은 각각 개별적이고 누구로부터 온 요청인지 알 수 없기 때문에( (stateless) 식별자로서 토큰을 사용해야함

토큰 기반 로그인의 흐름

1. (클라이언트) 로그인 요청
2. (서비스) 토큰 발급 및 전달
3. (클라이언트) 토큰 보관
4. (클라이언트) 토큰을 사용해 요청

실제 서비스에서의 구조

1. 유저 진입 (토큰이 있는가?)
   • 있을 경우: 토큰이 유효한가? [토큰 유효성 검증]
     • 유효O: 토큰 사용
     • 유효X: 로그인 진행
   • 없을 경우: 로그인 진행 [인증정보 확인 & 토큰 발급]
2. 로그인 성공 및 토큰 사용

JWT

• Json Web Token
• 토큰을 만드는 기술
• 내부에 토큰을 Json 형태로 담고 있는 토큰

프론트엔드에서는 Encoded 된 토큰을 받아서 정보를 주고받음!

1. Header: 암호화 규칙, 토큰 타입
2. PayLoad: 토큰 데이터(클레임)
3. Signature: 암호화를 위한 데이터

해싱이란?

• 토큰을 암호화하는 방식으로, 단방향임
• Signature는 복호화할 수 없음

JWT의 유효성 검증 방식

• 시그니쳐의 용도와 동작 방식
  -> 서버에서 시크릿키를 통해 다시 암호화해서 유효한지 확인

---

실습

[로그인 요청 코드]

• axios는 라이브러리라서 fetch보다 약간 무거울 수 밖에 없음
• 여기선 try-catch 대신 If문 사용함
• .then으로 체이닝해도 됨

JWT 보관 방식과 보안

1. 재접근할 수 없는 런타임 메모리에 저장
   • 매번 로그인해야하는 불편함이 존재
2. 로컬 스토리지/쿠키 저장 (XSS)
   • localstorage.getItem하면 값을 볼 수 있어서 위험함
   • sessionStorage도 마찬가지로 위험
   • script 주입 가능함
3. 쿠키 저장 (CSRF)
   • 브라우저가 쿠키를 자동으로 전송하게 되면서 악용될 가능성
4. Access Token이나 Refresh 토큰 사용
   • 프론트엔드에서 단독으로 할 수있는 일
   • Access Token는 로컬, Refresh Token는 HttpOnly Cookie로

HTTP Request 살펴보기

• cURL
  - 인터넷 전송 엔진으로, command line을 통해 데이터를 전송하는 데 사용