팝업 기반 로그인: 페이지 이동 없이 팝업창을 통해 SSO 로그인을 진행하여 사용자 경험을 향상시켰습니다.
JWT 인증: SSO 공급자로부터 받은 JWT를 PHP 백엔드에서 파싱하여 사용자를 인증합니다.
자동 회원가입 및 로그인: SSO로부터 받은 고유 사용자 ID(sub)를 기반으로 WordPress 사용자를 조회하거나, 존재하지 않을 경우 자동으로 생성하고 즉시 로그인 처리합니다.
WordPress 관리자 설정: 관리자 페이지 > 설정 메뉴에 "Baron SSO Login" 메뉴를 추가하여 SSO 프론트엔드 URL을 쉽게 설정할 수 있도록 했습니다.
향상된 UI/UX:
- 방문자의 시선을 끄는 세련된 히어로(Hero) 헤더
- 로그인 상태를 명확히 보여주는 상태 배지(Status Badge)
- 가독성을 높인 카드(Card) 형태의 블로그 글 목록
- 사용자와의 상호작용을 시각적으로 보여주는 버튼 디자인
- 데모의 목적을 명확히 안내하는 CTA(Call-to-Action) 배너

디렉터리 구조

.
├── docker-compose.yml         # WordPress 실행을 위한 Docker 설정 파일
├── README.md                  # 프로젝트 안내 문서
└── sso-wordpress-plugin/
    ├── sso-wordpress-plugin.php # SSO 연동 로직과 UI 개선 코드가 담긴 메인 플러그인 파일
    └── js/                      # (현재 비어있음, 향후 JS 분리 시 사용)

설치 및 실행 방법

요구 사항: Docker, Docker Compose

WordPress 환경 실행 프로젝트 루트 디렉터리에서 아래 명령어를 실행하여 WordPress 사이트와 데이터베이스를 실행합니다.
```
docker-compose up -d
```
WordPress 접속 및 설정
- 웹 브라우저에서 http://localhost:8000 로 접속하여 WordPress 설치를 진행합니다.
- 관리자 페이지(http://localhost:8000/wp-admin)로 로그인합니다.
플러그인 설치 및 활성화
- sso-wordpress-plugin 폴더를 zip 파일로 압축합니다.
- WordPress 관리자 페이지에서 플러그인 > 새로 추가 > 플러그인 업로드 메뉴로 이동합니다.
- 압축한 zip 파일을 업로드하고 플러그인을 활성화합니다.
SSO 플러그인 설정
- 설정 > Baron SSO Login 메뉴로 이동합니다.
- "Baron SSO Frontend URL" 입력 필드에 실제 SSO 서비스의 로그인 URL을 입력합니다. (예: http://localhost:3000)
- Save Settings 버튼을 눌러 저장합니다.
데모 확인
- 사이트 메인 페이지(http://localhost:8000)로 이동하여 우측 상단에 나타나는 "Baron SSO 로그인" 버튼을 통해 SSO 연동 기능을 테스트할 수 있습니다.

핵심 동작 원리

로그인 시작: 사용자가 "Baron SSO 로그인" 버튼을 클릭하면, sso_inject_header_button 함수에 의해 생성된 버튼이 openSsoPopup JavaScript 함수를 호출하여 SSO 로그인 페이지를 팝업창으로 띄웁니다.
인증 및 토큰 전달: 사용자가 SSO 서비스에서 로그인을 성공하면, SSO 프론트엔드는 window.postMessage를 통해 JWT(JSON Web Token)가 포함된 객체를 원래의 WordPress 창으로 전송합니다.
토큰 수신 및 페이지 새로고침: sso_add_popup_script 함수에 포함된 JavaScript 이벤트 리스너가 메시지를 수신하고, JWT를 ?token=... 쿼리 파라미터로 추가하여 페이지를 새로고침합니다.
백엔드 처리:
- sso_handle_jwt_login 함수가 페이지 로드 시 token 파라미터를 감지하고 sso_process_jwt_and_login 함수를 호출합니다.
- sso_process_jwt_and_login 함수는 JWT를 디코딩하고 sub 클레임(사용자 고유 ID)을 추출합니다.
- 추출된 ID를 sso_subject_id라는 user_meta 키로 WordPress 사용자를 조회합니다.
- 사용자가 없으면 해당 ID를 사용자명으로, ID@sso.local 형식의 가상 이메일로 새 사용자를 생성하고 user_meta에 sso_subject_id를 저장합니다.
- wp_set_auth_cookie 등의 함수를 통해 사용자를 로그인 상태로 만듭니다.
UI 업데이트: 페이지가 다시 로드되면 사용자는 로그인 상태가 되며, 우측 상단에는 "로그아웃" 버튼과 함께 "Logged in as: ..." 배지가 표시됩니다.