3f403e53ce26704ce7b5b500cf8e0ae30e6ea082
Express.js SSO 데모 (Docker Compose)
이 프로젝트는 Express.js 애플리케이션에서 SSO(Single Sign-On) 로그인 흐름을 구현한 간단한 데모입니다. docker-compose를 사용하여 간편하게 컨테이너 환경에서 실행할 수 있도록 설정되어 있습니다.
주요 기능
- 팝업 기반 인증: 페이지 이동 없이 팝업 창을 통해 사용자에게 쾌적한 로그인 경험을 제공합니다.
- JWT 처리: URL 쿼리 파라미터로 전달된 JWT(JSON Web Token)를 안전하게 처리합니다.
- 자동 사용자 생성: SSO 로그인이 성공했을 때, 해당 사용자가 존재하지 않으면 자동으로 신규 사용자를 생성합니다.
- 세션 관리:
express-session을 사용하여 사용자의 로그인 상태를 유지합니다. - SSO 제공자 시뮬레이션: 외부 SSO 제공자의 동작을 모방하는 간단한 HTML 페이지를 포함하여 쉬운 테스트 환경을 제공합니다.
요구 사항
- Docker
- Docker Compose (Docker Desktop에 포함되어 있음)
애플리케이션 실행하기
-
저장소를 클론하거나 코드를 다운로드합니다.
-
프로젝트 루트 디렉토리에서 아래 명령어를 실행하여 Docker 컨테이너를 빌드하고 실행합니다.
docker-compose up --build-d플래그를 추가하면 백그라운드에서 실행할 수 있습니다 (docker-compose up --build -d). -
브라우저를 엽니다. http://localhost:3000 주소로 접속합니다.
-
애플리케이션 종료하기
docker-compose down
개발 환경
docker-compose.yml은sso-demo디렉토리를 컨테이너의 작업 디렉토리로 마운트합니다.nodemon이 설치되어 있어, 로컬에서 소스 코드를 수정하면 컨테이너 안의 서버가 자동으로 재시작됩니다.
동작 원리
- 사용자가 메인 페이지의 "Login with SSO" 버튼을 클릭합니다.
- 시뮬레이션된 SSO 제공자의 로그인 페이지(
/sso_popup.html)가 팝업 창으로 열립니다. - 사용자가 팝업 창의 "Confirm Login" 버튼을 클릭합니다.
- 팝업 창은 테스트용 JWT를 생성하여
window.postMessage를 통해 메인 애플리케이션 창으로 전송합니다. - 메인 창은 토큰을 수신한 뒤,
?token=쿼리 파라미터에 토큰을 추가하여 페이지를 새로고침합니다. - Express 백엔드가 이 요청을 가로챕니다.
ssoHandler미들웨어는 토큰을 처리하고, 토큰의sub클레임을 기반으로 사용자를 찾거나 생성한 뒤, 사용자 ID를 세션에 저장합니다. - 미들웨어는 주소창을 깔끔하게 정리하기 위해 토큰 없이 원래 URL로 리다렉트합니다.
- 이제 페이지는 로그인된 사용자 정보를 표시하며 렌더링됩니다.
Description
Languages
JavaScript
52.7%
EJS
18.1%
CSS
14.1%
HTML
12.5%
Dockerfile
2.6%