44 lines
3.3 KiB
Markdown
44 lines
3.3 KiB
Markdown
# PHP SSO 연동 데모 페이지 개발 계획
|
|
|
|
## 목표
|
|
|
|
기존 SvelteKit 프로젝트의 SSO 로그인 방식을 PHP 환경에서 동일하게 구현하는 간단한 데모 페이지를 제작합니다. 사용자가 이 페이지의 로그인 버튼을 클릭하면, 설정된 SSO URL로 이동하여 인증을 시작할 수 있도록 합니다.
|
|
|
|
## 작업 단계
|
|
|
|
1. **[ ] 프로젝트 디렉토리 생성**
|
|
* `sso-php-demo` 라는 이름의 새 디렉토리를 프로젝트 루트에 생성하여 데모 관련 파일들을 관리합니다.
|
|
|
|
2. **[ ] PHP 파일 및 기본 HTML 구조 작성**
|
|
* `sso-php-demo` 디렉토리 내에 `index.php` 파일을 생성합니다.
|
|
* `index.php` 파일에 기본 HTML5 상용구(boilerplate) 코드를 작성합니다.
|
|
* 페이지 제목과 본문에 간단한 헤더(예: `<h1>PHP SSO Demo</h1>`)를 추가합니다.
|
|
* SSO 로그인을 시작할 `<button id="sso-login-btn">Login with SSO</button>` 엘리먼트를 추가합니다.
|
|
|
|
3. **[ ] 클라이언트 사이드 JavaScript 로직 추가**
|
|
* `index.php` 파일의 `<body>` 태그가 닫히기 전에 `<script>` 태그를 추가합니다.
|
|
* 이 스크립트 태그 안에서 다음 로직을 구현합니다:
|
|
* `sso-login-btn` ID를 가진 버튼 엘리먼트를 가져옵니다.
|
|
* 버튼에 `click` 이벤트 리스너를 추가합니다.
|
|
* 이벤트 리스너 콜백 함수는 기존 SvelteKit 프로젝트(`authStore.ts`)와 동일하게 `window.open()`을 사용하여 팝업 창으로 SSO 페이지를 엽니다.
|
|
* 팝업 창의 크기와 위치 설정 로직도 동일하게 구현합니다.
|
|
|
|
4. **[ ] 환경 변수 관리**
|
|
* PHP는 Vite와 달리 `import.meta.env`와 같은 내장 기능이 없으므로, `.env` 파일을 로드하기 위한 별도의 방법이 필요합니다.
|
|
* `sso-php-demo` 디렉토리에 `composer.json` 파일을 생성하고 `vlucas/phpdotenv` 라이브러리를 의존성으로 추가합니다.
|
|
* `composer install` 명령을 실행하여 라이브러리를 설치합니다.
|
|
* `sso-php-demo` 디렉토리에 `.env` 파일을 생성하고 `SSO_URL=http://localhost:5000/` 와 같이 SSO URL을 정의합니다. (기존 `.env` 파일의 `VITE_SSO_URL` 값을 참고)
|
|
* `index.php` 상단에서 `phpdotenv` 라이브러리를 사용하여 `.env` 파일을 로드하고 `getenv('SSO_URL')` 함수로 SSO URL 값을 읽어옵니다.
|
|
* 읽어온 URL을 JavaScript 코드에서 사용할 수 있도록 PHP `echo`를 사용하여 변수로 주입합니다. (예: `const ssoUrl = "<?php echo getenv('SSO_URL'); ?>";`)
|
|
|
|
5. **[ ] 실행 및 테스트 가이드 작성**
|
|
* `sso-php-demo` 디렉토리에 간단한 `README.md` 파일을 작성합니다.
|
|
* `README.md` 파일에 다음 내용을 포함하여 데모 실행 방법을 안내합니다.
|
|
1. 의존성 설치 (`composer install`)
|
|
2. `.env` 파일 설정 방법
|
|
3. PHP 내장 웹 서버 실행 방법 (`php -S localhost:8001 -t .`)
|
|
4. 브라우저에서 `http://localhost:8001` 로 접속하여 테스트하는 방법
|
|
|
|
6. **[ ] 최종 검토**
|
|
* 작성된 데모 페이지가 기존 namecard 프로젝트의 로그인 버튼과 동일하게 동작하는지 최종 확인합니다.
|