Post

원티드 프리온보딩 - 로그인 기능 구현하기 3 (내용)

Posted Updated
By hyemin 6 min read

원티드 프리온보딩 - 로그인 기능 구현하기 3강 내용

실습 코드

세션이란?

  • 사용자의 로그인 이후 로그아웃 혹은 로그인 만료까지의 기간
  • 연결 그 자체

  • 신분증 같은 느낌(임시출입증)

  • 세션 방식 로그인 :

    • 사용자 로그인이 유효한 시간동안 서버에 세션 아이디를 기록해 두고 인증에 사용하는 방식
  • 세버가 세션 아이디를 기록하는 방법 274501142-09e785bb-accf-4248-a5a7-e853b0ef67fc

쿠키란?

  • HTTP 쿠키는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각입니다. 브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송합니다. 쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용합니다. 이를 이용하면 사용자의 로그인 상태를 유지할 수 있습니다. 상태가 없는(statless) HTTP 프로토콜에서 상태 정보를 기억시켜주기 때문입니다.
  • response headers에 담아서 전달
  • 쿠키 세팅은 프론트 엔드에서 절대 건드리면 안 됨 (건드리면 위험한 쿠키가 됨)

274507598-65ddd4f8-bf71-4874-90fa-53e1ba620ec8

쿠키의 목적

  • 세션 관리 (Session management)

    • 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등 정보 관리

  • 개인화 (Personalization)

    • 사용자 선호, 테마 등의 세팅

  • 트래킹 (Tracking)

    • 사용자 행동을 기록하고 분석하는 용도

274507449-c8f35fba-f6b2-4bbb-9a7a-5ce9fc4beb05

쿠키 관련 정책 지정하기

1. SameSite :

  • 크로스 사이트(Cross-site)로 전송하는 요청의 경우 쿠키 전송에 제한을 두도록 설정

  • 정확하게 같은 origin(도메인)이 같은 하나의 인스턴스에서 실행

  • None:

    • 가장 보안이 낮은 정책
    • 항상 쿠키가 전송됨

  • Strinck:

    • 가장 보수적인 정책
    • 크로스 사이트 요청에는 항상 전송되지 않음
  • Lax:
    • 안전한 몇개의 도메인에 한해 cross site 허용

2. maxAge : 유효기간

3. Secure : HTTPS 프로토콜 상에서 암호화된 요청일 경우에만 전송됨

4. httpOnly : XSS 공격을 방지 하기 위한 정책, 읽고 쓰는 것이 불가능 (Get/Post)

Cors (Cross-origin Resource Sharing)

교차 출처 리소스 공유 정책

Cross-origin

  • 프로토콜이 다른 경우: http https
  • 도메인이 다른 경우: naver.com google.com
  • 포트 번호가 다른 경우: Port 8000 Port 8001

Cors error message

1

Access to XMLHttpRequest at 'https://localhost:4000/api/rout/' from origin 'https://localhost:3000/' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
  • 로컬 환경에서 CORS 및 보안 플래그 검증 해제하기

1. Cors 무시하도록 설정하기

1
2
3

# MacOS terminal

$ open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security

1
2
3

# Windows PowerShell

$ "C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=%LOCALAPPDATA%\Google\chromeTemp -–allow-file-access-from-files

2. mkcert 라이브러리를 사용해서 로컬호스트를 https로 띄우기

mkcert

274516618-940ca359-10dc-4197-ab68-4f6eff7b9658

세션방식 로그인 하기

headers에 credentials: 'include' 넣어서 요청보내고, 로그인/user 정보 받아오기

1
2
3
4
5
6

const loginResponse = await axios.post(`${BASE_URL}/auth/login`, args, {
  headers: {
    "Content-Type": "application/json",
    credentials: "include" //
  }
});

1. 세션이 유효한지 서버에 확인

실습에서 getCurrentUserInfo 함수

1-1. 세션이 유효하다면 세션 사용 (로그인 패스)

1-2. 세션이 유효하지 않다면 로그인 진행

사용자가 입력한 아이디와 pw를 보내 로그인을 하고, session id를 쿠키로 전달받기

274535922-02d0624f-f012-47c0-bbd4-dde246aaea58

세션과 JWT의 장단점

구분JWT세션
장점인프라 개발/장비값이 감소 (서버/백엔드 비용 감소)프론트엔드 인증 쉬워짐(cookie에 알아서 저장되고, 알아서 header에 넣어서 요청하기때문에)
보안상 약간의 향상
단점프론트엔드 복잡도 높아짐 (구현해야하는 것이 더 많음)
보안상 세션보다 조금 더 위험		세션을 유지시켜야하기 때문에 인프라 비용 증가 (서버/백엔드 비용 대폭 증가)

참고사이트 :

원티드-프리온보딩, 로그인기능
Pre-onboarding 로그인
This post is licensed under CC BY 4.0 by the author.