个人公众号验证码登录

使用个人公众号消息推送和 openid 白名单实现验证码登录，适合只开放给自己或少量授权微信号的网站。

为什么用验证码登录

个人公众号不能使用认证服务号的带参数二维码能力，也不能直接通过网页授权识别访问网站的微信用户。

可行方案是：

1. 网站生成一个临时验证码。
2. 用户用微信向公众号发送验证码。
3. 微信把这条消息推送到网站后端。
4. 后端从消息里拿到用户的 openid。
5. 后端检查这个 openid 是否在白名单中。
6. 通过后写入登录 session。

这个方案适合“只允许自己或少量指定微信号访问全文”的个人网站。

前端配置

在 .vitepress/config.ts 中开启登录：

themeConfig: {
  auth: {
    enabled: true,
    loginUrl: '/api/auth/wechat',
    meUrl: '/api/auth/me',
    logoutUrl: '/api/auth/logout'
  }
}

后端接口

后端需要提供：

GET  /api/auth/wechat
GET  /api/auth/wechat/status?ticket=...
GET  /api/auth/me
POST /api/auth/logout
GET  /api/wechat/callback
POST /api/wechat/callback

GET /api/auth/wechat 生成登录验证码。

POST /api/wechat/callback 接收公众号消息推送，解析 XML，读取 FromUserName 作为 openid。

公众号后台配置

在公众号后台开启服务器配置：

URL: https://example.com/api/wechat/callback
Token: 和服务器 WECHAT_TOKEN 保持一致
消息加解密方式: 明文模式
消息格式: XML

第一次配置时，微信会向 GET /api/wechat/callback 发起校验请求。接口通过签名校验后返回 echostr，公众号后台才能保存成功。

服务器环境变量

启动 Node 服务时传入：

PORT=3000 \
SITE_ORIGIN='https://example.com' \
WECHAT_TOKEN='你的Token' \
WECHAT_ALLOWED_OPENIDS='openid1,openid2' \
pm2 start server/index.js --name my-site

不要把真实 token 和 openid 写进代码，也不要提交到 GitHub。

找到自己的 openid

如果某个微信发送验证码但不在白名单，后端会记录类似信息：

Unauthorized WeChat login attempt: openid=xxxxxx

把这个 openid 加入 WECHAT_ALLOWED_OPENIDS 后重启：

pm2 restart my-site --update-env

本地模拟

本地没有真实微信消息推送时，可以启用 mock：

npm run build
WECHAT_MOCK=true npm run serve

打开本地站点后，点击登录面板里的模拟按钮即可完成登录流程。