kyy/sso_php_demo
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
kyy
2026-01-13 17:10:25 +09:00
commit 24f05eb279
5 changed files with 260 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
PLAN.md Normal file
View File

@@ -0,0 +1,43 @@
# 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 프로젝트의 로그인 버튼과 동일하게 동작하는지 최종 확인합니다.

31
docker-compose.yml Normal file
View File

@@ -0,0 +1,31 @@
version: '3.8'
services:
db:
image: mysql:5.7
volumes:
- db_data:/var/lib/mysql
restart: always
environment:
MYSQL_ROOT_PASSWORD: my_secret_password
MYSQL_DATABASE: wordpress
MYSQL_USER: wordpress
MYSQL_PASSWORD: password
wordpress:
depends_on:
- db
image: wordpress:latest
volumes:
- ./sso-wordpress-plugin:/var/www/html/wp-content/plugins/sso-wordpress-plugin
ports:
- "8001:80"
restart: always
environment:
WORDPRESS_DB_HOST: db:3306
WORDPRESS_DB_USER: wordpress
WORDPRESS_DB_PASSWORD: password
WORDPRESS_DB_NAME: wordpress
volumes:
db_data: {}

29
sso-wordpress-plugin/README.md Normal file
View File

@@ -0,0 +1,29 @@
# SSO 로그인 버튼 워드프레스 플러그인
## 설명
`[sso_login_button]` 숏코드를 제공하는 간단한 워드프레스 플러그인입니다. 이 숏코드는 로그인 버튼을 표시하며, 버튼을 클릭하면 설정된 SSO URL로 팝업 창을 엽니다.
이 플러그인은 프론트엔드 SSO 흐름을 워드프레스 사이트에 통합하는 방법을 보여주는 경량 데모용으로 제작되었습니다.
## 설치 방법
1. `sso-wordpress-plugin` 디렉토리를 ZIP 파일로 압축합니다.
2. 워드프레스 관리자 대시보드에서 `플러그인` > `새로 추가`로 이동합니다.
3. 페이지 상단의 `플러그인 업로드` 버튼을 클릭합니다.
4. 다운로드한 ZIP 파일을 선택하고 `지금 설치`를 클릭합니다.
5. 설치가 완료되면 `플러그인 활성화` 버튼을 클릭합니다.
## 설정 방법
1. 플러그인이 활성화되면 워드프레스 관리자 대시보드에서 `설정` > `SSO Login`으로 이동합니다.
2. 입력 필드에 SSO 제공업체의 전체 URL을 입력합니다 (예: `http://localhost:5000/`).
3. `변경 사항 저장` 버튼을 클릭합니다.
## 사용 방법
페이지나 글에 SSO 로그인 버튼을 표시하려면, 콘텐츠 편집기에 아래의 숏코드를 추가하기만 하면 됩니다:
`[sso_login_button]`
사용자가 이 버튼을 클릭하면 설정 페이지에서 구성한 URL로 팝업 창이 열립니다.

37
sso-wordpress-plugin/js/sso-login.js Normal file
View File

@@ -0,0 +1,37 @@
// This file will contain the JavaScript logic for the SSO login button.
document.addEventListener('DOMContentLoaded', () => {
const ssoLoginBtn = document.getElementById('sso-login-btn');
if (ssoLoginBtn) {
ssoLoginBtn.addEventListener('click', () => {
// ssoSettings.ssoUrl will be passed from WordPress using wp_localize_script
if (typeof ssoSettings === 'undefined' || !ssoSettings.ssoUrl) {
alert('SSO URL is not configured.');
return;
}
const ssoUrl = ssoSettings.ssoUrl;
const popupWidth = 600;
const popupHeight = 800;
const screenLeft = window.screenLeft !== undefined ? window.screenLeft : window.screenX;
const screenTop = window.screenTop !== undefined ? window.screenTop : window.screenY;
const screenWidth = window.innerWidth || document.documentElement.clientWidth || screen.width;
const screenHeight = window.innerHeight || document.documentElement.clientHeight || screen.height;
const left = ((screenWidth / 2) - (popupWidth / 2)) + screenLeft;
const top = ((screenHeight / 2) - (popupHeight / 2)) + screenTop;
const popup = window.open(
ssoUrl,
'sso-login-popup',
`width=${popupWidth},height=${popupHeight},left=${left},top=${top}`
);
if (popup) {
popup.focus();
} else {
alert('Popup blocked. Please allow popups for this site.');
}
});
}
});

120
sso-wordpress-plugin/sso-wordpress-plugin.php Normal file
View File

@@ -0,0 +1,120 @@
<?php
/**
* Plugin Name: SSO Login Button
* Description: Adds a shortcode to display an SSO login button.
* Version: 1.0.0
* Author: Gemini
* License: GPL-2.0-or-later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: sso-login-button
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
// Will add plugin code here.
/**
* Shortcode function to display the SSO login button.
*
* @return string The HTML for the login button.
*/
function sso_login_button_shortcode() {
// The button HTML. The actual script will be enqueued separately.
return '<button id="sso-login-btn">Login with SSO</button>';
}
add_shortcode( 'sso_login_button', 'sso_login_button_shortcode' );
/**
* Enqueue scripts and styles.
*/
function sso_enqueue_scripts() {
// Only enqueue the script if the shortcode is present on the page.
// Note: This is a simplified check. A more robust solution might be needed for complex cases.
global $post;
if ( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'sso_login_button' ) ) {
wp_enqueue_script(
'sso-login-script',
plugin_dir_url( __FILE__ ) . 'js/sso-login.js',
array(),
'1.0.0',
true
);
// Pass the SSO URL to the script.
// We'll make this dynamic with a settings page later.
$sso_url = get_option('sso_plugin_url', 'http://localhost:5000/');
wp_localize_script(
'sso-login-script',
'ssoSettings',
array(
'ssoUrl' => esc_url( $sso_url ),
)
);
}
}
add_action( 'wp_enqueue_scripts', 'sso_enqueue_scripts' );
/**
* Admin Menu and Settings
*/
// Add the settings page to the admin menu
function sso_plugin_add_settings_page() {
add_options_page(
'SSO Settings',
'SSO Login',
'manage_options',
'sso-plugin-settings',
'sso_plugin_render_settings_page'
);
}
add_action( 'admin_menu', 'sso_plugin_add_settings_page' );
// Render the settings page HTML
function sso_plugin_render_settings_page() {
?>
<div class="wrap">
<h1>SSO Login Settings</h1>
<form action="options.php" method="post">
<?php
settings_fields( 'sso_plugin_options' );
do_settings_sections( 'sso_plugin_settings' );
?>
<input
type="text"
name="sso_plugin_url"
value="<?php echo esc_attr( get_option( 'sso_plugin_url' ) ); ?>"
size="50"
placeholder="Enter the full SSO URL"
/>
<?php submit_button( 'Save Settings' ); ?>
</form>
</div>
<?php
}
// Register the setting
function sso_plugin_register_settings() {
register_setting(
'sso_plugin_options',
'sso_plugin_url',
[
'type' => 'string',
'sanitize_callback' => 'esc_url_raw',
'default' => '',
]
);
add_settings_section(
'sso_plugin_main_section',
'Main Settings',
null,
'sso_plugin_settings'
);
}
add_action( 'admin_init', 'sso_plugin_register_settings' );