51 lines
3.0 KiB
Markdown
51 lines
3.0 KiB
Markdown
# 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](https://www.docker.com/products/docker-desktop/)
|
|
- [Docker Compose](https://docs.docker.com/compose/install/) (Docker Desktop에 포함되어 있음)
|
|
|
|
## 애플리케이션 실행하기
|
|
|
|
1. **저장소를 클론하거나 코드를 다운로드합니다.**
|
|
|
|
2. **프로젝트 루트 디렉토리에서 아래 명령어를 실행하여 Docker 컨테이너를 빌드하고 실행합니다.**
|
|
```bash
|
|
docker-compose up --build
|
|
```
|
|
`-d` 플래그를 추가하면 백그라운드에서 실행할 수 있습니다 (`docker-compose up --build -d`).
|
|
|
|
3. **브라우저를 엽니다.**
|
|
[http://localhost:3000](http://localhost:3000) 주소로 접속합니다.
|
|
|
|
4. **애플리케이션 종료하기**
|
|
```bash
|
|
docker-compose down
|
|
```
|
|
|
|
## 개발 환경
|
|
|
|
- `docker-compose.yml`은 `sso-demo` 디렉토리를 컨테이너의 작업 디렉토리로 마운트합니다.
|
|
- `nodemon`이 설치되어 있어, 로컬에서 소스 코드를 수정하면 컨테이너 안의 서버가 자동으로 재시작됩니다.
|
|
|
|
## 동작 원리
|
|
|
|
1. 사용자가 메인 페이지의 "Login with SSO" 버튼을 클릭합니다.
|
|
2. 시뮬레이션된 SSO 제공자의 로그인 페이지(`/sso_popup.html`)가 팝업 창으로 열립니다.
|
|
3. 사용자가 팝업 창의 "Confirm Login" 버튼을 클릭합니다.
|
|
4. 팝업 창은 테스트용 JWT를 생성하여 `window.postMessage`를 통해 메인 애플리케이션 창으로 전송합니다.
|
|
5. 메인 창은 토큰을 수신한 뒤, `?token=` 쿼리 파라미터에 토큰을 추가하여 페이지를 새로고침합니다.
|
|
6. Express 백엔드가 이 요청을 가로챕니다. `ssoHandler` 미들웨어는 토큰을 처리하고, 토큰의 `sub` 클레임을 기반으로 사용자를 찾거나 생성한 뒤, 사용자 ID를 세션에 저장합니다.
|
|
7. 미들웨어는 주소창을 깔끔하게 정리하기 위해 토큰 없이 원래 URL로 리다렉트합니다.
|
|
8. 이제 페이지는 로그인된 사용자 정보를 표시하며 렌더링됩니다.
|