3.3 KiB
3.3 KiB
PHP SSO 연동 데모 페이지 개발 계획
목표
기존 SvelteKit 프로젝트의 SSO 로그인 방식을 PHP 환경에서 동일하게 구현하는 간단한 데모 페이지를 제작합니다. 사용자가 이 페이지의 로그인 버튼을 클릭하면, 설정된 SSO URL로 이동하여 인증을 시작할 수 있도록 합니다.
작업 단계
-
[ ] 프로젝트 디렉토리 생성
sso-php-demo라는 이름의 새 디렉토리를 프로젝트 루트에 생성하여 데모 관련 파일들을 관리합니다.
-
[ ] 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>엘리먼트를 추가합니다.
-
[ ] 클라이언트 사이드 JavaScript 로직 추가
index.php파일의<body>태그가 닫히기 전에<script>태그를 추가합니다.- 이 스크립트 태그 안에서 다음 로직을 구현합니다:
sso-login-btnID를 가진 버튼 엘리먼트를 가져옵니다.- 버튼에
click이벤트 리스너를 추가합니다. - 이벤트 리스너 콜백 함수는 기존 SvelteKit 프로젝트(
authStore.ts)와 동일하게window.open()을 사용하여 팝업 창으로 SSO 페이지를 엽니다. - 팝업 창의 크기와 위치 설정 로직도 동일하게 구현합니다.
-
[ ] 환경 변수 관리
- 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'); ?>";)
- PHP는 Vite와 달리
-
[ ] 실행 및 테스트 가이드 작성
sso-php-demo디렉토리에 간단한README.md파일을 작성합니다.README.md파일에 다음 내용을 포함하여 데모 실행 방법을 안내합니다.- 의존성 설치 (
composer install) .env파일 설정 방법- PHP 내장 웹 서버 실행 방법 (
php -S localhost:8001 -t .) - 브라우저에서
http://localhost:8001로 접속하여 테스트하는 방법
- 의존성 설치 (
-
[ ] 최종 검토
- 작성된 데모 페이지가 기존 namecard 프로젝트의 로그인 버튼과 동일하게 동작하는지 최종 확인합니다.