본문 바로가기

공부/타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js)

백엔드 심화: 인증과 비동기처리(6)-미들웨어 이슈 해결, 로그인 인증-인가, 쿠키-세션-JWT, dotenv-.env, cookie-parser

✨미들웨어

미들웨어에서 다 처리하는 response가 아닌이상,

return next()를 넣어주어야 한다❗

✨✨response를 받아온다❗❗❗

 

Users

express-validator 사용한 버전

🔸회원 탈퇴를 하면 생성한 채널도 모두 삭제되게 구현했다.

 

로그인 세션 - 인증, 인가

인증(Authentication) (=로그인)

🔸관리자, 고객 상관없이 인증을 통해 사이트에 가입된 사용자라는 것을 증명

 

인가(Authorization) 

🔸인증 후 페이지 접근 권한

 

쿠키 vs 세션 vs JWT

쿠키(Cookie)란

  • 웹에서 서버와 클라이언트가 주고받는 데이터 중 하나
  • 웹 서버에서 데이터 생성 후 브라우저로 넘기면, 브라우저의 자기 메모리에 저장 후 웹 서버 방문시 가지고 있는 쿠키로 요청을 한다.
장점 서버에 저장하지 않아서 서버 저장공간을 아낄 수 있음.
Stateless => RESTful ❄️ 상태를 저장하지 않는다, http의 특징을 잘 살림
단점 보안에 취약

세션(Session)이란?

  • Cookie에 담아서 주고받는 것은 보안에 취약하므로 그 해결방안이 session
  • 중요한 정보는 세션을 통해 서버에 저장 후, 정보가 어디있는지 주소만 적어 쿠키에 담는다.
  • 쿠키에 넣어 주고받기엔 중요한 데이터는 세션에 넣고 session ID만 쿠키에 넣어서 통신한다.
장점 쿠키보다 보안이 좋다.
단점 서버에 저장을 해서 서버 저장공간을 차지하므로 Stateless 하지않다.❌

JWT(JSON Web Token)이란?

개념

  • JSON형태의 데이터를 안전하게 전송하기 위해 암호화하여 웹에서 사용하는 토큰
  • 토큰을 가진 사용자의 입장 인증, 권한 인가 등을 증명하기 위한 수단
장점 암호화가 되어있어 보안에 강하다.
서버가 상태를 저장하지 않음 => Stateless 하다.⭕
따라서 서버 부담이 줄어든다.
cf. 토근을 발행하는 서버를 따로 만들어 줄 수 있다.
단점  

 

구조

  • 헤더: 토큰을 암호화하는데 사용한 알고리즘 종류, 토큰의 타입(jwt)
  • 페이로드: 사용자 정보 (비밀번호를 담아 옮기는 일은 거의 없다.❌)
  • 서명: 페이로드 값이 바뀌면, 이 서명값이 통째로 바뀌기 때문에 JWT를 믿고 사용할 수 있다.

 

JWT 외부모듈 설치하기

yarn add jsonwebtoken

 

 

.env(environment: 환경변수 - 설정 값)

개념

개발을 하다가 사용되는 포트넘버, 데이터베이스 계쩡, 암호키 등

외부에 유출되면 안되는 중요한 환경 변수들을 따로 관리하기 위한 파일

cf.  깃허브에 올라가면 안되는 값

 

dotenv 외부모듈 설치하기

yarn add dotdev

 

❄️.env 파일은 환경 변수 파일 => 프로젝트 최상위 패키지에 존재

 

.env의 컨벤션은 대문자, 스네이크 케이스이고, 세미콜론은 필요없고

주석은  # 으로 사용한다.

import해주고 .config() 를 해줘야

process.env.PRIVATE_KEY 를 불러 사용할 수 있다.

 

❄️우리의 users.js 파일의 로그인에 .env와 JWT를 사용해보기❗

 

❄️Cookie로 token을 담아 response 보내기

❄️HttpOnly

프론트엔드가 아니라 API호출만 허락하는지 물어보는 것이다.

XSS공격 ( 프론트엔드 공격: 웹브라우저 js접근 => 공격 )

❄️Secure

HTTP에서 SSL인증서를 받으면 HTTPS(Secure)로 되고,

지금 POSTMAN에서 맨 끝 컬럼에 있는 secure은 HTTPS의 환경으로 통신을 할 것인지 물어보는 것이다.

❄️Cookie 옵션 추가하기

맨 뒤에는 쿠키의 옵션값을 설정해 줄 수 있다.

여기서 httpOnly나 secure을 true로 줄 수 있다.

 

❄️Cookie 유효기간 설정하기

sing의 맨 뒤에는 옵션을 추가해 줄 수 있다.

유효기간은 expiresIn이고 사용은 '1h' or '1m' 으로 h나 m을 사용한다.

issuer는 쿠키를 발행한 사람이 누구인지 표시해주는 것이다.

❄️토큰을 받아서 확인해 보기

iat: 토큰을 발급 받은 시간

exp: 토큰이 만료되는 시간

iss: 토큰을 발급한 사람

❄️Cookie-parser 외부모듈 설치하기

요청값으로 쿠키를 불러올 수 있다.

yarn add cookie-parser