logo
0
0
WeChat Login

微信公众号登录服务系统

基于微信公众号(未认证)验证码的OAuth认证服务系统,支持第三方应用统一身份认证,专为云函数环境优化。 采用腾讯元器进行中转授权,不改变原有公众号功能。

✨ 核心特性

  • 🔐 无密码登录:通过微信公众号验证码完成身份认证
  • 🌐 OAuth 2.0:标准OAuth协议,支持第三方应用接入
  • ⚡ 云函数友好:原生支持EdgeOne Pages等云函数部署
  • 🛡️ 安全可靠:JWT认证 + 恒定时间比较防护
  • 📊 管理后台:完整的用户、客户端和日志管理界面
  • 🔄 智能存储:自适应KV存储,支持Vercel KV和本地存储

🏗️ 架构总览

🚀 快速开始

环境要求

  • Node.js 18+
  • pnpm 8+ (推荐) 或 npm/yarn
  • 微信公众号

安装与配置

  1. 克隆项目

    git clone <repository-url>
    cd wechat-oauth-login
    
  2. 安装依赖

    pnpm install
    
  3. 环境变量配置

    cp .env.example .env.local
    

    编辑 .env.local 文件:

    # 管理员账号 (必填)
    ADMIN_USERNAME=admin
    ADMIN_PASSWORD=your_secure_password
    
    # JWT密钥 (必填,至少32字符)
    JWT_SECRET=your_jwt_secret_key_32_characters_minimum
    
    # 应用基础URL (必填)
    NEXT_PUBLIC_BASE_URL=https://your-domain.com
    
    # 微信API安全密钥 (如需接收微信消息)
    WECHAT_API_SECRET=your_api_secret
    
    # KV数据库 (生产环境推荐)
    KV_URL=your_kv_database_url
    KV_REST_API_TOKEN=your_kv_token
    
  4. 启动开发服务器

    pnpm dev
    
  5. 访问应用

💻 本地开发运行指南

开发环境详细配置

1. 系统要求

  • 操作系统: Windows 10+, macOS 10.15+, Ubuntu 18.04+
  • Node.js: 推荐使用 18.18.0 或更高版本
  • 包管理器: pnpm 8.0+ (性能更好,推荐) 或 npm 8+
  • 编辑器: VS Code + TypeScript 插件 (推荐)

2. Node.js 安装验证

# 检查 Node.js 版本
node --version  # 应显示 v18.18.0 或更高

# 检查 npm 版本
npm --version   # 应显示 8.0 或更高

# 安装 pnpm (如果未安装)
npm install -g pnpm

# 验证 pnpm 安装
pnpm --version  # 应显示 8.0 或更高

3. 项目依赖安装

# 清理缓存 (可选,解决依赖冲突)
pnpm cache clean

# 安装项目依赖
pnpm install

# 验证安装完成
pnpm list --depth=0

本地开发环境变量配置

最小化配置 (.env.local)

# === 必填配置 ===
ADMIN_USERNAME=admin
ADMIN_PASSWORD=123456
JWT_SECRET=your_32_character_secret_key_here_123456
NEXT_PUBLIC_BASE_URL=http://localhost:3000

# === 可选配置(开发环境) ===
# 验证码有效期 (秒)
CODE_EXPIRE_TIME=60

# 开发模式 (启用详细日志)
NODE_ENV=development

完整配置 (连接微信公众号)

# === 必填配置 ===
ADMIN_USERNAME=admin
ADMIN_PASSWORD=your_secure_password_here
JWT_SECRET=your_jwt_secret_key_32_characters_minimum_length
NEXT_PUBLIC_BASE_URL=http://localhost:3000

# === 微信API配置 (仅需要API密钥) ===
WECHAT_API_SECRET=your_api_secret_key

# === 可选配置 ===
CODE_EXPIRE_TIME=60
NODE_ENV=development

# === 数据存储 (开发环境可不配置) ===
# KV_URL=your_kv_database_url
# KV_REST_API_TOKEN=your_kv_token

⚠️ 注意: 系统只使用 WECHAT_API_SECRET 来验证微信对接的腾讯元器回调请求,无需配置 WECHAT_APP_IDWECHAT_APP_SECRETWECHAT_TOKEN 等传统微信公众号参数。

启动开发服务器

标准启动流程

# 1. 进入项目目录
cd wechat-oauth-login

# 2. 安装依赖 (首次运行)
pnpm install

# 3. 配置环境变量
cp .env.example .env.local
# 编辑 .env.local 文件

# 4. 启动开发服务器
pnpm dev

# 服务器启动成功后会显示:
# ▲ Next.js 14.x.x
# - Local:        http://localhost:3000
# - ready started server on 0.0.0.0:3000

其他启动选项

# 使用不同端口启动
pnpm dev -- -p 3001

# 启动并自动打开浏览器
pnpm dev -- --open

# 启动时显示更详细的日志
pnpm dev -- --debug

📱 使用流程

用户登录流程

  1. 生成验证码:用户访问登录页面,点击"生成验证码"
  2. 关注公众号:扫码关注微信公众号
  3. 发送验证码:向公众号发送显示的6位数字验证码
  4. 自动登录:系统验证成功后自动跳转到个人页面

管理员操作

  1. 登录管理后台:使用管理员账号密码登录
  2. OAuth客户端管理:添加、查看、删除第三方应用客户端
  3. 历史记录查询:查看登录、消息、验证码等操作记录
  4. 系统监控:查看用户统计和系统状态

🛠️ 部署指南

云函数部署 (推荐)

本项目专为云函数环境优化,支持一键部署到EdgeOne Pages:

  1. 构建应用

    pnpm build:standalone
    
  2. 部署到EdgeOne

    # 通过CNB自动部署
    git push origin main
    
    # 或手动部署
    pnpm deploy:prepare
    npx edgeone pages deploy deploy-package -n your-app-name -t $EDGEONE_API_TOKEN --function
    

Vercel部署

# 安装Vercel CLI
npm i -g vercel

# 部署
vercel --prod

Docker部署

FROM node:20-alpine
WORKDIR /app
COPY . .
RUN npm install -g pnpm && pnpm install && pnpm build
EXPOSE 3000
CMD ["pnpm", "start"]

🔧 API文档

核心API端点

认证相关

  • POST /api/auth/code - 生成验证码
  • GET /api/auth/code?code={code} - 验证码状态查询
  • POST /api/user/login - 用户登录获取JWT

OAuth 2.0

  • GET /api/oauth/authorize - OAuth授权页面
  • POST /api/oauth/token - 获取访问令牌
  • GET /api/oauth/callback - OAuth回调处理

管理接口

  • GET /api/admin/stats - 系统统计数据
  • GET /api/admin/clients - OAuth客户端列表
  • POST /api/admin/clients - 创建OAuth客户端
  • GET /api/admin/history/* - 历史记录查询

系统接口

  • GET /api/health - 健康检查
  • POST /api/wechat/message - 微信消息接收

错误码说明

状态码说明常见原因
400请求参数错误缺少必填字段或参数格式错误
401认证失败JWT token无效或已过期
403权限不足非管理员访问管理接口
500服务器错误系统异常或数据库连接失败

🔒 安全特性

  • JWT认证:使用HS256算法签名,支持自定义密钥
  • 恒定时间比较:防止时序攻击
  • CORS保护:限制跨域请求来源
  • 输入验证:严格的参数校验和类型检查
  • 敏感信息保护:日志中自动脱敏密码等敏感字段

🎯 环境变量说明

必填变量

变量名说明示例值
ADMIN_USERNAME管理员用户名admin
ADMIN_PASSWORD管理员密码secure_password_123
JWT_SECRETJWT签名密钥(≥32字符)your_jwt_secret_key_32_characters_minimum
NEXT_PUBLIC_BASE_URL应用基础URLhttps://your-domain.com

可选变量

变量名说明默认值
CODE_EXPIRE_TIME验证码有效期(秒)60
KV_URLKV数据库连接URL未设置时使用本地存储
KV_REST_API_TOKENKV数据库访问token-
WECHAT_API_SECRET微信API安全密钥开发环境可使用测试密钥

📊 监控与日志

系统健康检查

curl https://your-domain.com/api/health

返回系统状态、环境变量检查和依赖服务状态。

日志记录

系统自动记录以下事件:

  • ✅ 用户登录/登出
  • 📨 微信消息接收
  • 🔑 验证码生成和使用
  • 👨‍💼 管理员操作
  • ❌ 错误和异常

本地访问和功能测试

基础功能验证

# 1. 健康检查 - 验证服务正常运行
curl http://localhost:3000/api/health

# 期望返回:
# {"status":"ok","timestamp":"2025-08-27T10:12:53.000Z","environment":"development"}

# 2. 登录页面访问
open http://localhost:3000/login
# 或在浏览器中访问 http://localhost:3000/login

# 3. 管理后台访问
open http://localhost:3000/admin  
# 使用 .env.local 中配置的 ADMIN_USERNAME 和 ADMIN_PASSWORD 登录

API 端点测试

# 1. 生成验证码 API 测试
curl -X POST http://localhost:3000/api/auth/code \
  -H "Content-Type: application/json"

# 2. 管理员登录测试
curl -X POST http://localhost:3000/api/admin/login \
  -H "Content-Type: application/json" \
  -d '{"username":"admin","password":"your_password"}'

# 3. 环境变量检查 (调试用)
curl http://localhost:3000/api/debug/env

本地调试方法

1. 浏览器开发者工具

// 在浏览器控制台中检查认证状态
console.log('当前存储的Token:', localStorage.getItem('auth_token'));

// 检查页面加载状态
console.log('页面路径:', window.location.pathname);
console.log('环境变量:', process.env.NODE_ENV);

2. 日志调试

开发环境下,应用会在控制台输出详细日志:

# 启动开发服务器时观察日志
pnpm dev

# 查看以下关键日志:
# - "健康检查通过"
# - "用户认证成功" 
# - "管理员登录成功"
# - "验证码生成: XXXXXX"
# - "微信消息处理完成"

3. 数据存储调试

# 查看本地数据存储文件
cat .kv-data.json | jq .

# 检查用户数据
grep -E "user:|wechat:" .kv-data.json

# 检查管理员数据
grep "admin:" .kv-data.json

本地环境故障排除

常见启动问题

问题1: "端口3000已被占用"

# 解决方案1: 使用其他端口
pnpm dev -- -p 3001

# 解决方案2: 杀死占用端口的进程 (macOS/Linux)
lsof -ti:3000 | xargs kill -9

# 解决方案3: Windows 下杀死进程
netstat -ano | findstr :3000
taskkill /pid <PID> /f

问题2: "JWT_SECRET 环境变量未设置"

# 检查环境变量文件
ls -la .env*

# 确保 .env.local 存在且包含必要配置
cat .env.local | grep JWT_SECRET

# 如果不存在,复制示例文件
cp .env.example .env.local

问题3: "依赖安装失败"

# 清理依赖和缓存
rm -rf node_modules package-lock.json pnpm-lock.yaml
pnpm cache clean

# 重新安装
pnpm install

# 如果依然失败,尝试使用 npm
npm install

常见功能问题

问题1: "管理后台登录失败"

  • 检查 .env.local 中的 ADMIN_USERNAMEADMIN_PASSWORD
  • 确保密码不包含特殊字符
  • 检查浏览器控制台是否有 JavaScript 错误

问题2: "验证码生成失败"

  • 确保 NEXT_PUBLIC_BASE_URL=http://localhost:3000
  • 检查 CODE_EXPIRE_TIME 设置是否合理 (推荐60秒)
  • 查看服务器控制台错误日志

问题3: "页面样式异常"

# 清理 Next.js 缓存
rm -rf .next

# 重新启动开发服务器
pnpm dev

本地开发最佳实践

1. 环境变量管理

  • 使用 .env.local 存储敏感配置
  • 不要提交 .env.local 文件到版本控制
  • 定期更新 .env.example 模板

2. 代码热重载

  • 保存代码文件后自动刷新页面
  • 修改环境变量需要重启开发服务器
  • 样式更改会实时更新

3. 数据持久化

  • 开发环境使用 .kv-data.json 文件存储数据
  • 该文件会自动创建,包含用户和管理员数据
  • 删除该文件可重置所有数据

4. 微信登录集成

# 如果需要测试微信功能,需要:
# 1. 注册腾讯元器新建智能体并设置为工作流模式
# 2. 工作流新建http节点
# 3. http节点设置相关参数,api地址为:/api/wechat/message/ 参数详见welogin/src/app/api/CLAUDE.md
# 4. 在腾讯元器智能体授权微信公众号 webhook URL

🧪 开发与测试

开发环境

# 启动开发服务器
pnpm dev

# 类型检查
pnpm type-check

# 代码检查
pnpm lint

调试工具

  • GET /api/debug/env - 环境变量检查
  • POST /api/debug/login - 简化登录测试
  • GET /api/debug/user - 用户信息调试

测试建议

# API端点测试
curl -X POST http://localhost:3000/api/auth/code

# 管理员登录测试
curl -X POST http://localhost:3000/api/admin/login \
  -H "Content-Type: application/json" \
  -d '{"username":"admin","password":"your_password"}'

🤝 贡献指南

  1. Fork 项目
  2. 创建特性分支 (git checkout -b feature/amazing-feature)
  3. 提交变更 (git commit -m 'Add some amazing feature')
  4. 推送分支 (git push origin feature/amazing-feature)
  5. 创建Pull Request

📝 开发规范

  • 代码风格:使用TypeScript严格模式
  • 提交规范:遵循Conventional Commits
  • API设计:RESTful风格,统一错误响应格式
  • 安全原则:所有敏感操作需要认证,输入严格验证

🆘 故障排除

生产环境问题

Q: 验证码生成失败? A: 检查NEXT_PUBLIC_BASE_URL是否正确配置,确保可以从外网访问。

Q: 管理后台无法登录?
A: 确认ADMIN_USERNAMEADMIN_PASSWORD环境变量设置正确,密码不要包含特殊字符。

Q: 微信消息无响应? A: 检查WECHAT_API_SECRET是否与公众号后台配置一致,确认webhook URL可访问。

Q: 部署后KV存储错误? A: 生产环境建议配置KV_URL,或确保云函数平台支持文件系统持久化。

本地开发问题

Q: 本地启动时出现 "EADDRINUSE" 错误? A: 端口3000被占用,使用 pnpm dev -- -p 3001 更换端口,或杀死占用端口的进程。

Q: 本地环境变量不生效?
A: 确保 .env.local 文件存在且格式正确,修改环境变量后需要重启开发服务器。

Q: 本地数据丢失? A: 检查 .kv-data.json 文件是否存在,该文件包含所有本地数据,删除后数据会重置。

Q: 热重载不工作? A: 清理 .next 缓存文件夹,重新启动开发服务器。

日志查看

# 开发环境
tail -f logs/application.log

# 生产环境  
# 查看云函数平台日志系统

📄 许可证

本项目采用 MIT License 许可证。

🔗 相关链接


⭐ 如果这个项目对你有帮助,请给它一个Star!

Made with ❤️ by Development Team