[토큰 기반 인증] OAuth / JWT / 웹 저장소

해당 글은 프론트엔드를 공부하면서 기록 목적으로 작성한 내용입니다.
잘못된 내용이 있다면 제보 부탁드립니다. 🙇‍♂️

1. OAuth

OAuth 란?

• 외부 서비스의 인증 및 권한 부여를 관리하는 프레임워크를 말한다.

OAuth 동작 방식

• 클라이언트와 서버 사이에 인증을 하면 서버가 access_token을 준다.
• 클라이언트는 access_token을 이용해서 API 요청을 할 수 있다.
• 서버는 API 요청을 받고, access_token을 가지고 권한이 있나 없나를 확인해서 결과를 클라이언트에 보내준다.

---

2. JWT (Json Web Token)

JWT 란?

• 토큰의 한 형식으로 데이터가 JSON 형태로 이루어져 있는 토큰이다.

JWT 생김새

• JWT 생김새: [header].[payload(내용)].[signature(서명)]
• header: 토큰 타입과 암호화 방식 정보가 들어간다.
• payload: 토큰에 담을 정보가 name: value 쌍으로 들어간다.
• signature: 서명 정보로 secret key를 포함해서 header와 payload 정보가 암호화 되어 들어간다.

JWT 동작 방식

• 유저가 로그인을 시도하면 서버가 요청을 확인하고 secret key를 access_token에 발급한다.
• 클라이언트에 JWT를 전달하고, 클라이언트는 API 요청을 할때 Authorization header에 JWT를 담아서 보낸다.
• 서버는 JWT의 서명을 확인하고 payload에서 정보를 확인해서 API 응답을 보낸다.

---

3. 웹 저장소

쿠키 (Cookies)

• key: value 형태의 클라이언트 로컬에 저장되는 저장소로 약 4KB 정도 저장할 수 있다.

세션 스토리지 (Sessions)

• HTML5에서 추가된 저장소로 쿠키와 마찬가지로 key: value 형태로 저장된다.
• 세션 스토리지에 저장된 데이터는 브라우저를 닫으면 제거되므로 자동 로그인이나, 장바구니 같이 다음에 브라우저를 열었을 때에도 유지해야 하는 데이터는 넣기 어렵다.

로컬 스토리지

• HTML5에서 추가된 저장소로 쿠키와 마찬가지로 key: value 형태로 저장된다.
• 별도로 지워주지 않으면 계속 브라우저에 데이터가 남아있다.
• 유저 ID, 비밀번호 같은 중요한 정보를 넣어두면 위험하다.

---

4. 정리

• 로컬 스토리지는 쿠키보다 더 많은 정보를 저장할 수 있다.
  (쿠키 4KB, 로컬 스토리지 5MB)
• 로컬 스토리지는 쿠키처럼 모든 http 통신에 딸려들어가지 않는다.
• 로컬 스토리지는 로컬에 데이터가 다 남아있으므로 보안상 취약해지기 쉽다.
• 프로젝트 성향에 맞춰 저장 장소는 그때 그때 다를 수 있다.

참고: 스파르타 코딩클럽 리액트 강의