[TypeScript] GraphQL과 타입스크립트로 개발하는 웹 서비스 스터디 12

---

⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 :
설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기

 

2023-05-14 21:00 12일차

 

안내
-금일 진도 182p 부터 189p

 

 

---

책 요약 정리

 

5장 프로젝트 개발 2

 

회원가입 요청

 

react-router-dom에서 사용하던 useHistory 사용법이 변경되어서

useHistory -> useNavigate 로 바꿔서 사용.

https://kangdanne.tistory.com/167

[React-Router]리액트 라우터 v5 → v6 (useHistory → useNavigate)

 

로그인

 

 

사용자에 대한 식별은 대개 두 가지 개념으로 인증Authentication 과 인가 Authorization으로 나눌 수 있다.

인증의 경우 토큰이나 세션을 활용하고, 인가는 RBAC, ABAC 방식을 활용한다.

 

 

AWS용 ABAC란 무엇입니까? - AWS Identity and Access Management

 

 

HTTP 에서 동작하는 사용자 식별인 인증은 세션 기반 인증과 토큰 기반 인등으로 HTTP의 특징은 무상태성과 필요한 작업이 끝나면 연결을 끊는 비연결적이라는 특징을 반영한 인증 방식이다. 

 

 

세션 기반 인증

 

 

서버는 유저를 식별한 다음 세션을 생성하여 메모리에 저장한 다음 브라우저 쿠키에 저장되도록 하는 Set-Cookie 헤더를 포함한 응답을 보내 브라우저상 세션 ID가 저장될 수 있도록 한다.

이후 해당 브라우저에 대한 요청은 항상 세션 ID를 담은 쿠키를 전달한다.

세션 기반 인증에서는 인증된 정보를 다루는 주체가 서버 측이며 인증된 유저에 대한 정보를 담고 있지는 않다.

이 단일 인증 체계의 특성은 모놀리식과 비슷하고 서버 자원의 자동 확장 등을 활용하기 어렵다. 

이는 MSA에서도 하나의 서버에서 세션을 관리하게 되므로 관리의 어려움이 불가피하다.

 

 

토큰 기반 인증

 

 JWT를 활용하는 방식을 요즘 사용한다. JSON 데이터를 활용하고 디지털 서명을 포함한 토큰으로 구성하여 간결하고 무결성을 보장한다. 

 

서버가 유저 식별을 끝낸 뒤 식별된 유저 정보를 서버로부터 생성된 서명과 토큰 만료 시간, 인증 정보를 담은 JWT 토큰을 생성하여 브라우저로 전달한다. 해당 브라우저는 JWT 토큰을 로컬 스토리지 또는 쿠키에 저장한다.

브라우저가 서버로 데이터를 요청할 때는 JWT를 Authorization 헤더에 토큰을 넣어 보낸다.

서버는 JWT 토큰의 유효성 검사를 진행한 후 요청된 작업을 처리한다.

 

이 토큰 탈취는 XSS, CSRF 공격에 취약하므로 더 복잡한 구조를 구성해야 한다.

토큰 내에는 유저 정보가 담겨있기 때문에 MSA에 더 잘 어울린다. 하지만 발급이 복잡하고 한 번 발급된 토큰은 폐기가 불가능해 이 보안 위협을 해결하기 위해 두 가지 이상의 토큰을 다루거나 세션과 동일하게 서버 상에 토큰 또는 유저 정보를 저장하고 저장된 토큰을 비교하는 절차가 추가되는 등 복잡성이 증대된다. 

 

 

세션 vs 토큰

 

세션 : 비교적 작은 프로젝트, 구현이 간단.

토큰 : 확장성이 중요한 프로젝트.

 

 

 

 

로그인

 

nanoid 라이브러리와 jsonwebtoken 라이브러리를 설치한다.

yarn add nanoid jsonwebtoken

yarn add --dev @types/nanoid @types/jsonwebtoken