微信小程序登录流程

目录

• 背景和价值
  • 概念 “受信任地址”和“回调地址”
    • 🔄 一、前端操作（小程序端）
    • ⚙️ 二、后端处理（开发者服务器）
    • 🔐 三、登录态维护与校验
    • ⚠️ 四、关键安全规范
    • 💎 流程总结
    • 🛠️ 异常处理建议
• 时序图设计（基于微信登录流程）
• 参考资料

背景和价值

概念 “受信任地址”和“回调地址”

小程序中的“受信任地址”和“回调地址”是两个不同的概念，它们都与安全和数据交互有关，但作用和应用场景不同。
受信任地址:
顾名思义，指的是系统信任的地址列表。在小程序的上下文中，这通常指的是开发者设置的可以安全访问的小程序页面，或者可以安全跳转到的外部链接地址。受信任地址的作用是为了防止恶意跳转或用户被导向钓鱼网站。当小程序在进行跳转或者外部调用时，会检查跳转到的地址是否在受信任地址列表中，如果不在，则会拒绝跳转或调用，从而保护用户安全。
回调地址:
回调地址指的是在完成某些操作后，系统会通知的回调的地址。例如，用户在小程序中进行登录或者支付，登录或者支付完成后，系统会通知到回调地址，告诉开发者用户已经完成了相应操作。回调地址的作用是实现小程序的异步操作，例如接收用户支付结果通知、接收第三方平台的登录结果通知等等。回调地址也是需要注册和设置的，以确保消息的正确传递和防止恶意消息的篡改。
简而言之：
受信任地址:用于控制小程序可以访问的地址，确保安全。
回调地址:用于接收异步通知，实现小程序与外部系统的交互。

微信小程序登录与后端交互流程主要分为前端获取凭证、后端验证授权、生成自定义登录态三大阶段，结合多个技术文档，具体流程如下：

---

🔄 一、前端操作（小程序端）

1. 调用 wx.login() 获取临时凭证

   • 小程序端执行 wx.login()，微信服务器返回 code（有效期5分钟，一次性使用）。
   • 示例代码：

     wx.login({
       success: res => {
         if (res.code) {
           const code = res.code; // 发送给后端
         }
       }
     });
     

2. （可选）获取用户信息

   • 若需用户昵称/头像，通过 <button open-type="getUserInfo"> 触发授权，获取 encryptedData 和 iv。

3. 发送 code 至开发者服务器

   • 将 code 通过 HTTPS POST 请求发送至后端接口。

---

⚙️ 二、后端处理（开发者服务器）

1. 用 code 换取 session_key 和 openid

   • 后端携带小程序 AppID、AppSecret 和 code，请求微信接口：
     https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=CODE&grant_type=authorization_code。
   • 微信返回：

     { "openid": "用户唯一标识", "session_key": "会话密钥", "unionid": "开放平台ID（可选）" }
     

2. （可选）解密用户信息
   -** 若前端传了 encryptedData 和 iv，后端用 session_key 解密获取用户敏感数据。**

3. 生成自定义登录态

   • 根据 openid 创建或关联用户账号，生成 自定义 Token（如 JWT）或 3rdSessionId。
   • 将 session_key 与 Token 绑定存储于缓存（如 Redis），有效期建议 ≤ 30天。

4. 返回 Token 给前端

   • 响应示例：

     { "token": "xxxxxx", "expires_in": 604800 } // 7天有效期
     

---

🔐 三、登录态维护与校验

1. 前端存储 Token

   • 小程序通过 wx.setStorageSync('token', res.token) 缓存 Token。
   • 后续请求在 Header 中携带 Token（如 Authorization: Bearer xxxxxx）。

2. 后端校验登录态

   • 接收请求后，用 Token 查询缓存中的 session_key 和用户身份，验证有效性。

3. 登录态过期处理

   • 前端：调用 wx.checkSession() 检测微信会话是否过期。若过期则重新登录。
   • 后端：若 Token 失效，返回 401 Unauthorized，触发前端重新发起登录流程。

---

⚠️ 四、关键安全规范

1. 敏感信息保护

   • AppSecret 严禁暴露在前端，仅限后端使用。
   • session_key 不传到小程序端，仅用于后端解密或签名验证。

2. 通信安全

   • 所有接口必须使用 HTTPS，防止数据截获。
   • 用户敏感数据（如手机号）需用 session_key 解密。

3. Token 管理

   • 设置合理过期时间（如 7天），并提供 Token 刷新机制。
   • 避免 Token 存储在易泄露位置（如 URL 参数）。

---

💎 流程总结

阶段	执行方	核心操作	输出结果
获取临时凭证	小程序	调用 wx.login() 获取 code	code（5分钟有效）
换取身份标识	后端服务器	用 code + AppSecret 请求微信接口	openid + session_key
生成登录态	后端服务器	创建 Token 并关联 session_key	自定义 Token
存储与校验	小程序 + 后端	前端缓存 Token，后端校验请求合法性	维持用户会话

完整流程可参考微信官方时序图：
小程序 → 获取 code → 后端 → 换取 session_key → 生成 Token → 返回 → 前端存储 → 请求携带 → 后端验证

---

🛠️ 异常处理建议

• Code 失效：前端重试 wx.login() 获取新 code。
• session_key 过期：后端删除关联 Token，强制前端重新登录。
• 网络超时：前端设置 request 超时（建议 ≤3秒），并提供重试按钮。

通过此流程，小程序可实现安全、高效的登录体系，同时为后续业务接口提供身份验证基础。实际开发中需结合具体框架（如 PHP/Java/Node.js）实现后端逻辑。

时序图设计（基于微信登录流程）

以下用 Mermaid 语法描述交互流程，可直接粘贴到支持 Mermaid 的工具（如 Typora、GitHub）中渲染：

sequenceDiagram actor 用户 as 用户 participant 前端 as 微信小程序 participant 后端 as 开发者服务器 participant 微信服务 as 微信API服务 用户 ->> 前端: 点击登录按钮 前端 ->> 前端: 调用 wx.login() 前端 -->> 微信服务: 请求临时 code 微信服务 -->> 前端: 返回 code (有效期5分钟) 前端 ->> 后端: 发送 code + 用户信息(可选) 后端 ->> 微信服务: 用 AppID+AppSecret+code 请求 微信服务 -->> 后端: 返回 openid + session_key + 手机号码 后端 ->> 后端: 生成自定义 token (JWT) 后端 -->> 前端: 返回 token 前端 ->> 前端: 缓存 token (wx.setStorage) 用户 ->> 前端: 后续操作 前端 ->> 后端: 请求携带 token 后端 ->> 后端: 验证 token 有效性 后端 -->> 前端: 返回业务数据

参考资料