WordPressでヘッダーから情報を受け取ってローカルストレージに保存し、条件に応じて表示を制御する実装を作成します。
「headerからsessionと所属コードをwpで受け取ってローカルストレイジに入れたい
値が返って来た時は所属のデータを出す(post type postのカテゴリー)
falseの時は画面出さない」

/**
 * ========================================
 * affiliation-auth.js
 * ========================================
 * テーマフォルダの js/affiliation-auth.js として保存
 * 
 * 機能:
 * - ヘッダーから認証情報を取得
 * - ローカルストレージに保存
 * - 所属カテゴリーの投稿を表示
 * - 認証失敗時は画面を非表示
 */


document.addEventListener('DOMContentLoaded', async function() {
    const contentArea = document.getElementById('affiliation-content');
    
    if (!contentArea) {
        console.log('affiliation-content 要素が見つかりません');
        return;
    }
    
    // ローカルストレージから既存のデータを確認
    const storedData = localStorage.getItem('affiliationData');
    
    if (storedData) {
        try {
            const data = JSON.parse(storedData);
            console.log('ローカルストレージからデータを読み込みました');
            displayContent(data);
            return;
        } catch (e) {
            console.error('ローカルストレージのデータが不正です:', e);
            localStorage.removeItem('affiliationData');
        }
    }
    
    // APIから認証チェック
    await checkAuthentication();
});

/**
 * 認証チェック
 */
async function checkAuthentication() {
    try {
        // セッションと所属コードを取得
        const session = getSessionToken();
        const affiliationCode = getAffiliationCode();
        
        // ヘッダーを準備
        const headers = {
            'Content-Type': 'application/json'
        };
        
        // セッションがある場合はヘッダーに追加
        if (session) {
            // Bearer Tokenかカスタムヘッダーか判定
            if (session.includes('.') && session.split('.').length === 3) {
                // JWT形式の場合はBearer Token
                headers['Authorization'] = 'Bearer ' + session;
            } else {
                // それ以外はカスタムヘッダー
                headers['X-Session'] = session;
            }
        }
        
        // 所属コードがある場合はヘッダーに追加
        if (affiliationCode) {
            headers['X-Affiliation-Code'] = affiliationCode;
        }
        
        console.log('認証チェックを実行中...');
        
        const response = await fetch('/wp-json/custom/v1/auth-check', {
            method: 'GET',
            headers: headers
        });
        
        const data = await response.json();
        
        if (data.success) {
            console.log('認証成功:', data.auth_method);
            
            // ローカルストレージに保存
            localStorage.setItem('affiliationData', JSON.stringify(data));
            localStorage.setItem('session', session);
            localStorage.setItem('affiliationCode', data.affiliation_code);
            
            // コンテンツを表示
            displayContent(data);
        } else {
            console.warn('認証失敗:', data.message);
            console.log('デバッグ情報:', data.debug);
            hideContent();
        }
    } catch (error) {
        console.error('認証エラー:', error);
        hideContent();
    }
}

/**
 * コンテンツを表示
 */
function displayContent(data) {
    const contentArea = document.getElementById('affiliation-content');
    const errorArea = document.getElementById('auth-error');
    
    if (!contentArea) return;
    
    // エラー表示を非表示
    if (errorArea) {
        errorArea.style.display = 'none';
    }
    
    // カテゴリー情報を表示
    let html = `
        <div class="affiliation-header">
            <h2>${escapeHtml(data.category.name)}</h2>
            <p>所属コード: ${escapeHtml(data.affiliation_code)}</p>
        </div>
        <div class="posts-list">
    `;
    
    // 投稿リストを表示
    if (data.posts && data.posts.length > 0) {
        data.posts.forEach(post => {
            html += `
                <article class="post-item">
                    <h3><a href="${escapeHtml(post.link)}">${escapeHtml(post.title)}</a></h3>
                    <time>${formatDate(post.date)}</time>
                    ${post.excerpt ? `<p>${escapeHtml(post.excerpt)}</p>` : ''}
                </article>
            `;
        });
    } else {
        html += '<p>投稿がありません</p>';
    }
    
    html += '</div>';
    
    contentArea.innerHTML = html;
    contentArea.style.display = 'block';
}

/**
 * コンテンツを非表示
 */
function hideContent() {
    const contentArea = document.getElementById('affiliation-content');
    const errorArea = document.getElementById('auth-error');
    
    if (contentArea) {
        contentArea.style.display = 'none';
    }
    
    if (errorArea) {
        errorArea.style.display = 'block';
    }
    
    // 既存のローカルストレージデータをクリア
    localStorage.removeItem('affiliationData');
    localStorage.removeItem('session');
    localStorage.removeItem('affiliationCode');
}

/**
 * セッショントークンを取得する関数
 * 環境に応じてカスタマイズしてください
 */
function getSessionToken() {
    // 方法1: Cookieから取得
    const sessionCookie = document.cookie.split('; ')
        .find(row => row.startsWith('session='))
        ?.split('=')[1];
    
    if (sessionCookie) {
        return sessionCookie;
    }
    
    // 方法2: URLパラメータから取得
    const urlParams = new URLSearchParams(window.location.search);
    const sessionParam = urlParams.get('session');
    
    if (sessionParam) {
        return sessionParam;
    }
    
    // 方法3: ローカルストレージから取得
    const sessionStorage = localStorage.getItem('session');
    
    if (sessionStorage) {
        return sessionStorage;
    }
    
    // 方法4: カスタム実装
    // 例: window.firebaseToken などから取得
    // return window.firebaseToken;
    
    return '';
}

/**
 * 所属コードを取得する関数
 * 環境に応じてカスタマイズしてください
 */
function getAffiliationCode() {
    // 方法1: URLパラメータから取得
    const urlParams = new URLSearchParams(window.location.search);
    const affiliationParam = urlParams.get('affiliation');
    
    if (affiliationParam) {
        return affiliationParam;
    }
    
    // 方法2: Cookieから取得
    const affiliationCookie = document.cookie.split('; ')
        .find(row => row.startsWith('affiliation='))
        ?.split('=')[1];
    
    if (affiliationCookie) {
        return affiliationCookie;
    }
    
    // 方法3: ローカルストレージから取得
    const affiliationStorage = localStorage.getItem('affiliationCode');
    
    if (affiliationStorage) {
        return affiliationStorage;
    }
    
    // 方法4: カスタム実装
    // 例: window.userAffiliation などから取得
    // return window.userAffiliation;
    
    return '';
}

/**
 * ログアウト機能（必要に応じて使用）
 */
function logout() {
    hideContent();
    // 必要に応じてサーバー側のセッションも破棄
    // fetch('/wp-json/custom/v1/logout', { method: 'POST' });
}

/**
 * HTMLエスケープ
 */
function escapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

/**
 * 日付フォーマット
 */
function formatDate(dateString) {
    const date = new Date(dateString);
    return date.toLocaleDateString('ja-JP', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    });
}

// グローバルに公開（必要に応じて）
window.affiliationAuth = {
    logout: logout,
    refresh: checkAuthentication
};

<?php
/**
 * ========================================
 * Template Name: Affiliation Content Page
 * ========================================
 * 
 * テーマフォルダに page-affiliation.php として保存
 * または page.php を置き換え
 * 
 * 所属別コンテンツを表示するテンプレート
 */

get_header(); ?>


<main id="main" class="site-main">
    <!-- エラー表示エリア -->
    <div class="auth-error" id="auth-error">
        <h3>🔒 アクセスが制限されています</h3>
        <p>認証に失敗しました。アクセス権限を確認してください。</p>
    </div>

    <!-- コンテンツ表示エリア -->
    <div id="affiliation-content">
        <div class="loading">読み込み中</div>
    </div>
</main>

<?php get_footer(); ?>

<?php
/**
 * ========================================
 * functions.php に追加するコード
 * ========================================
 * 
 * すべてのヘッダー形式に対応した認証システム
 * - Firebase Bearer Token
 * - カスタムヘッダー (X-Session, X-Affiliation-Code)
 * - Basic認証
 * - Cookie
 */

// ========================================
// 1. JavaScriptファイルをエンキュー
// ========================================
function enqueue_affiliation_scripts() {
    wp_enqueue_script(
        'affiliation-auth',
        get_template_directory_uri() . '/js/affiliation-auth.js',
        array(),
        '1.0.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'enqueue_affiliation_scripts');

// ========================================
// 2. ヘッダー情報を柔軟に取得する関数
// ========================================
function get_auth_info_from_request($request) {
    $auth_info = [
        'method' => 'unknown',
        'session' => null,
        'affiliation_code' => null,
        'user_id' => null,
        'raw_data' => []
    ];
    
    // パターン1: Firebase Authentication Bearer Token
    $auth_header = $request->get_header('authorization');
    if ($auth_header && strpos($auth_header, 'Bearer ') === 0) {
        $token = str_replace('Bearer ', '', $auth_header);
        $auth_info['method'] = 'firebase_bearer';
        $auth_info['session'] = $token;
        
        // Firebase ID Tokenを検証・デコード
        $decoded = decode_firebase_token($token);
        if ($decoded) {
            $auth_info['user_id'] = $decoded['user_id'] ?? null;
            $auth_info['affiliation_code'] = $decoded['affiliation'] ?? null;
            $auth_info['raw_data'] = $decoded;
        }
    }
    
    // パターン2: カスタムヘッダー（X-Session, X-Affiliation-Code）
    $session = $request->get_header('X-Session') ?: $request->get_header('x-session');
    $affiliation = $request->get_header('X-Affiliation-Code') ?: $request->get_header('x-affiliation-code');
    
    if ($session || $affiliation) {
        $auth_info['method'] = 'custom_headers';
        $auth_info['session'] = $session;
        $auth_info['affiliation_code'] = $affiliation;
        
        // 追加のカスタムヘッダーもチェック
        $user_id = $request->get_header('X-User-Id') ?: $request->get_header('x-user-id');
        if ($user_id) {
            $auth_info['user_id'] = $user_id;
        }
    }
    
    // パターン3: Cookie
    if (empty($auth_info['session'])) {
        $cookies = $request->get_header('cookie');
        if ($cookies) {
            parse_str(str_replace('; ', '&', $cookies), $cookie_array);
            if (!empty($cookie_array['session'])) {
                $auth_info['method'] = 'cookie';
                $auth_info['session'] = $cookie_array['session'];
                $auth_info['affiliation_code'] = $cookie_array['affiliation'] ?? null;
            }
        }
    }
    
    // すべてのヘッダーをデバッグ用に保存
    $auth_info['all_headers'] = $request->get_headers();
    
    return $auth_info;
}

// ========================================
// 3. Firebase ID Tokenをデコードする関数
// ========================================
function decode_firebase_token($token) {
    // JWT形式かチェック
    $parts = explode('.', $token);
    if (count($parts) !== 3) {
        return null;
    }
    
    try {
        // ペイロード部分をデコード
        $payload = json_decode(base64_decode(str_replace(['-', '_'], ['+', '/'], $parts[1])), true);
        
        // 有効期限チェック
        if (isset($payload['exp']) && $payload['exp'] < time()) {
            return null; // 期限切れ
        }
        
        return $payload;
    } catch (Exception $e) {
        return null;
    }
}

// ========================================
// 4. デバッグ用エンドポイント
// ========================================
add_action('rest_api_init', function () {
    register_rest_route('custom/v1', '/debug-headers', array(
        'methods' => 'GET',
        'callback' => 'debug_all_headers',
        'permission_callback' => '__return_true'
    ));
});

function debug_all_headers($request) {
    $auth_info = get_auth_info_from_request($request);
    
    return new WP_REST_Response([
        'detected_method' => $auth_info['method'],
        'extracted_info' => [
            'session' => $auth_info['session'] ? 'present (hidden for security)' : 'missing',
            'affiliation_code' => $auth_info['affiliation_code'] ?: 'missing',
            'user_id' => $auth_info['user_id'] ?: 'missing'
        ],
        'all_headers' => $auth_info['all_headers'],
        'raw_token_data' => $auth_info['raw_data'],
        'tips' => [
            'detected' => $auth_info['method'],
            'message' => get_method_message($auth_info['method'])
        ]
    ], 200);
}

function get_method_message($method) {
    $messages = [
        'firebase_bearer' => '✅ Firebase Bearer Tokenを検出しました',
        'custom_headers' => '✅ カスタムヘッダー (X-Session, X-Affiliation-Code) を検出しました',
        'cookie' => '✅ Cookie認証を検出しました',
        'unknown' => '❌ 認証情報が見つかりません。all_headersを確認してください'
    ];
    
    return $messages[$method] ?? $messages['unknown'];
}

// ========================================
// 5. 実際の認証エンドポイント
// ========================================
add_action('rest_api_init', function () {
    register_rest_route('custom/v1', '/auth-check', array(
        'methods' => 'GET',
        'callback' => 'handle_flexible_auth_check',
        'permission_callback' => '__return_true'
    ));
});

function handle_flexible_auth_check($request) {
    // 柔軟に認証情報を取得
    $auth_info = get_auth_info_from_request($request);
    
    // ログに記録
    error_log('Auth Check - Method: ' . $auth_info['method']);
    error_log('Auth Check - Session: ' . ($auth_info['session'] ? 'present' : 'missing'));
    error_log('Auth Check - Affiliation: ' . ($auth_info['affiliation_code'] ?? 'missing'));
    
    // 認証情報がない場合
    if (empty($auth_info['session'])) {
        return new WP_REST_Response([
            'success' => false,
            'message' => '認証情報が見つかりません',
            'debug' => [
                'detected_method' => $auth_info['method'],
                'help' => '/wp-json/custom/v1/debug-headers にアクセスして詳細を確認してください'
            ]
        ], 401);
    }
    
    // 所属コードがない場合の処理
    if (empty($auth_info['affiliation_code'])) {
        // オプション1: デフォルト所属を設定（必要に応じてコメント解除）
        // $auth_info['affiliation_code'] = 'default';
        
        // オプション2: エラーを返す（現在の実装）
        return new WP_REST_Response([
            'success' => false,
            'message' => '所属コードが見つかりません',
            'debug' => [
                'detected_method' => $auth_info['method'],
                'session' => 'present',
                'affiliation_code' => 'missing',
                'user_id' => $auth_info['user_id'] ?? 'none',
                'raw_token_data' => $auth_info['raw_data'],
                'help' => [
                    'Firebase Custom Claimsに affiliation フィールドを追加してください',
                    'または X-Affiliation-Code ヘッダーを追加で送信してください',
                    'トークンのデコード結果は raw_token_data を確認してください'
                ]
            ]
        ], 400);
    }
    
    // カテゴリーを取得
    $category = get_category_by_slug($auth_info['affiliation_code']);
    
    if (!$category) {
        return new WP_REST_Response([
            'success' => false,
            'message' => '該当する所属カテゴリーが見つかりません',
            'debug' => [
                'affiliation_code' => $auth_info['affiliation_code'],
                'available_categories' => array_map(function($cat) {
                    return ['slug' => $cat->slug, 'name' => $cat->name];
                }, get_categories(['hide_empty' => false]))
            ]
        ], 404);
    }
    
    // 投稿を取得
    $posts = get_posts(array(
        'category' => $category->term_id,
        'post_type' => 'post',
        'posts_per_page' => 10,
        'orderby' => 'date',
        'order' => 'DESC'
    ));
    
    $posts_data = array_map(function($post) {
        return [
            'id' => $post->ID,
            'title' => $post->post_title,
            'excerpt' => $post->post_excerpt,
            'date' => $post->post_date,
            'link' => get_permalink($post->ID)
        ];
    }, $posts);
    
    return new WP_REST_Response([
        'success' => true,
        'auth_method' => $auth_info['method'],
        'session' => substr($auth_info['session'], 0, 20) . '...', // セキュリティのため一部のみ
        'affiliation_code' => $auth_info['affiliation_code'],
        'user_id' => $auth_info['user_id'],
        'category' => [
            'id' => $category->term_id,
            'name' => $category->name,
            'slug' => $category->slug
        ],
        'posts' => $posts_data
    ], 200);
}

// ========================================
// 6. CORS設定（必要な場合）
// ========================================
add_action('rest_api_init', function() {
    remove_filter('rest_pre_serve_request', 'rest_send_cors_headers');
    add_filter('rest_pre_serve_request', function($value) {
        header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
        header('Access-Control-Allow-Headers: Authorization, X-Session, X-Affiliation-Code, X-User-Id, Content-Type');
        header('Access-Control-Allow-Credentials: true');
        return $value;
    });
}, 15);

📦 4つのファイルで完結

1️⃣ functions.php に追加

「WordPress完全実装ガイド」をコピー＆ペースト

2️⃣ js/affiliation-auth.js を作成

「affiliation-auth.js（完全版）」の内容で新規ファイル作成

3️⃣ page-affiliation.php を作成

「page-affiliation.php（完全版テンプレート）」の内容で新規ファイル作成

4️⃣ セットアップガイドを参照

「WordPress実装ガイド（完全版）」を見ながら設定

✨ 実装済みの機能

✅ Firebase Bearer Token 対応
✅ カスタムヘッダー (X-Session, X-Affiliation-Code) 対応
✅ 自動判別機能
✅ ローカルストレージ保存
✅ デバッグエンドポイント
✅ エラーハンドリング
✅ CORS対応
✅ セキュリティ対策
✅ レスポンシブデザイン

WordPress実装ガイド（完全版）

📦 ファイル構成

your-theme/
├── functions.php              ← アーティファクト1のコードを追加
├── js/
│   └── affiliation-auth.js   ← アーティファクト2のコードを保存
└── page-affiliation.php       ← アーティファクト3のコードを保存
    (または page.php)

🚀 セットアップ手順

ステップ1: functions.php に追加

WordPress管理画面 > 外観 > テーマエディター
functions.php を開く
**アーティファクト1「WordPress完全実装ガイド」**の全コードをコピー
functions.php の最後に貼り付け
「ファイルを更新」をクリック

ステップ2: JavaScriptファイルを作成

FTPまたはファイルマネージャーでテーマフォルダにアクセス
js フォルダを作成（存在しない場合）
js/affiliation-auth.js ファイルを作成
**アーティファクト2「affiliation-auth.js」**の全コードをコピー
ファイルに貼り付けて保存

または、管理画面から:

プラグイン「Simple Custom CSS and JS」をインストール
カスタムJSとして追加

ステップ3: テンプレートファイルを作成

FTPまたはファイルマネージャーでテーマフォルダにアクセス
page-affiliation.php ファイルを作成
**アーティファクト3「page-affiliation.php」**の全コードをコピー
ファイルに貼り付けて保存

既存のpage.phpを使う場合:

page.php を開いて内容を置き換える

ステップ4: 固定ページを作成

WordPress管理画面 > 固定ページ > 新規追加
タイトル: 「所属コンテンツ」など任意
右サイドバー「ページ属性」>「テンプレート」から「Affiliation Content Page」を選択
公開

ステップ5: カテゴリーを作成

WordPress管理画面 > 投稿 > カテゴリー
テスト用カテゴリーを作成
- 名前: 「営業部」
- スラッグ: sales ← これが重要！
他にも必要な所属カテゴリーを作成
- 例: 「開発部」 (slug: development)
- 例: 「総務部」 (slug: general-affairs)

ステップ6: テスト投稿を作成

WordPress管理画面 > 投稿 > 新規追加
タイトルと本文を入力
カテゴリーから「営業部」を選択
公開

✅ 動作確認

1. デバッグエンドポイントで確認

ブラウザで以下のURLにアクセス:

https://your-site.com/wp-json/custom/v1/debug-headers

期待される結果:

{
  "detected_method": "unknown",
  "extracted_info": {
    "session": "missing",
    "affiliation_code": "missing",
    "user_id": "missing"
  },
  "all_headers": {...},
  "tips": {
    "detected": "unknown",
    "message": "❌ 認証情報が見つかりません"
  }
}

2. ヘッダー付きでテスト

方法A: ブラウザの開発者ツール (F12)

// Consoleタブで実行
fetch('/wp-json/custom/v1/auth-check', {
    headers: {
        'X-Session': 'test-session-123',
        'X-Affiliation-Code': 'sales'
    }
})
.then(r => r.json())
.then(console.log);

方法B: cURLコマンド

curl -H "X-Session: test-123" \
     -H "X-Affiliation-Code: sales" \
     https://your-site.com/wp-json/custom/v1/auth-check

3. テストページで確認

前回作成した「テスト用HTMLページ」を使用:

ブラウザで開く
セッションと所属コードを入力
テスト実行

🔧 カスタマイズ

セッションの取得方法を変更

js/affiliation-auth.js の getSessionToken() 関数を編集:

function getSessionToken() {
    // あなたのシステムに合わせて変更
    return window.yourSessionVariable; // 例
}

所属コードの取得方法を変更

js/affiliation-auth.js の getAffiliationCode() 関数を編集:

function getAffiliationCode() {
    // あなたのシステムに合わせて変更
    return window.userDepartment; // 例
}

デフォルト所属を設定

認証情報が無い場合にデフォルトの所属を表示したい場合、
functions.php の以下の部分をコメント解除:

// 所属コードがない場合の処理（73行目あたり）
if (empty($auth_info['affiliation_code'])) {
    // この行のコメントを外す
    $auth_info['affiliation_code'] = 'default';  // ← ここ
    
    // エラーを返す行をコメントアウト
    // return new WP_REST_Response([...
}

🧪 Flutter/Firebaseとの連携テスト

Flutter側でテストリクエストを送る

import 'package:http/http.dart' as http;

// テスト1: カスタムヘッダー
final response1 = await http.get(
  Uri.parse('https://your-wp-site.com/wp-json/custom/v1/debug-headers'),
  headers: {
    'X-Session': 'test-session-123',
    'X-Affiliation-Code': 'sales',
  },
);
print('Response: ${response1.body}');

// テスト2: Bearer Token
final token = await FirebaseAuth.instance.currentUser?.getIdToken();
final response2 = await http.get(
  Uri.parse('https://your-wp-site.com/wp-json/custom/v1/debug-headers'),
  headers: {
    'Authorization': 'Bearer $token',
  },
);
print('Response: ${response2.body}');

期待される結果

{
  "detected_method": "custom_headers",  // または "firebase_bearer"
  "extracted_info": {
    "session": "present (hidden for security)",
    "affiliation_code": "sales",
    "user_id": "missing"
  },
  "tips": {
    "message": "✅ カスタムヘッダーを検出しました"
  }
}

🐛 トラブルシューティング

エラー: 404 Not Found (REST APIが見つからない)

原因: パーマリンク設定の問題

解決方法:

WordPress管理画面 > 設定 > パーマリンク
「変更を保存」をクリック（設定を変更しなくてもOK）
これでREST APIが認識されます

エラー: affiliation-auth.js が読み込まれない

確認項目:

ファイルパスが正しいか確認

https://your-site.com/wp-content/themes/your-theme/js/affiliation-auth.js

functions.php の enqueue が正しいか確認
ブラウザの開発者ツール（F12）> Networkタブで確認

解決方法:

// functions.php で直接パスを指定
function enqueue_affiliation_scripts() {
    wp_enqueue_script(
        'affiliation-auth',
        get_stylesheet_directory_uri() . '/js/affiliation-auth.js', // ← 変更
        array(),
        '1.0.1', // バージョンを変更してキャッシュクリア
        true
    );
}

エラー: CORS エラー

症状: ブラウザのコンソールに「CORS policy」エラー

解決方法: 既に functions.php にCORS設定が含まれています。
それでもエラーが出る場合:

// functions.php に追加
add_action('init', function() {
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
    header('Access-Control-Allow-Headers: Authorization, X-Session, X-Affiliation-Code');
});

問題: ヘッダーが受信されない

確認方法:

/wp-json/custom/v1/debug-headers

で all_headers を確認

Apache の場合:
.htaccess に追加:

<IfModule mod_headers.c>
    SetEnvIf X-Session "(.+)" HTTP_X_SESSION=$1
    SetEnvIf X-Affiliation-Code "(.+)" HTTP_X_AFFILIATION_CODE=$1
</IfModule>

Nginx の場合:
nginx.conf に追加:

location ~ ^/wp-json/ {
    fastcgi_param HTTP_X_SESSION $http_x_session;
    fastcgi_param HTTP_X_AFFILIATION_CODE $http_x_affiliation_code;
}

問題: ローカルストレージに保存されない

確認方法:

ブラウザの開発者ツール（F12）
Application（またはStorage）タブ
Local Storage を確認

解決方法:

プライベートブラウジングを使用していないか確認
サイトのCookieがブロックされていないか確認

📊 動作フロー

1. ユーザーがページにアクセス
   ↓
2. affiliation-auth.js が実行
   ↓
3. ローカルストレージをチェック
   ├─ データがある → 表示
   └─ データがない → APIリクエスト
       ↓
4. /wp-json/custom/v1/auth-check にリクエスト
   ├─ ヘッダーに認証情報を含める
   └─ WordPress側で認証情報を取得
       ↓
5. 認証情報を確認
   ├─ OK → カテゴリーの投稿を取得
   │        ↓
   │    レスポンスを返す
   │        ↓
   │    ローカルストレージに保存
   │        ↓
   │    画面に表示
   │
   └─ NG → エラーレスポンス
            ↓
        エラー画面を表示

🎯 チェックリスト

実装が完了したら以下を確認:

functions.php にコードを追加した
js/affiliation-auth.js を作成した
page-affiliation.php を作成した
カテゴリーを作成した（slugを確認）
テスト投稿を作成した
固定ページを作成した
/wp-json/custom/v1/debug-headers にアクセスできる
ブラウザの開発者ツールでエラーがない
Flutter/Firebase側からテストリクエストを送信
正しいレスポンスが返ってくる
ローカルストレージに保存される
画面にコンテンツが表示される

サポート

問題が解決しない場合:

ブラウザの開発者ツール（F12）のConsoleタブを確認
/wp-json/custom/v1/debug-headers のレスポンスを確認
WordPress の wp-content/debug.log を確認

必要な情報:

エラーメッセージ
デバッグエンドポイントのレスポンス
ブラウザのコンソールログ

WordPress実装ガイド（完全版）

📦 ファイル構成

your-theme/
├── functions.php              ← アーティファクト1のコードを追加
├── js/
│   └── affiliation-auth.js   ← アーティファクト2のコードを保存
└── page-affiliation.php       ← アーティファクト3のコードを保存
    (または page.php)

🚀 セットアップ手順

ステップ1: functions.php に追加

WordPress管理画面 > 外観 > テーマエディター
functions.php を開く
**アーティファクト1「WordPress完全実装ガイド」**の全コードをコピー
functions.php の最後に貼り付け
「ファイルを更新」をクリック

ステップ2: JavaScriptファイルを作成

FTPまたはファイルマネージャーでテーマフォルダにアクセス
js フォルダを作成（存在しない場合）
js/affiliation-auth.js ファイルを作成
**アーティファクト2「affiliation-auth.js」**の全コードをコピー
ファイルに貼り付けて保存

または、管理画面から:

プラグイン「Simple Custom CSS and JS」をインストール
カスタムJSとして追加

ステップ3: テンプレートファイルを作成

FTPまたはファイルマネージャーでテーマフォルダにアクセス
page-affiliation.php ファイルを作成
**アーティファクト3「page-affiliation.php」**の全コードをコピー
ファイルに貼り付けて保存

既存のpage.phpを使う場合:

page.php を開いて内容を置き換える

ステップ4: 固定ページを作成

WordPress管理画面 > 固定ページ > 新規追加
タイトル: 「所属コンテンツ」など任意
右サイドバー「ページ属性」>「テンプレート」から「Affiliation Content Page」を選択
公開

ステップ5: カテゴリーを作成

WordPress管理画面 > 投稿 > カテゴリー
テスト用カテゴリーを作成
- 名前: 「営業部」
- スラッグ: sales ← これが重要！
他にも必要な所属カテゴリーを作成
- 例: 「開発部」 (slug: development)
- 例: 「総務部」 (slug: general-affairs)

ステップ6: テスト投稿を作成

WordPress管理画面 > 投稿 > 新規追加
タイトルと本文を入力
カテゴリーから「営業部」を選択
公開

✅ 動作確認

1. デバッグエンドポイントで確認

ブラウザで以下のURLにアクセス:

https://your-site.com/wp-json/custom/v1/debug-headers

期待される結果:

{
  "detected_method": "unknown",
  "extracted_info": {
    "session": "missing",
    "affiliation_code": "missing",
    "user_id": "missing"
  },
  "all_headers": {...},
  "tips": {
    "detected": "unknown",
    "message": "❌ 認証情報が見つかりません"
  }
}

2. ヘッダー付きでテスト

方法A: ブラウザの開発者ツール (F12)

// Consoleタブで実行
fetch('/wp-json/custom/v1/auth-check', {
    headers: {
        'X-Session': 'test-session-123',
        'X-Affiliation-Code': 'sales'
    }
})
.then(r => r.json())
.then(console.log);

方法B: cURLコマンド

curl -H "X-Session: test-123" \
     -H "X-Affiliation-Code: sales" \
     https://your-site.com/wp-json/custom/v1/auth-check

3. テストページで確認

前回作成した「テスト用HTMLページ」を使用:

ブラウザで開く
セッションと所属コードを入力
テスト実行

🔧 カスタマイズ

セッションの取得方法を変更

js/affiliation-auth.js の getSessionToken() 関数を編集:

function getSessionToken() {
    // あなたのシステムに合わせて変更
    return window.yourSessionVariable; // 例
}

所属コードの取得方法を変更

js/affiliation-auth.js の getAffiliationCode() 関数を編集:

function getAffiliationCode() {
    // あなたのシステムに合わせて変更
    return window.userDepartment; // 例
}

デフォルト所属を設定

認証情報が無い場合にデフォルトの所属を表示したい場合、
functions.php の以下の部分をコメント解除:

// 所属コードがない場合の処理（73行目あたり）
if (empty($auth_info['affiliation_code'])) {
    // この行のコメントを外す
    $auth_info['affiliation_code'] = 'default';  // ← ここ
    
    // エラーを返す行をコメントアウト
    // return new WP_REST_Response([...
}

🧪 Flutter/Firebaseとの連携テスト

Flutter側でテストリクエストを送る

import 'package:http/http.dart' as http;

// テスト1: カスタムヘッダー
final response1 = await http.get(
  Uri.parse('https://your-wp-site.com/wp-json/custom/v1/debug-headers'),
  headers: {
    'X-Session': 'test-session-123',
    'X-Affiliation-Code': 'sales',
  },
);
print('Response: ${response1.body}');

// テスト2: Bearer Token
final token = await FirebaseAuth.instance.currentUser?.getIdToken();
final response2 = await http.get(
  Uri.parse('https://your-wp-site.com/wp-json/custom/v1/debug-headers'),
  headers: {
    'Authorization': 'Bearer $token',
  },
);
print('Response: ${response2.body}');

期待される結果

{
  "detected_method": "custom_headers",  // または "firebase_bearer"
  "extracted_info": {
    "session": "present (hidden for security)",
    "affiliation_code": "sales",
    "user_id": "missing"
  },
  "tips": {
    "message": "✅ カスタムヘッダーを検出しました"
  }
}

🐛 トラブルシューティング

エラー: 404 Not Found (REST APIが見つからない)

原因: パーマリンク設定の問題

解決方法:

WordPress管理画面 > 設定 > パーマリンク
「変更を保存」をクリック（設定を変更しなくてもOK）
これでREST APIが認識されます

エラー: affiliation-auth.js が読み込まれない

確認項目:

ファイルパスが正しいか確認

https://your-site.com/wp-content/themes/your-theme/js/affiliation-auth.js

functions.php の enqueue が正しいか確認
ブラウザの開発者ツール（F12）> Networkタブで確認

解決方法:

// functions.php で直接パスを指定
function enqueue_affiliation_scripts() {
    wp_enqueue_script(
        'affiliation-auth',
        get_stylesheet_directory_uri() . '/js/affiliation-auth.js', // ← 変更
        array(),
        '1.0.1', // バージョンを変更してキャッシュクリア
        true
    );
}

エラー: CORS エラー

症状: ブラウザのコンソールに「CORS policy」エラー

解決方法: 既に functions.php にCORS設定が含まれています。
それでもエラーが出る場合:

// functions.php に追加
add_action('init', function() {
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
    header('Access-Control-Allow-Headers: Authorization, X-Session, X-Affiliation-Code');
});

問題: ヘッダーが受信されない

確認方法:

/wp-json/custom/v1/debug-headers

で all_headers を確認

Apache の場合:
.htaccess に追加:

<IfModule mod_headers.c>
    SetEnvIf X-Session "(.+)" HTTP_X_SESSION=$1
    SetEnvIf X-Affiliation-Code "(.+)" HTTP_X_AFFILIATION_CODE=$1
</IfModule>

Nginx の場合:
nginx.conf に追加:

location ~ ^/wp-json/ {
    fastcgi_param HTTP_X_SESSION $http_x_session;
    fastcgi_param HTTP_X_AFFILIATION_CODE $http_x_affiliation_code;
}

問題: ローカルストレージに保存されない

確認方法:

ブラウザの開発者ツール（F12）
Application（またはStorage）タブ
Local Storage を確認

解決方法:

プライベートブラウジングを使用していないか確認
サイトのCookieがブロックされていないか確認

📊 動作フロー

1. ユーザーがページにアクセス
   ↓
2. affiliation-auth.js が実行
   ↓
3. ローカルストレージをチェック
   ├─ データがある → 表示
   └─ データがない → APIリクエスト
       ↓
4. /wp-json/custom/v1/auth-check にリクエスト
   ├─ ヘッダーに認証情報を含める
   └─ WordPress側で認証情報を取得
       ↓
5. 認証情報を確認
   ├─ OK → カテゴリーの投稿を取得
   │        ↓
   │    レスポンスを返す
   │        ↓
   │    ローカルストレージに保存
   │        ↓
   │    画面に表示
   │
   └─ NG → エラーレスポンス
            ↓
        エラー画面を表示

🎯 チェックリスト

実装が完了したら以下を確認:

functions.php にコードを追加した
js/affiliation-auth.js を作成した
page-affiliation.php を作成した
カテゴリーを作成した（slugを確認）
テスト投稿を作成した
固定ページを作成した
/wp-json/custom/v1/debug-headers にアクセスできる
ブラウザの開発者ツールでエラーがない
Flutter/Firebase側からテストリクエストを送信
正しいレスポンスが返ってくる
ローカルストレージに保存される
画面にコンテンツが表示される

📞 サポート

問題が解決しない場合:

ブラウザの開発者ツール（F12）のConsoleタブを確認
/wp-json/custom/v1/debug-headers のレスポンスを確認
WordPress の wp-content/debug.log を確認

必要な情報:

エラーメッセージ
デバッグエンドポイントのレスポンス
ブラウザのコンソールログ