🔐 管理画面概要

管理画面構成

システム構成

管理画面	用途	アクセス方法	実装技術
工場管理画面	注文処理・印刷管理	Electron App	Electron + React
Web管理画面	ブランド・顧客管理	Web Browser	Next.js + Cloudflare
🚨 セキュリティ監視画面	事故対策監視・対応	Web Browser	Next.js + D1 Dashboard
Shopify管理画面	商品・注文管理	Shopify Admin	Shopify標準

🚨 セキュリティ監視機能

リアルタイム監視ダッシュボード

interface SecurityDashboard {
  // リアルタイム指標
  liveMetrics: {
    activeOrders: number;
    photoUidEmbeddingRate: number;
    tripleCheckSuccessRate: number;
    factorySecurityAlerts: number;
  };
  
  // 事故防止状況
  accidentPrevention: {
    totalPhotosProcessed: number;
    uidMismatchesDetected: number;
    integrityFailuresDetected: number;
    quarantinedOrders: number;
    lastIncidentTime: string | null;
  };
  
  // セキュリティアラート
  activeAlerts: SecurityAlert[];
  
  // 工場状況
  factoryStatus: {
    onlineFactories: number;
    processingOrders: number;
    pendingVerifications: number;
    securityCheckStatus: 'normal' | 'warning' | 'critical';
  };
}

interface SecurityAlert {
  id: string;
  type: 'uid_mismatch' | 'hash_failure' | 'verification_failed' | 'system_anomaly';
  severity: 'low' | 'medium' | 'high' | 'critical';
  message: string;
  orderId?: string;
  userId?: string;
  timestamp: string;
  acknowledged: boolean;
  autoActions: string[];
}

管理機能メニュー

🚨 セキュリティ管理:
  - リアルタイム監視ダッシュボード
  - セキュリティインシデント履歴
  - 隔離された注文管理
  - UID検証失敗レポート
  - 工場セキュリティ状況

📊 分析・レポート:
  - 事故防止効果測定
  - セキュリティメトリクス
  - 月次セキュリティレポート
  - 改善提案レポート
  - コンプライアンス状況

認証・ログイン方式

🔑 Cloudflare Access認証

🏅 Cloudflare Access設定（確定版）

📋 Cloudflare Access設定手順（詳細版）

ステップ1: Cloudflare Dashboardにアクセス

1. Cloudflare Dashboard（https://dash.cloudflare.com）にログイン
2. ドメイン contents-print.jp を選択
3. 左サイドバーから 「Zero Trust」 をクリック
4. 「Access」 → 「Applications」 をクリック

ステップ2: 新しいアプリケーション作成

1. 「Add an application」 ボタンをクリック
2. 「Self-hosted」 を選択
3. 基本設定を入力:

   Application name: Contents Print Admin Panel
   Session Duration: 24 hours

ステップ3: ドメイン・URL設定

Application domain セクションで設定:

Subdomain: admin
Domain: contents-print.jp
Path: /*

⚠️ 結果: admin.contents-print.jp/* が保護対象になります

ステップ4: Identity Provider設定（初回のみ）

初回設定時のみ実行:

1. 「Configure」 → 「Settings」 → 「Authentication」
2. 「Add new」 → 「Google」 を選択
3. Google設定画面で:

   Name: Google Auth
   Client ID: [Google Developer Consoleから取得]
   Client Secret: [Google Developer Consoleから取得]

Google Developer Console設定

1. Google Developer Console（https://console.developers.google.com）にアクセス
2. 「認証情報」 → 「OAuth 2.0 クライアント ID」 を作成
3. 承認済みリダイレクト URI に追加:

   https://your-team-name.cloudflareaccess.com/cdn-cgi/access/callback

ステップ5: アクセスポリシー設定

1. 「Add a policy」 をクリック
2. ポリシー設定:

   Policy name: Admin Only Access
   Action: Allow

3. Include ルール追加:
   • 「Add include」 → 「Emails」 を選択
   • あなたのGoogleメールアドレスを入力（例: your-email@gmail.com）
4. Include ルール追加（地理的制限）:
   • 「Add include」 → 「Country」 を選択
   • 「Japan」 を選択

ステップ6: 詳細設定

Session設定

Session Duration: 24 hours
Idle Timeout: Disabled
Require Hard Key: Disabled

CORS設定（管理画面用）

CORS Settings:
  Allow Credentials: Yes
  Allow Origin: https://admin.contents-print.jp
  Allow Methods: GET, POST, PUT, DELETE
  Allow Headers: Content-Type, Authorization

ステップ7: 設定確認・保存

1. 「Next」 をクリックして設定確認
2. 「Add application」 で保存完了
3. Application一覧 に「Contents Print Admin Panel」が表示される

ステップ8: DNS設定確認

Cloudflare DNS設定 で確認:

Type: CNAME
Name: admin
Content: admin.contents-print.jp
Proxy status: Proxied (オレンジクラウド)

🧪 動作テスト

1. ブラウザで https://admin.contents-print.jp にアクセス
2. Cloudflare Access画面 が表示される
3. 「Continue with Google」 ボタンをクリック
4. Googleログイン 画面で認証
5. 管理画面 に自動リダイレクト（24時間有効）

⚠️ トラブルシューティング

よくあるエラーと対処法

エラー: "Access Denied"

• ✅ メールアドレスがポリシーに追加されているか確認
• ✅ 地理的制限（Country: Japan）の確認

エラー: "Application not found"

• ✅ DNS設定で admin サブドメインが正しく設定されているか
• ✅ Proxy status がオレンジクラウド（Proxied）になっているか

Google認証エラー

• ✅ Google Developer Consoleのリダイレクト URIが正しいか
• ✅ Client IDとSecretが正確に入力されているか

完成後のアクセス方法

1. ブラウザで admin.contents-print.jp にアクセス
2. Cloudflare Access画面 が表示される
3. 「Continue with Google」 をクリック
4. Googleログイン 完了で管理画面へ自動リダイレクト

Next.js実装コード

// middleware.ts - Cloudflare Access連携
import { NextRequest, NextResponse } from 'next/server';

export function middleware(request: NextRequest) {
  // Cloudflare Accessからのヘッダー取得
  const cfEmail = request.headers.get('CF-Access-Authenticated-User-Email');
  
  // 認証確認
  if (!cfEmail) {
    return NextResponse.redirect(new URL('/access-denied', request.url));
  }
  
  // 管理者メール確認（あなたのメールアドレス）
  if (cfEmail !== 'your-email@gmail.com') {
    return NextResponse.redirect(new URL('/unauthorized', request.url));
  }
  
  return NextResponse.next();
}

export const config = {
  matcher: '/admin/:path*'
};

React コンポーネント例

// components/AdminLayout.tsx
export default function AdminLayout({ children }: { children: React.ReactNode }) {
  const adminEmail = useHeaders('CF-Access-Authenticated-User-Email');
  
  return (
    <div className="admin-layout">
      <header>
        <h1>Contents Print 管理画面</h1>
        <span>ログイン中: {adminEmail}</span>
      </header>
      {children}
    </div>
  );
}

設定完了後の利点

• ✅ 0円で運用（既存Cloudflareプラン内）
• ✅ 5分でセットアップ
• ✅ 24時間ログイン持続
• ✅ Googleアカウントでワンクリック
• ✅ 自動セキュリティ保護
• ✅ 日本国内限定アクセス

🛡️ Cloudflare Access セキュリティ

セッション・セキュリティ設定

Cloudflare Access設定:
  セッション時間: 24時間
  再認証: 週1回（自動）
  デバイス登録: 有効
  不審な活動検知: 自動ブロック
  
アクセス制御:
  許可メール: 管理者メールアドレスのみ
  地理的制限: 日本国内のみ
  デバイス制限: 登録デバイスのみ（オプション）

高度なセキュリティオプション

オプション設定:
  Device Trust:
    - Certificate-based authentication
    - Device posture checks
    - Corporate device enforcement
  
  Additional Protection:
    - Browser isolation（高セキュリティ時）
    - Gateway integration（DNS filtering）
    - CASB policies（データ保護）

アクセス制御・権限管理

🎭 ユーザーロール定義

シンプル権限設計（単一作業者）

interface AdminUser {
  userId: string;
  role: "admin";  // 管理者のみ
  permissions: "all"; // 全機能アクセス
  brands: ["neko", "tokinoe", "dog"]; // 全ブランド管理
}

const adminPermissions = {
  orderManagement: true,    // 注文管理
  customerData: true,       // 顧客情報
  brandSettings: true,      // ブランド設定
  systemConfig: true,       // システム設定
  analytics: true,          // 分析・レポート
  factoryControl: true      // 工場管理
};

ネットワーク・インフラセキュリティ

🌐 アクセス制限

シンプルアクセス制御

アクセス制御:
  地理的制限:
    - 許可国: ["JP"]  # 日本国内のみ
    - 自動ブロック: 海外からの不正アクセス
  
  Cloudflare設定:
    - WAF: 有効（基本ルール）
    - DDoS Protection: 有効  
    - Rate Limiting: 100req/min per IP
    - IP制限: なし（柔軟な作業場所対応）

🔍 監査・ログ管理

アクセスログ記録

interface AccessLog {
  timestamp: string;
  userId: string;
  action: string;
  resource: string;
  ipAddress: string;
  userAgent: string;
  success: boolean;
  brandContext?: string;
}

// 監視対象イベント
const auditEvents = [
  "login_attempt",
  "login_success", 
  "login_failure",
  "permission_denied",
  "sensitive_data_access",
  "system_config_change",
  "user_role_change",
  "brand_settings_update"
];

セキュリティアラート

アラート設定:
  即座通知:
    - 複数回ログイン失敗（5回以上）
    - 異常な地域からのアクセス
    - 権限昇格の試行
    - システム設定の変更
  
  日次レポート:
    - ログイン統計
    - アクセス数推移
    - エラー発生状況
    - セキュリティイベント概要

緊急時対応・リカバリ

🚨 緊急事態プロトコル

🚨 他人分混入事故対応プロトコル（最優先）

Level 1: 緊急事故対応（即座実行）

事故検知時の即座対応:
  1. システム緊急停止:
     - 該当注文の印刷を即座停止
     - 工場への緊急通知送信
     - 関連注文の自動隔離
  
  2. 影響範囲調査:
     - 同一Firebase UIDの他の注文を確認
     - 同一バッチの他の注文を調査
     - 該当写真の配送状況を確認
  
  3. 顧客対応準備:
     - 影響を受けた顧客の特定
     - お詫び・説明文書の準備
     - 代替対応策の検討

Level 2: 事故原因調査（1時間以内）

詳細調査項目:
  1. セキュリティログ分析:
     - UID埋め込み失敗の有無
     - 三点チェックの結果確認
     - 工場セキュリティチェックの状況
  
  2. システム整合性確認:
     - D1データベースの整合性確認
     - R2写真ファイルの整合性確認
     - Shopify注文データとの照合
  
  3. 技術的根本原因分析:
     - EXIFデータの検証
     - SHA-256ハッシュの確認
     - セキュリティ署名の検証

Level 3: 再発防止策実装（24時間以内）

再発防止策:
  1. セキュリティ強化:
     - 検証アルゴリズムの見直し
     - 追加チェックポイントの設置
     - モニタリングの強化
  
  2. プロセス改善:
     - 事故検知時間の短縮
     - 自動対応の範囲拡大
     - 人的確認プロセスの追加
  
  3. システム改修:
     - 脆弱性の修正
     - セキュリティパッチの適用
     - テスト強化

アカウントロックアウト対応

1. 管理者アカウントロック: 緊急用バックアップアカウントでアクセス
2. システム全体障害: オフライン工場管理（Electron App）で継続
3. 認証システム障害: 一時的なローカル認証モード

バックアップ認証方式

• 緊急用管理者アカウント: オフライン保管の認証情報
• SMS認証バックアップ: 複数の電話番号登録
• リカバリーコード: 印刷・物理保管

🔄 定期メンテナンス

セキュリティ監査（月次）

• アクティブユーザーアカウント確認
• 権限設定の妥当性確認
• アクセスログの分析
• パスワードポリシーの遵守確認
• 多要素認証設定の確認

システム更新（四半期）

• 認証システムの脆弱性対応
• アクセス制御ルールの見直し
• インフラセキュリティ設定更新
• 緊急時対応手順の確認・テスト

---

関連ドキュメント: ブランド管理 | メール関連設定 | システム設計