H5 官网 + 微信登录
开发与部署方案

这些约束决定了方案形态，建议在动工前先与公众号管理员逐条确认。

前端只负责展示与跳转，所有涉及 AppSecret 的动作全部收敛在服务端（BFF）。

# 项目根目录 h5_login/
├── public/                  # H5 静态站点（可单独静态托管）
│   ├── index.html           # 官网首页 + 登录弹窗 / 会员中心
│   ├── plan.html            # 本方案页
│   ├── assets/
│   │   ├── styles.css       # 官网样式（移动端优先）
│   │   ├── plan.css         # 方案页样式
│   │   └── app.js           # 登录态、环境检测、演示授权流程
│   └── MP_verify_XXXX.txt   # 公众号域名校验文件（上线时放入）
├── server/
│   └── server.js            # OAuth 回调 + 会话 + 静态服务（零依赖）
├── deploy/
│   └── nginx.conf.example   # HTTPS / 反代 / 校验文件配置
├── Dockerfile               # 容器化部署
├── package.json             # npm start → node server/server.js
├── .env.example             # 配置模板（复制为 .env）
└── .gitignore               # 忽略 .env

# 本地运行
cp .env.example .env
npm start                    # http://localhost:3000

前端 app.js 中的 CONFIG.apiBase 默认为同源；若前后端分离部署，改成后端域名并同步处理 CORS 与 credentials: 'include'。生产环境建议由 /api/config 统一下发模式与公开配置，而不是硬编码在前端。

snsapi_userinfo 会弹出授权页并返回昵称/头像；若只要 OpenID，可改用静默的 snsapi_base。

https://open.weixin.qq.com/connect/oauth2/authorize
  ?appid=wx6ff6319c3ed127f6
  &redirect_uri=https%3A%2F%2Fwww.yourcompany.com%2Fwx%2Fcallback
  &response_type=code
  &scope=snsapi_userinfo
  &state=STATE#wechat_redirect

GET https://api.weixin.qq.com/sns/oauth2/access_token
  ?appid=wx6ff6319c3ed127f6
  &secret=APPSECRET          // 仅服务端可见
  &code=CODE
  &grant_type=authorization_code
→ { access_token, openid, unionid?, scope, expires_in }

GET https://api.weixin.qq.com/sns/userinfo
  ?access_token=...&openid=...&lang=zh_CN
→ { nickname, headimgurl, sex, city, province, country, unionid }

路径基于当前公众平台界面；不同账号类型菜单名称可能略有差异，以实际后台为准。

建议顺序：先把 PHASE 2/3 用测试号 + 内网穿透跑通一次真实授权，再切换到正式 AppID 与生产域名，避免反复改动正式服务号配置。

方案 C · 标准云服务器上线步骤

1. 域名 ICP 备案 → DNS 解析到服务器 → 申请并部署 SSL 证书（腾讯云/阿里云免费证书或 Let's Encrypt）。
2. 部署代码：git clone → cp .env.example .env 填 WX_APPSECRET、PUBLIC_BASE_URL=https://www.yourcompany.com、SESSION_SECRET、WX_MODE=live → npm start 由 PM2 守护，或用 Dockerfile 构建镜像交给容器服务。
3. 按 deploy/nginx.conf.example 配置 HTTPS、/wx /api 反代到 3000 端口、静态资源直出，并确保 MP_verify_XXXX.txt 可从域名根目录访问。
4. 公众号后台配置「网页授权域名」与 IP 白名单（见第 06 节），保存后等待生效。
5. 微信内打开 https://www.yourcompany.com 实测：授权弹窗 → 同意 → 回跳 → 头像昵称 → 刷新保持登录 → 退出 → 再次登录。
6. 接入日志、错误告警、备份与 /healthz 探活；上线后按第 10 节清单验收。

方案 C 的两种替代运行形态

• state：服务端随机生成、一次性、5 分钟过期，并与 Cookie 双重校验，防 CSRF 与重放。
• redirect：只接受站内相对路径（拒绝 //、反斜杠、换行），防开放重定向。
• Cookie：HttpOnly + Secure（HTTPS）+ SameSite=Lax；多个 Cookie 必须一次性以数组下发，避免被后一次 Set-Cookie 覆盖。
• 数据最小化：不向前端返回完整 openid / unionid / access_token；头像昵称按需收集并在隐私政策中说明。
• 运维：全站 HTTPS、日志脱敏、接口限流、依赖与证书定期更新、数据库备份。

验收清单

• 服务号为已认证服务号，「网页授权获取用户基本信息」权限已生效
• 域名已备案、全站 HTTPS、证书有效，MP_verify_XXXX.txt 可从域名根目录访问
• 公众号后台网页授权域名与 redirect_uri 域名完全一致（含 www）
• 服务器出口公网 IP 已加入 IP 白名单；AppSecret 只存在于服务端环境变量
• 微信内：点击登录 → 授权页 → 同意 → 回跳 → 显示昵称头像 → 刷新仍为登录态 → 退出后受保护内容不可见
• 非微信浏览器：给出明确降级提示，或已接入开放平台网站应用扫码登录
• state 重放、code 复用、取消授权、网络超时均有友好提示，无空白页
• 《用户协议》《隐私政策》、ICP 备案号、真实公司信息与联系方式已替换 Demo 占位内容
• 日志与监控可见授权成功率、错误码分布；/healthz 探活正常

常见错误码速查