README.md 최신화

README.md

@@ -0,0 +1,75 @@
+# PHP/WordPress 기반 SSO 연동 데모
+
+이 프로젝트는 PHP(WordPress) 환경에서 Baron SSO와 같은 외부 인증 서버와 연동하는 방법을 보여주는 데모입니다.
+
+단순히 기능만 구현하는 것을 넘어, 실제 제품 페이지처럼 보이도록 UI/UX를 개선하는 과정을 포함합니다. 사용자는 팝업창을 통해 외부 SSO 서비스에 로그인하고, 그 결과(JWT)를 받아 WordPress 사이트에 자동으로 로그인 처리됩니다.
+
+## 주요 기능
+
+-   **팝업 기반 로그인:** 페이지 이동 없이 팝업창을 통해 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
+
+1.  **WordPress 환경 실행**
+    프로젝트 루트 디렉터리에서 아래 명령어를 실행하여 WordPress 사이트와 데이터베이스를 실행합니다.
+    ```bash
+    docker-compose up -d
+    ```
+
+2.  **WordPress 접속 및 설정**
+    -   웹 브라우저에서 `http://localhost:8000` 로 접속하여 WordPress 설치를 진행합니다.
+    -   관리자 페이지(`http://localhost:8000/wp-admin`)로 로그인합니다.
+
+3.  **플러그인 설치 및 활성화**
+    -   `sso-wordpress-plugin` 폴더를 zip 파일로 압축합니다.
+    -   WordPress 관리자 페이지에서 `플러그인 > 새로 추가 > 플러그인 업로드` 메뉴로 이동합니다.
+    -   압축한 zip 파일을 업로드하고 플러그인을 활성화합니다.
+
+4.  **SSO 플러그인 설정**
+    -   `설정 > Baron SSO Login` 메뉴로 이동합니다.
+    -   "Baron SSO Frontend URL" 입력 필드에 실제 SSO 서비스의 로그인 URL을 입력합니다. (예: `http://localhost:3000`)
+    -   `Save Settings` 버튼을 눌러 저장합니다.
+
+5.  **데모 확인**
+    -   사이트 메인 페이지(`http://localhost:8000`)로 이동하여 우측 상단에 나타나는 "Baron SSO 로그인" 버튼을 통해 SSO 연동 기능을 테스트할 수 있습니다.
+
+---
+
+## 핵심 동작 원리
+
+1.  **로그인 시작:** 사용자가 "Baron SSO 로그인" 버튼을 클릭하면, `sso_inject_header_button` 함수에 의해 생성된 버튼이 `openSsoPopup` JavaScript 함수를 호출하여 SSO 로그인 페이지를 팝업창으로 띄웁니다.
+2.  **인증 및 토큰 전달:** 사용자가 SSO 서비스에서 로그인을 성공하면, SSO 프론트엔드는 `window.postMessage`를 통해 JWT(JSON Web Token)가 포함된 객체를 원래의 WordPress 창으로 전송합니다.
+3.  **토큰 수신 및 페이지 새로고침:** `sso_add_popup_script` 함수에 포함된 JavaScript 이벤트 리스너가 메시지를 수신하고, JWT를 `?token=...` 쿼리 파라미터로 추가하여 페이지를 새로고침합니다.
+4.  **백엔드 처리:**
+    -   `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` 등의 함수를 통해 사용자를 로그인 상태로 만듭니다.
+5.  **UI 업데이트:** 페이지가 다시 로드되면 사용자는 로그인 상태가 되며, 우측 상단에는 "로그아웃" 버튼과 함께 "Logged in as: ..." 배지가 표시됩니다.