🔐 小程序授权登录的流程

📅 发布于 2026年3月 | 👤 作者:博主 | 🏷️ 标签:小程序, 微信登录, wx.login, openid, session_key, JWT, Web开发, 前端, 面试

欢迎来到我的博客文章!所有文章都是满满的前端干货,文章简明扼要。

一、核心流程

前端获取临时凭证 → 后端换取用户唯一标识 → 生成自定义登录态

二、完整流程(时序图)

1. 前端:触发登录,获取 code

// 1. 调用 wx.login 获取临时 code
wx.login({
  success: (res) => {
    if (res.code) {
      // 2. 将 code 发送到自己的服务器
      wx.request({
        url: 'https://your-server.com/api/login',
        method: 'POST',
        data: { code: res.code },
        success: (serverRes) => {
          // 3. 存储后端返回的 token(登录态)
          wx.setStorageSync('token', serverRes.data.token);
          // 登录成功,跳转到首页/个人中心
        },
        fail: () => { /* 网络异常处理 */ }
      });
    } else {
      console.log('登录失败!' + res.errMsg);
    }
  }
});

2. 后端:用 code 换取 openid & session_key

后端接收前端传来的 code,调用微信 code2Session 接口:

GET https://api.weixin.qq.com/sns/jscode2session?appid=你的小程序AppID&secret=你的小程序AppSecret&js_code=前端传来的code&grant_type=authorization_code

微信返回:

{
  "openid": "oXxx...",
  "session_key": "xxx...",
  "unionid": "oXxx..." // 若绑定开放平台才会返回
}

后端逻辑:

3. 前端:存储登录态,后续鉴权

前端将 token 存入 wx.setStorageSync('token', ...)

后续请求时,在请求头中携带 token 进行鉴权。

// 后续请求携带 token
wx.request({
  url: 'https://your-server.com/api/userinfo',
  method: 'GET',
  header: {
    'Authorization': 'Bearer ' + wx.getStorageSync('token')
  },
  success: (res) => {
    console.log('用户信息:', res.data);
  }
});

核心要点

⚠️ 安全注意事项

← 返回首页