Notice
Recent Posts
Recent Comments
Link
«   2024/09   »
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
more
Archives
Today
Total
관리 메뉴

Ruff! Ruff!

서버 시스템 구축 실습 - 사용자 계정 인증 본문

CS

서버 시스템 구축 실습 - 사용자 계정 인증

maeng-kim 2024. 5. 8. 17:09

1. 사용자 계정 인증
   - Stateless vs Stateful

      👉 상태가 있냐/ 없냐의 차이

  • Stateful
    • 서버의 클라이언트 이전 상태 보존
    • 대화를 주고 받을 때 컨텍스트를 이해(유지)
    • 장점: 애플리케이션 구현 편리/ 성능
    • 단점: 서버의 부담 (연결 정보 유지 + 유지 및 관리 어려움)
  • Stateless
    • 서버의 클라이언트 이전 상태 보존 X
    • 대화를 주고 받을 때 컨텍스트를 이해(유지) X 
    • 장점: 확장성 (컨텍스트 몰라도 어떤 서버든 처리 가능)
    • 단점: 상태를 유지해야 하는 경우엔 어떡함? -> 로그인 인증..

  - HTTP 프로토콜

  •   Stateless 프로토콜
  • 대부분의 서비스는 stateful을 요구함
    -> 정보가 유지되지 않으면 불편한 점 많음 (로그인 다시 진행, 장바구니 리셋 등)
  • 클라이언트 정보 유지 -> 쿠키(클라이언트) + 세션(서버)

 - 쿠키

  • Cookie
    서버가 유저의 웹 브라우저에 저장하는 데이터
    사용자 요청 시 쿠기를 함께 서버 측으로 전달
  • 활용
    세션 관리 (인증) -> 서버에 저장할 정보 관리
    개인화 -> 사용자 선호, 테마 등의 설정 가능
    트래킹 -> 사용자 행동 기억 후 분석하는 용도

    *cookie-parser
    헤더로부터 cookie와 signed cookie 파싱
    npm install cookie-parser -S
  • 종류
    세션쿠키 : 브라우저가 켜져 있는 동안만 유효
    영구쿠키: 브라우저를 종료/ 재실행해도 유효

- 세션 기반 인증

  • 민감한 정보는 서버 쪽에 저장
  • 웹 브라우저에는 사용자 식별 데이터만 저장 (세션 아이디 : 사용자 식별 값)

동작 과정 (쿠키를 기반으로 동작)
- 클라이언트가 서버 접속 시 세션 아이디 발급
- 클라이언트는 세션 아이디를 쿠키로 저장
- 클라이언트는 서버에 요청 시 세션아이디를 같이 전달
- 서버는 세션 아이디를 확인하여 해당 클라이언트 정보를 읽어 옴
- 서버는 해당 클라이언트 정보를 가지고 요청을 처리한 후, 클라이언트에게 응답



2. 플래시 메세지
 - 애플리케이션 사용자에게 정보를 보여주는 반영구 데이터
 - 애플리케이션 서버에서 생성돼 세션의 일부로서 사용자 브라우저에 전달됨
 - 리다이렉션 or 렌더링 시 사용자에게 메세지 전달 목적으로 사용

- connect-flash 모듈의 활용
   -암호화된 쿠키를 사용해 요청 간에 플래시 메세지를 전달
     - 애플리케이션에 대한 각 사용자의 활동
     - 사용자가 로그인 되어 있는지
     - 가장 최근의 요청에 오류가 발생했는지
 - 플래시 메세지의 작동

    ⚡️ 사용자에게 뷰를 렌더링해주기 전에 만들어지는 요청에 플래시 메세지 추가
    ⚡️ connect-flash 미들웨어 함수를 추가하고 나면, req.flash()를 통해 플래시 메세지 추가 가능

 

 

 

 

3. 패스워드의 해싱

- 암호화의 필요성

  • 데이터베이스의 해킹으로 인한 암호화되지 않은 평문 패스워드의 유출
  • 고유 키나 암호를 결합해 오리지널 데이터를 표현하지만 직접 사용할 수 없는 값을 만드는 과정
  • 데이터 해싱을 통해 암호화 가능
    - 리버스 해싱이 불가능해야 함

* bcrypt 해시 함수의 활용

*passport.js를 이용한 암호화 추가
- 패스워드 해싱과 애플리케이션에서의 인증 활동을 위한 미들웨어

- 데이터의 직렬화
   👉 압축된 가독 형식으로 데이터 구조를 바꾸는 프로세스 

   👉 passport.js의 역할
       - 직렬화 프로세스 수행
       - 사용자 데이터 암호화
       - 클라이언트 브라우저에 암호화된 사용자 데이터를 세션 쿠기 중 일부로 저장
       - 다음 번 요청 시 해당 사용자가 이미 로그인했다는 것을 전달받은 쿠키값을 통해 알 수 있음 (역직렬화 필요)