[TIL #36] 인증&인가, 토큰 기반 JWT 인증 구현하기

Bora.K | 권보라·2023년 12월 5일

React TIL redux

TIL

목록 보기

36/51

오늘 한 일

[개인프로젝트] 팬페이지 프로젝트 해설강의
[팀프로젝트] 아웃소싱 프로젝트 팀 회의
- 팀 프로젝트 컨셉 설정, 코드 컨벤션 설정
- 와이어 프레임 제작, 구현 기능 리스트, 역할 분담

학습 내용

인증, 인가

1. 인증 & 인가란 무엇인가?

인증 : 로그인 → 서비스를 이용하려는 유저가 등록된 회원인지 확인
인가 : 유저에게 접근 권한이 있는지 확인하는 절차

→ 사용자 인증은 쿠키, 세션, 토큰으로 할 수 있다.

📌 HTTP 프로토콜 통신의 특징
1. 무상태 : 서버는 클라이언트의 상태를 기억하지 않기 때문에 각매요청마다 클라이언트는 모든 상태 정보를 담아서 요청하고, 서버는 주문 받은 대로 응답한다.
2. 비연결성 : 서버와 클라이언트는 연결되어 있지 않아서 매번 새로운 요청으로 인식한다.

2. 쿠키

무상태와 비연결성의 특징에도 불구하고 서버가 클라이언트의 인증 상태를 기억하는 것처럼 구현할 수 있는 수단이다. 웹사이트에서 로그인을 하면 서버는 브라우저에게 쿠키를 제공하고, 브라우저에서는 쿠키를 자동 저장한다. 이 쿠키에는 사용자가 로그인 했음을 나타내는 정보가 담겨있다.

우리가 페이지에 로그인하여 새 페이지를 클릭하는 등 서버에 http 요청을 할 때마다 서버는 이 쿠키를 자동으로 인식하고 사용자가 로그인된 상태임을 알 수 있다.

브라우저에 저장될 때 key-value 형태의 텍스트 파일로 저장된다.
쿠키는 별도로 삭제하거나 유효기간이 만료되지 않는 이상 유효하게 보관된다.
서버에 특정 API를 요청하면 서버는 header 안에 Set-Cookie 속성으로 쿠키 정보를 담아준다.
동일한 Origin 또는 CORS를 허용하는 Origin에만 쿠키를 보낸다.

🔎 CORS란?
Cross Origin Resource Sharing(CORS)는 다른 출처에 리소스 요청하는 것을 허용하는 정책

🔎 Origin이란?
http://www.naver.com과 같이 웹사이트의 고유한 출처
즉, protocol과 host, port까지의 웹사이트 전체 주소를 말한다.

3. 세션 기반 인증

세션이란 서버간의 연결이 활성화된 상태 즉, 인증이 유지되고 있는 상태이다. 일정 기간 동안만 유효하다.

세선 기반 인증을 사용하는 경우, 인증 확인에 활성 세션 또는 사용자 자격 증명이 필요하다. 서버는 인가가 필요한 API 요청을 받으면 클라이언트 쿠키에 들어있는 세션 id를 조회하여 세션 유지 상태라면 DB에 데이터를 조회하여 클라이언트에게 응답한다.

로그인 성공 → 서버에서 세션 생성(key-value 형태) → 쿠키에 세션 id 저장

4. 토큰 기반 인증

(1) 토큰이란?

클라이언트에서 보관하는 암호화된 인증 정보를 의미한다. 세션처럼 서버에서 사용자 인증을 보관할 필요가 없어 서버 부담을 줄여준다. 토큰 기반 인증(예를 들어 JWT)을 사용하는 경우, 인증 확인에 토큰의 존재 여부와 유효성 확인(Secret Key)이 필요하다. 토큰의 용도는 인증정보에 대한 보호가 아니라 위조 방지이다.

(2) JWT의 특징

header, payload, signature로 구성된다.

회원가입 시 토큰 인증

클라이언트(브라우저)가 POST를 요청한다.
서버는 DB에서 데이터 정보가 확인되면 Secret Key를 통해 JWT를 생성한다.
클라이언트(브라우저)는 쿠키로 응답(토큰)을 받는다.
받은 토큰을 Web Storage에 저장한다.

인가(Authorization)가 필요한 API 요청/응답

Web Storage에 저장된 토큰을 가지고 클라이언트가 정보를 요청한다.
서버는 토큰이 유효한가 검증 후 DB에 데이터 리스트에 대해 쿼리를 보낸다.
DB로부터 데이터 리스트를 받는다.
클라이언트에게 데이터 리스트를 응답으로 보낸다.

JWT 인증 구현

1. 사용자 인증
서버 API에 요청
서버 API는 사용자의 자격 증명을 확인하고 유효한 경우 JWT 토큰을 생성한다.

2. 토큰 보관
생성된 JWT 토큰은 일반적으로 브라우저의 localStorage 또는 sessionStorage에 저장한다.

3. 요청과 함께 토큰 보내기
인증이 필요한 서버 API에 대한 후속 요청의 경우 Authoriztion 헤더에 JWT 토큰을 포함한다.

4. 서버에 토큰 검증
서버 API는 인증된 각 요청에 대해 JWT 토큰의 유효성을 검사한다.
토큰이 유효하면 서버가 요청을 처리하고, 그렇지 않으면 승인되지 않은 응답을 반환한다.

오늘의 회고

오늘 새로운 팀 프로젝트를 시작했다. 프로젝트 컨셉을 짜고 와이어프레임을 만들고, 구현 기능 리스트를 작성하여 업무 분담을 했다. 사다리 타기로... 사실 필수 구현 사항만 우선 넣기로 해서 기능 구현이 끝나면 선택 구현 사항도 조금씩 해볼 생각이라 팀원들이랑 같이 할 수 있는 부분들이 많을 것 같다.

오늘 기본적인 셋팅 하는데 시간이 생각보다 많이 걸렸다. 이것 저것 소소하게 할 것들이 참 많았다. 지난 조에서는 사실 경험이 많으셨던 분이 있어서 기본 셋팅을 다 해주셨는데, 내가 얼마나 편하게 했었나..싶었다. 팀원들이랑 같이 기초 셋팅부터 하나하나 하면서 더 많이 배워가고 있다. 내일부터 다시 시작될 프로젝트의 늪... 화이팅!