일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- AWS
- 블록체인
- next.js
- react
- 프론트엔드
- 자바스크립트
- 가상화
- 쿠버네티스
- node.js
- 타입스크립트
- k8s
- 솔리디티
- 이슈
- 이더리움
- 백엔드
- 파이썬
- 알고리즘
- TypeScript
- 컴퓨터공학
- docker
- 웹
- 클라우드
- kubernetes
- es6
- HTML
- 리액트
- BFS
- CSS
- 백준
- JavaScript
Archives
- Today
- Total
즐겁게, 코드
클라이언트 인증 구현하기 : 인증이란 무엇인가? 본문
어플리케이션에 로그인을 비롯한 인증이 필요한 이유는 무엇일까요?
당연하겠지만, 누구나 접근할 수 없는 정보를 보호하기 위해 사용자를 인증하는 작업이 필요하기 때문입니다.
인증을 구현하는 방법은 크게 서버 사이드 세션을 사용하는 방법과 JWT라는 인증 토큰을 사용하는 방법으로 나뉘는데요, 이번 글에서는 인증이 어떻게 이루어지는지에 대한 이론을 간략하게 소개하도록 하겠습니다.
세션 기반 인증 방식
세션 - 쿠키 방식이라고도 부르는 세션 기반 인증(편의상 "세션 인증 방식" 과 혼용하겠습니다.) 방식은 대략 다음과 같이 동작합니다.
인증 과정
- 클라이언트가 로그인을 시도합니다.
- 로그인에 성공하면, 서버는 해당 클라이언트를 식별하기 위한 세션값을 생성하고 응답에 실어 전송합니다.
- 클라이언트는 세션값을 수신하고 쿠키에 담아 보관합니다.
- 이후 요청 시, 세션값이 담긴 쿠키를 요청 헤더에 실어 전송합니다.
- 서버는 헤더에 담긴 쿠키를 파싱해 세션값을 검증하고, 클라이언트가 유효함을 인증합니다.
장점
- 쿠키는 크기가 작고 사용 및 갱신이 간단합니다.
단점
- 서버에서는 세션값을 저장하기 위한 추가적인 메모리를 확보해야 합니다.
- 쿠키가 XSS 및 CSRF 공격에 취약하다는 문제가 있습니다.
세션 기반 인증 방식의 구현 팁
- 세션값은 중복을 방지하기 위해 충분히 긴 무작위 값이 되어야 합니다. (128비트가 권장된다고 합니다!)
- 이 때, 유저 데이터와는 관련이 없는 완전한 무작위 값이 되어야 합니다.
- 쿠키는
secure
속성과httpOnly
속성을 가져야 합니다. (*) - 창을 닫을 때, 유효시간이 만료될 때, 로그아웃을 할 때 세션이 무효화되도록 올바르게 관리해야 합니다.
(*) secure와 httpOnly는 쿠키에 사용하는 옵션입니다.secure
: HTTPS 프로토콜로 통신할 때만 쿠키를 서버로 전송하는 옵션httpOnly
: document.cookie 를 통해 스크립트로 쿠키에 접근하는 것을 차단하는 옵션
토큰 기반 인증 방식
Tip. 토큰 기반 인증 방식은 세션 인증방식의 상위호환이 아닙니다!
아직도 세션 인증방식 역시 널리 사용된다고 하니, '토큰이 언제나 세션 방식보다 좋다' 는 생각은 금물입니다!
토큰 기반 인증방식은 JWT(Json Web Token)이라는 토큰을 사용하는 인증 방식입니다.
세션 인증 방식에서는 서버 - 클라이언트가 동일한 세션값을 갖고 있는지를 검사해 클라이언트가 유효한지를 증명했다면, JWT는 토큰 자체가 하나의 인증서가 되어 클라이언트가 유효함을 증명합니다.
토큰 인증 방식은 다음과 같이 동작합니다.
인증 과정
- 클라이언트가 로그인을 시도합니다.
- 로그인에 성공하면, 서버는 서명된(인증 정보를 암호화한) 토큰을 응답으로 전송합니다.
- 클라이언트는 토큰을 받아 브라우저에 저장합니다.
- 이후 요청 시, 헤더의
Authorization
속성에 토큰을 실어 전달합니다. - 서버는 토큰을 검사하고, 토큰이 유효하면 요청을 처리합니다.
장점
- 서버에서는 세션값 등 별도로 데이터를 보관할 메모리를 확보하지 않아도 됩니다.
단점
- JWT는 SHA256으로 해시되므로 세션값에 비해 비교적 많은 용량을 차지합니다.
토큰 기반 인증 방식의 구현 팁
- 올바른 JWT 생성 알고리즘을 적용해야 합니다. (관련 내용은 JWT 공식 문서 에서 확인해볼 수 있습니다.)
- 토큰 생성 시, 토큰의 만료시각을 포함해야 합니다.
지금까지는 인증에 관한 이론을 간략히 소개했는데, 다음 글부터는 파이어베이스 + 리액트 기반으로 세션 인증방식을 실제로 구현해보도록 하겠습니다.
반응형
'🎨 프론트엔드 > React.js' 카테고리의 다른 글
야, 너도 상태관리 할 수 있어 2편 : 리코일 사용하기 (0) | 2021.08.25 |
---|---|
야, 너도 상태관리 할 수 있어 1편 : 리코일이란? (1) | 2021.08.24 |
리액트의 key 속성은 왜 필요할까? (0) | 2021.08.16 |
redux-saga의 call에 관해 (0) | 2021.05.26 |
useState 똑똑하게 사용하기 (0) | 2021.05.10 |
Comments
소소한 팁 : 광고를 눌러주시면, 제가 뮤지컬을 마음껏 보러다닐 수 있어요!
와!! 바로 눌러야겠네요! 😆