headless-login-demo

Headless 인증: IdP가 제공하는 UI를 거치지 않고, RP(데모 앱)가 사용자 자격 증명을 직접 받아 백채널로 인증을 수행합니다.
동적 UI 전환: 입력값(숫자 vs 문자)을 실시간으로 분석하여 '전화번호 인증' 또는 '사번 로그인' 모드로 자동 전환됩니다.
Trusted RP 구현:
- OIDC Discovery: sso-test.hmac.kr의 메타데이터를 동적으로 로드합니다.
- JWKS Endpoint: 서버 시작 시 생성된 RSA 공개키를 /.well-known/jwks.json을 통해 서빙하여 IdP와의 신뢰 관계를 형성합니다.
세션 유지: 인증 완료 후 express-session을 통해 로그인 상태를 유지하고 사용자 정보를 관리합니다.
PM-fork 스타일 디자인: 기존 프로젝트의 디자인 토큰(그라데이션, 라운드 처리 등)을 Vanilla CSS로 재현했습니다.

기술 스택

Backend: Node.js, Express, express-session
OIDC: openid-client (v5.x), jose
Frontend: Vanilla JS, Modern CSS (Flexbox, CSS Variables)

시작하기

1. 환경 설정

프로젝트 루트에 .env 파일을 생성하고 아래와 같이 설정합니다.

PORT=3000
CLIENT_ID=15cfb85c-f75f-4b51-a13d-d04f87d39739
ISSUER=https://sso-test.hmac.kr/oidc
REDIRECT_URI=http://localhost:3000/callback
JWKS_URI=http://localhost:3000/.well-known/jwks.json

2. 의존성 설치

npm install

3. 서버 실행

npm start

프로젝트 구조

├── server.js           # Express 서버 및 OIDC 로직 (Discovery, JWKS, API)
├── public/             # 프론트엔드 정적 파일
│   ├── index.html      # 로그인 화면
│   ├── home.html       # 인증 후 메인 화면
│   ├── app.js          # 입력값 분석 및 API 통신 로직
│   └── styles.css      # PM-fork 스타일 시트
├── keys.json           # (자동생성) 서비스용 RSA 키 쌍
└── .env                # 환경 변수 설정

핵심 구현 로직

1. 입력값 분류 (Classify Input)

사용자가 입력한 값이 숫자만 포함되어 있으면 전화번호(phone) 모드로, 문자가 포함되어 있으면 사번(employee) 모드로 인식합니다.

Phone: 인증 링크 발송 시뮬레이션 실행.
Employee: 비밀번호 입력란 노출 및 OIDC Password Grant 요청 실행.

2. OIDC Password Grant (Real Communication)

데모 앱은 사용자로부터 받은 loginId와 password를 SSO 서버의 토큰 엔드포인트로 직접 전달합니다.

SSO 서버가 해당 방식을 허용하도록 설정되어 있어야 하며, 화이트리스트에 등록된 REDIRECT_URI와 일치해야 합니다.

라이선스

이 프로젝트는 내부 테스트 및 데모 목적으로 제작되었습니다.

README.md

Headless Login Demo (OIDC Integration)

주요 특징