리액트 : 인증/인가(쿠키, 세션, 토큰, JWT)

1.인증/인가

(1) 인증 : Authentication

▶ 해당 유저가 등록된 회원 확인 ( 로그인 )

 

(2) 인가 : Authorization (권한)

▶ 특정 리소스에 접근할 수 있는 권한 ( 마이페이지 권한 )

▶유저가 마이페이지에서 서버에 API 요청으로 개인정보를 받아오는 요청할때,

서버는 클라이언트에게 [인가]해줌!

 

(3) http 프로토콜 통신의 특징 2가지

▶ 무상태(stateless) : 서버는 클라이언트의 상태를 기억하지 못함.

(client : 나 기억나?  / server : 아니!)

 

▶ 비연결성(Connectionless) :  서버와 클라이언트는 연결 x 

(server : 매번 새로운 요청이 들어옴)

 

2. 쿠키

: 브라우저가 주머니에 갖고 있는 과자!

▶ http 프로토콜 통신 2가지(무상태/비연결성)임에도

"서버가 클라이언트의 인증 상태를 기억"하는것 처럼 구현 가능

▶ key : value로 저장

▶ 서버와 통신시 자동으로 주고 받음 

▶ header 안에 set-cookie 속성으로 쿠키 정보를 담아줌

( 쿠키 정보 : 개발자도구 > 애플리케이션 > 저장용량 > 쿠키)

▶ 쿠키는 클라이언트에서 수정/삭제/추가 가능 

▶ 단, 동일한 Origin 또는 CORS를 허용하는 Origin에만 쿠키를 보냄!

(예시- 유튜브 서버에서 받은 쿠키는  유튜브 이용시에만 주고 받음)

* Origin : 출처 : protocol + host + port 의미

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

 

3. 세션

: 사용자와 서버 간의 연결이 활성화된 상태 (인증이 유지되고 있는 상태) /서버에서 보관하는 정보 

▶ 로그인 성공 > 서버에서 세션 생성 / 저장 (key-value) > key (sessionId)를 쿠키 사용해서 브라우저에 전달

( 세선 키를 브라우저에 갖고있으면 계속해서 연결되어있는 것처럼 동작 가능)

(1) 클라이언트 > 서버 : 유저가 로그인 시도 (POST / login : id & password)

(2) 서버 > DB : 이 id와 pw를 가진 사용자 있음?

(3) DB > 서버 : 응, memberData 리

(4-5) 서버 : 해당 정보를 넣고 sesion id 발급 & 저장 

(6) 서버 > 클라이언트 : response (set-cookie로 sessionId 줌)

(7) 클라이언트 : 브라우저의 쿠키에 sessionId 저장

 

 

* 인가 필요한 API 요청/응답 (마이페이지)

(1) 클라이언트 > 서버 : GET 요청 (header에 갖고있는 정보)

(2) 서버 : 유효성 검사 

(3) 서버 : 유효성 검사 통과 후, 그에 맞는 데이터 LIST 검색 후 전달

 

4. 토큰

: "클라이언트"에서 보관하는 암호화된 인증 정보!

▶ 서버 부담을 줄여주는 인증 수단 

▶ 웹 인증 수단 : JWT (Json Web Token)이용

(1) JWT 특징

- header / payload / signature 형식의 3가지 데이터로 구성

- 토큰 용도 : 인증정보(payload)에 대한 보호 x / 위조 방지

- 정보 (payload)를 토큰화 => signature에 secret key 필요!

=> secret key는 복호화 x 토근 유효한지 검증하는데 사용 

 

- acessToken : 만료기간이 길면 보안성에 허점 (정보 털림 주의)

=> acessToken + refresh Token으로 보안 강화

 

 

 

 

 

JWT.IO

 

 

끝.