feat: 新增原型站轻量登录网关，保护所有静态文件访问

- 新增自定义登录页 login.html - 新增 Node 登录网关 server.js（写死密码 + 签名 Cookie + 统一鉴权） - 未登录访问任意页面自动跳转登录页，登录后回跳原地址 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-27 11:19:42 +08:00
parent fee376db3e
commit b43ad74843
2 changed files with 394 additions and 0 deletions
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>原型访问登录 - 健康长庆升级</title>
+<style>
+:root {
+  --primary: #1677FF;
+  --primary-dark: #0958D9;
+  --text-primary: #1a1a2e;
+  --text-secondary: #5a607f;
+  --border: #e8ecf1;
+  --background: #f0f2f8;
+  --card-bg: #ffffff;
+  --danger: #FF4D4F;
+  --radius-md: 10px;
+  --radius-lg: 16px;
+  --shadow-lg: 0 10px 30px rgba(22,119,255,0.15), 0 4px 10px rgba(0,0,0,0.06);
+}
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body {
+  background: var(--background);
+  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', 'Segoe UI', sans-serif;
+  color: var(--text-primary);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 顶部装饰条 */
+.top-bar {
+  position: fixed; top: 0; left: 0; right: 0; height: 4px;
+  background: linear-gradient(90deg, #0b3d91, var(--primary), #4facfe);
+}
+
+/* 登录卡片 */
+.login-card {
+  width: 400px; max-width: calc(100vw - 32px);
+  padding: 40px 36px;
+  background: var(--card-bg);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+}
+
+/* Logo 区域 */
+.login-header { text-align: center; margin-bottom: 32px; }
+.login-header__icon {
+  width: 56px; height: 56px; margin: 0 auto 16px;
+  background: linear-gradient(135deg, #0b3d91 0%, var(--primary) 40%, #4facfe 100%);
+  border-radius: 14px;
+  display: flex; align-items: center; justify-content: center;
+}
+.login-header__icon svg { width: 28px; height: 28px; }
+.login-header__title { font-size: 20px; font-weight: 700; }
+.login-header__sub { font-size: 13px; color: var(--text-secondary); margin-top: 6px; }
+
+/* 表单 */
+.form-group { margin-bottom: 20px; }
+.form-group label {
+  display: block; font-size: 13px; font-weight: 600;
+  color: var(--text-secondary); margin-bottom: 8px;
+}
+.form-input {
+  width: 100%; height: 46px; padding: 0 14px;
+  border: 1.5px solid var(--border); border-radius: var(--radius-md);
+  font-size: 14px; color: var(--text-primary);
+  background: var(--card-bg);
+  transition: border-color .2s, box-shadow .2s;
+  outline: none;
+}
+.form-input:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(22,119,255,0.1);
+}
+.form-input::placeholder { color: #bbb; }
+
+/* 错误提示 */
+.error-msg {
+  min-height: 22px; margin-bottom: 8px;
+  font-size: 13px; color: var(--danger);
+  display: flex; align-items: center; gap: 4px;
+}
+
+/* 提交按钮 */
+.submit-btn {
+  width: 100%; height: 46px; border: none;
+  border-radius: var(--radius-md);
+  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
+  color: #fff; font-size: 15px; font-weight: 600;
+  cursor: pointer; transition: opacity .2s, transform .1s;
+}
+.submit-btn:hover { opacity: 0.9; }
+.submit-btn:active { transform: scale(0.98); }
+
+/* 底部说明 */
+.footer-text {
+  text-align: center; margin-top: 24px;
+  font-size: 12px; color: #bbb;
+}
+</style>
+</head>
+<body>
+
+<div class="top-bar"></div>
+
+<div class="login-card">
+  <div class="login-header">
+    <div class="login-header__icon">
+      <!-- 锁图标 -->
+      <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
+        <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+      </svg>
+    </div>
+    <div class="login-header__title">原型访问登录</div>
+    <div class="login-header__sub">请输入访问密码以浏览原型页面</div>
+  </div>
+
+  <form id="loginForm" method="post" action="/simple-login">
+    <input type="hidden" id="redirectInput" name="redirect" value="/" />
+
+    <div class="form-group">
+      <label for="passwordInput">访问密码</label>
+      <input
+        class="form-input"
+        id="passwordInput"
+        type="password"
+        name="password"
+        placeholder="请输入访问密码"
+        autocomplete="current-password"
+        required
+        autofocus
+      />
+    </div>
+
+    <div class="error-msg" id="errorMsg"></div>
+
+    <button class="submit-btn" type="submit">登录访问</button>
+  </form>
+
+  <div class="footer-text">健康长庆升级 · 高保真交互原型</div>
+</div>
+
+<script>
+(function() {
+  var params = new URLSearchParams(window.location.search);
+  var redirect = params.get('redirect');
+  var error = params.get('error');
+
+  /* 回跳地址：只允许站内相对路径 */
+  if (redirect && redirect.charAt(0) === '/') {
+    document.getElementById('redirectInput').value = redirect;
+  }
+
+  /* 密码错误提示 */
+  if (error === '1') {
+    document.getElementById('errorMsg').textContent = '密码错误，请重试';
+    document.getElementById('passwordInput').select();
+  }
+})();
+</script>
+</body>
+</html>
@@ -0,0 +1,228 @@
+/**
+ * 原型站轻量登录网关
+ *
+ * 功能：
+ *   - 所有静态文件访问前必须通过 Cookie 认证
+ *   - 未登录自动跳转到自定义登录页
+ *   - 密码写死在本文件中，按需修改
+ *
+ * 启动：node server.js
+ * 默认端口：3000（可通过环境变量 PORT 修改）
+ */
+
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+const url = require('url');
+const crypto = require('crypto');
+const querystring = require('querystring');
+
+/* ========== 配置区 ========== */
+
+/** 访问密码（按需修改） */
+const PASSWORD = 'JKCQ_2026!';
+
+/** Cookie 签名密钥（部署时建议替换为随机字符串） */
+const SECRET = 'hc-prototype-secret-key-2026';
+
+/** Cookie 名称 */
+const COOKIE_NAME = 'prototype_auth';
+
+/** Cookie 有效期（秒），默认 7 天 */
+const COOKIE_MAX_AGE = 7 * 24 * 60 * 60;
+
+/** 服务端口 */
+const PORT = process.env.PORT || 3010;
+
+/** 静态文件根目录（当前目录） */
+const STATIC_ROOT = __dirname;
+
+/** 不需要登录即可访问的路径 */
+const PUBLIC_PATHS = ['/login', '/login.html', '/favicon.ico'];
+
+/* ========== MIME 类型映射 ========== */
+
+const MIME_TYPES = {
+  '.html': 'text/html; charset=utf-8',
+  '.css': 'text/css; charset=utf-8',
+  '.js': 'application/javascript; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml',
+  '.ico': 'image/x-icon',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+  '.ttf': 'font/ttf',
+  '.md': 'text/plain; charset=utf-8',
+};
+
+/* ========== 工具函数 ========== */
+
+/** 生成签名 Cookie 值 */
+function signToken() {
+  var expires = Date.now() + COOKIE_MAX_AGE * 1000;
+  var payload = 'ok|' + expires;
+  var sig = crypto.createHmac('sha256', SECRET).update(payload).digest('hex').slice(0, 16);
+  return payload + '|' + sig;
+}
+
+/** 校验签名 Cookie 值 */
+function verifyToken(token) {
+  if (!token) return false;
+  var parts = token.split('|');
+  if (parts.length !== 3) return false;
+  var status = parts[0];
+  var expires = parseInt(parts[1], 10);
+  var sig = parts[2];
+  if (status !== 'ok' || isNaN(expires)) return false;
+  if (Date.now() > expires) return false;
+  var expected = crypto.createHmac('sha256', SECRET).update(status + '|' + expires).digest('hex').slice(0, 16);
+  return sig === expected;
+}
+
+/** 从请求头解析指定 Cookie */
+function getCookie(req, name) {
+  var header = req.headers.cookie || '';
+  var cookies = header.split(';');
+  for (var i = 0; i < cookies.length; i++) {
+    var pair = cookies[i].trim().split('=');
+    if (pair[0] === name) return decodeURIComponent(pair.slice(1).join('='));
+  }
+  return null;
+}
+
+/** 读取 POST 请求体 */
+function readBody(req, callback) {
+  var chunks = [];
+  req.on('data', function(chunk) { chunks.push(chunk); });
+  req.on('end', function() { callback(Buffer.concat(chunks).toString()); });
+}
+
+/** 安全校验回跳地址：只允许站内相对路径 */
+function safeRedirect(target) {
+  if (!target || typeof target !== 'string') return '/';
+  if (target.charAt(0) !== '/') return '/';
+  if (target.indexOf('//') === 0) return '/';
+  return target;
+}
+
+/** 发送静态文件 */
+function serveFile(res, filePath) {
+  /* 防止路径穿越攻击 */
+  var resolved = path.resolve(filePath);
+  if (resolved.indexOf(path.resolve(STATIC_ROOT)) !== 0) {
+    res.writeHead(403);
+    res.end('Forbidden');
+    return;
+  }
+
+  /* 禁止访问敏感文件 */
+  var basename = path.basename(resolved);
+  if (basename === 'server.js' || basename === '.env' || basename === '.gitignore') {
+    res.writeHead(403);
+    res.end('Forbidden');
+    return;
+  }
+
+  fs.stat(resolved, function(err, stats) {
+    if (err || !stats.isFile()) {
+      /* 目录请求尝试补 index.html */
+      if (!err && stats.isDirectory()) {
+        var indexFile = path.join(resolved, 'index.html');
+        serveFile(res, indexFile);
+        return;
+      }
+      res.writeHead(404);
+      res.end('Not Found');
+      return;
+    }
+
+    var ext = path.extname(resolved).toLowerCase();
+    var contentType = MIME_TYPES[ext] || 'application/octet-stream';
+
+    res.writeHead(200, { 'Content-Type': contentType, 'Content-Length': stats.size });
+    fs.createReadStream(resolved).pipe(res);
+  });
+}
+
+/* ========== 请求处理 ========== */
+
+var server = http.createServer(function(req, res) {
+  var parsed = url.parse(req.url, true);
+  var pathname = decodeURIComponent(parsed.pathname);
+
+  /* --- POST /simple-login：校验密码 --- */
+  if (req.method === 'POST' && pathname === '/simple-login') {
+    readBody(req, function(body) {
+      var data = querystring.parse(body);
+      var password = data.password || '';
+      var redirect = safeRedirect(data.redirect);
+
+      if (password !== PASSWORD) {
+        res.writeHead(302, { 'Location': '/login.html?error=1&redirect=' + encodeURIComponent(redirect) });
+        res.end();
+        return;
+      }
+
+      var token = signToken();
+      var cookie = COOKIE_NAME + '=' + encodeURIComponent(token)
+        + '; Path=/; HttpOnly; SameSite=Lax; Max-Age=' + COOKIE_MAX_AGE;
+
+      res.writeHead(302, {
+        'Set-Cookie': cookie,
+        'Location': redirect
+      });
+      res.end();
+    });
+    return;
+  }
+
+  /* --- POST /simple-logout：退出登录 --- */
+  if (req.method === 'POST' && pathname === '/simple-logout') {
+    var clearCookie = COOKIE_NAME + '=; Path=/; HttpOnly; SameSite=Lax; Max-Age=0';
+    res.writeHead(302, { 'Set-Cookie': clearCookie, 'Location': '/login.html' });
+    res.end();
+    return;
+  }
+
+  /* --- GET /simple-logout：也支持 GET 方式退出 --- */
+  if (req.method === 'GET' && pathname === '/simple-logout') {
+    var clearCookie2 = COOKIE_NAME + '=; Path=/; HttpOnly; SameSite=Lax; Max-Age=0';
+    res.writeHead(302, { 'Set-Cookie': clearCookie2, 'Location': '/login.html' });
+    res.end();
+    return;
+  }
+
+  /* --- 公开路径放行 --- */
+  var isPublic = PUBLIC_PATHS.some(function(p) { return pathname === p; });
+
+  if (isPublic) {
+    var loginFile = pathname === '/login' ? '/login.html' : pathname;
+    var fullPath = path.join(STATIC_ROOT, loginFile);
+    serveFile(res, fullPath);
+    return;
+  }
+
+  /* --- 鉴权：检查 Cookie --- */
+  var token = getCookie(req, COOKIE_NAME);
+  if (!verifyToken(token)) {
+    res.writeHead(302, { 'Location': '/login.html?redirect=' + encodeURIComponent(pathname) });
+    res.end();
+    return;
+  }
+
+  /* --- 已登录：返回静态文件 --- */
+  if (pathname === '/') pathname = '/index.html';
+
+  var filePath = path.join(STATIC_ROOT, pathname);
+  serveFile(res, filePath);
+});
+
+server.listen(PORT, function() {
+  console.log('[原型网关] 已启动 -> http://localhost:' + PORT);
+  console.log('[原型网关] 访问密码: ' + PASSWORD);
+  console.log('[原型网关] 按 Ctrl+C 停止');
+});