first commit

2026-01-13 17:10:25 +09:00
commit 24f05eb279
5 changed files with 260 additions and 0 deletions
--- a/PLAN.md
+++ b/PLAN.md
@@ -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 프로젝트의 로그인 버튼과 동일하게 동작하는지 최종 확인합니다.
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -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: {}
--- a/sso-wordpress-plugin/README.md
+++ b/sso-wordpress-plugin/README.md
@@ -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로 팝업 창이 열립니다.
--- a/sso-wordpress-plugin/js/sso-login.js
+++ b/sso-wordpress-plugin/js/sso-login.js
@@ -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.');
+            }
+        });
+    }
+});
--- a/sso-wordpress-plugin/sso-wordpress-plugin.php
+++ b/sso-wordpress-plugin/sso-wordpress-plugin.php
@@ -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' );
+
+
+