企业官网建设流程全解析

酱茄小程序登录流程深度解析：微信login3、Token校验与手机号绑定完整指南

【免费下载链接】jiangqie_kafei酱茄小程序开源版，基于WordPress的微信小程序，适用于博客小程序和新闻资讯小程序。项目地址: https://gitcode.com/gh_mirrors/ji/jiangqie_kafei

酱茄小程序开源版是基于 WordPress 的微信小程序方案，适用于博客小程序和新闻资讯小程序。本文带你深入拆解它的登录流程实现原理：从微信login3接口换取 openid、Token 生成与校验机制，到手机号绑定的 AES 解密原理，新手也能快速看懂这套前后端联动的登录架构。

一、登录流程全景图

酱茄小程序的登录流程可以概括为5 步：

1. 小程序端调用uni.login()获取临时授权code
2. 前端将code提交给 WordPress 后端的user/login3接口
3. 后端用code换取用户的openid（微信官方 jscode2session）
4. 后端创建或匹配 WordPress 用户，生成并返回token
5. 前端存储token，后续所有请求自动携带，后端据此校验登录态

核心源码位置：

• 后端登录接口：api_uni/jiangqie-api/public/rest/class-jiangqie-api-user-controller.php
• 前端登录页面：client_uni/pages/login/login.vue
• 前端 Token 存取：client_uni/utils/auth.js

二、第一步：获取微信授权 code

打开登录页时，前端在onLoad生命周期里就提前调用了uni.login()，拿到微信下发的临时code并缓存到页面变量中：

client_uni/pages/login/login.vue onLoad → uni.login({ success: res => { this.code = res.code } })

点击「确定」后，login()方法将code、nickname（如"微信用户"）、channel（weixin / qq / baidu）一起 POST 到接口：

client_uni/utils/api.js JIANGQIE_USER_LOGIN: https://域名/wp-json/jiangqie/v1/user/login3

可以看到接口名就叫login3，它是酱茄小程序登录流程的核心入口。

三、第二步：login3 接口用 code 换 openid

后端user_login3()方法（见class-jiangqie-api-user-controller.php第 98 行）按channel参数分发到不同平台：

• weixin→ 调用微信https://api.weixin.qq.com/sns/jscode2session
• qq→ 调用 QQ 小程序jscode2session
• baidu→ 调用百度jscode2sessionkey

这一步依赖后台配置好的Appid 和 AppSecret（存于 WordPress 选项表）。如果换取失败，接口会返回"请检查前后端配置信息~"，这也是最常见的登录失败原因。

四、自动注册：用 openid 当用户名

拿到openid后，后端以它作为user_login去 WordPress 用户表里查找：

• 已存在：直接复用该用户 ID
• 不存在：调用wp_insert_user()自动注册一个新用户（角色为 subscriber），并返回first: 1标记

前端收到first标记后会跳转到「完善资料」页（client_uni/pages/verify/verify.vue），让用户设置头像和昵称，实现免注册的静默登录体验。

同时后端会把以下信息写入用户元数据（usermeta表）：

五、Token 校验机制详解

酱茄小程序没有使用WordPress 自带的 Cookie 会话体系，而是采用自研的 Token 方案：

生成：generate_token()用md5(uniqid())生成 32 位随机串，写入jiangqie_token用户元数据。

携带：前端封装的网络请求层（client_uni/utils/rest.js）在每次请求前自动执行data.token = Auth.getToken()，Token 从本地存储JQ_USER_KEY中读取。

校验：后端基类check_login()（class-jiangqie-api-base-controller.php第 100 行）直接查库：

SELECT user_id FROM wp_usermeta WHERE meta_key='jiangqie_token' AND meta_value=提交的token

查到user_id即登录成功；查不到则返回错误码-1。

智能跳转：前端rest.js对错误码做了统一拦截——

• code == -1：未登录 → 自动跳转登录页
• code == -11：已登录但未绑定手机号 → 自动跳转手机号绑定页

这套机制让"登录态失效 → 重新登录"全程无需用户手动操作。

六、手机号绑定的实现原理

当后台开启"评论需绑定手机号"开关时，发评论前会校验jiangqie_mobile元数据，为空则返回-11，前端弹出绑定页（login.vue的type=mobile模式）。

绑定流程涉及微信的AES 解密：

1. 用户点击「绑定手机号」按钮（open-type="getPhoneNumber"），微信回调返回encryptedData（加密数据）和iv（初始向量）
2. 前端连同code一起提交到user/set_mobile接口
3. 后端先用code换取最新的session_key
4. 用session_key对encryptedData执行openssl_decrypt（AES-128-CBC）解密，得到phoneNumber
5. 解密结果中的watermark.appid会与后台 Appid 比对，防止数据伪造，通过后写入用户元数据

这个"code + session_key + AES"的组合，是微信隐私数据接口的标准安全模式：密钥不落前端、数据实时校验、Appid 双重验证。

七、新手常见问题

Q1：登录提示"请检查前后端配置信息"？检查后台「酱茄设置 → 基础设置」中 Appid/AppSecret 是否与小程序后台一致（见上图配置项）。

Q2：微信和 QQ 登录的账号会重复注册吗？不会。不同渠道的 openid 不同，但同一微信用户在多端复用 openid，用户数据完全同步在 WordPress 中。

Q3：Token 会过期吗？Token 长期有效，直到注销（user/logout接口会删除用户及关联的评论、点赞、收藏记录）或被重新登录时覆盖。

八、总结

酱茄小程序的登录体系设计简洁实用：以openid 为唯一标识实现免注册登录，以自研 Token替代传统会话机制适配小程序无 Cookie 环境，再以微信官方 AES 解密保障手机号等隐私数据的安全。整套方案前后端代码量小、职责清晰，是学习 WordPress + uni-app 小程序登录架构的优秀参考。

【免费下载链接】jiangqie_kafei酱茄小程序开源版，基于WordPress的微信小程序，适用于博客小程序和新闻资讯小程序。项目地址: https://gitcode.com/gh_mirrors/ji/jiangqie_kafei