Demo 2 — Card System

Admin — Employee Registration (관리자 — 직원 등록)

http://localhost:5174/admin 접속 후 관리자 계정으로 로그인한다.

직원 등록 으로 사번·이름·이메일·초기 비밀번호를 입력한다. 등록된 직원만 로그인할 수 있다.

목록에서 OTP 상태(미등록/등록/잠김)와 남은 복구 코드 수를 확인할 수 있고, 행 우측 버튼으로 MFA 초기화 / 임시 우회 코드 발급 / 삭제 를 수행한다.

First Login — TOTP Enrollment (직원 첫 로그인 — TOTP 등록)

http://localhost:5174/login 에서 사번+초기 비밀번호 로그인.

최초 로그인이면 QR 등록 화면이 나온다. 스마트폰의 Google Authenticator (또는 Microsoft Authenticator) 로 QR 스캔 → 앱에 표시된 6자리 코드 입력.

코드 확인이 성공하면 복구 코드 10개가 1회 표시된다. (시연 포인트: 다시 볼 수 없음을 강조)

확인을 누르면 카드관리시스템 대시보드로 진입한다.

Re-login — TOTP Authentication (재로그인 — TOTP 인증)

로그아웃 후 다시 로그인하면 6자리 코드 입력 화면이 나온다. 하단 링크로 복구 코드/임시 우회 코드 경로도 선택할 수 있다.

시연 포인트:

• 같은 코드 재입력 → "코드가 올바르지 않습니다" (서버는 CODE_REPLAYED — replay 차단)
• 틀린 코드 5회 → 5분 잠금 (USER_LOCKED), 관리자 콘솔에서 잠금 해제 가능
• 기기 분실: 관리자 화면에서 임시 우회 코드(15분 유효) 발급 → 직원이 "임시 우회 코드 사용" 으로 로그인 → 관리자가 MFA 초기화 → 다음 로그인 시 재등록