微信小程序登录流程解析-阿里云开发者社区

微信小程序登录流程解析

2022-03-11 730

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 微信官方文档有小程序的登录流程时序图，本文围绕这张图从0到1做更具体的解析。微信小程序的登录看上去好像很复杂，实际上只是不同的接口调用、字段返回，整个过程有3方在参与：小程序、开发者服务器、微信服务器。

微信官方文档有小程序的登录流程时序图，本文围绕这张图从0到1做更具体的解析。微信小程序的登录看上去好像很复杂，实际上只是不同的接口调用、字段返回，整个过程有3方在参与：小程序、开发者服务器、微信服务器。

首先，看一下微信官方时序图：

根据上面的图，可以分为以下几步：

第1步 - 小程序：小程序前端调用wx.login得到code，再传给开发者服务器。

code是临时登录凭证，有效期为5分钟、只能使用一次，每次调用wx.login，都会返回不同的code。把code、appid、appsecret一起传到开发者服务器，由它调用微信接口换取相关信息。如果需要检验账号和密码，那么除了上述这3个参数，还可以加上账号密码，一起请求开发者服务器。

appid和appsecret需要在「小程序后台->开发->开发管理->开发设置->开发者ID」找到。这2者必须属于当前小程序，如果拿其它小程序的开发者ID则会出现报错。

appid和appsecret:

开发者服务器接口地址必须为https协议，域名必须经过ICP备案，同时需要在「小程序后台->开发->开发管理->开发设置->服务器域名」提前配置（测试环境除外）。为了安全起见，建议用POST的请求方式。

开发者服务器域名配置:

wx.request的超时时间默认为60秒，为了避免用户因网络异常或服务器问题等待回包太久，可以在app.json设置wx.request的超时时间，超时则触发fail回调。

"networkTimeout": {
  "request": 3000
}

代码示例（为了方便演示，把密钥放到了前端请求）：

wx.login({
  success: (res) => {
    var code = res.code;
    var app_id = "你的app_id";
    var app_secret = "你的app_secret";
    wx.request({
      url: "开发者服务器接口地址",
      method: "POST",
      header: {
        "content-type": "application/x-www-form-urlencoded"
      },
      data: {
        //完整写法是app_id:app_id，这是简写
        app_id, app_secret, code
      },
      success: (res) => {
        console.log("打印返回结果", res)
      }
    })
  }
})

第2步 - 开发者服务器：调用微信服务器接口，得到openid、session_key、unionid。unionid需要满足一定条件才能返回，在本文不展开。在这个步骤，如果出现错误的话，微信服务器会返回errcode（错误码）。此外，在这个过程校验账号和密码之后，可以把账号密码等信息和openid进行绑定。

微信服务器接口地址:

https://api.weixin.qq.com/sns/jscode2session?appid=<your_appid>&secret=<your_appsecret>&js_code=<your_code>&grant_type=authorization_code

服务器代码示例:

$app_id=$_POST['app_id'];
$app_secret=$_POST['app_secret'];
$code=$_POST['code'];
$url='https://api.weixin.qq.com/sns/jscode2session?appid='.$app_id.'&secret='.$app_secret.'&js_code='.$code.'&grant_type=authorization_code';
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_HEADER,0);
curl_setopt($ch, CURLOPT_POST, 1);
$output = curl_exec($ch);
curl_close($ch);
echo $output;

控制台打印:

从上面可以看到，微信服务器返回了openid和session_key。openid为用户在当前小程序的唯一标识，不同用户在小程序的openid不同，用户删除小程序、清空缓存不改变openid；session_key为开发者服务器和微信服务器的会话密钥，用于加解密数据，随着用户越频繁地使用小程序，session_key的有效期会越长。

第3步 - 开发者服务器：根据微信服务器返回的信息，自定义登录态。openid和session_key因为涉及到数据隐私，所以不直接发往小程序，而是在开发者服务器根据这2者自定义登录态，也就是定义token，再通过wx.setStorage把token写入本地数据缓存。至于怎么定义token，不同语言和不同项目的写法不一样，在这不再展开。

不同小程序有各自的本地缓存空间，彼此之间是分隔的，每个缓存空间大小是10M，如果超出10M再写入数据时，会触发fail回调。当然同一个设备的不同微信用户之间的缓存也是分隔的。

在第1步的代码，我们加上存储token的语句：

wx.login({
  success: (res) => {
    var code = res.code;
    var app_id = "你的app_id";
    var app_secret = "你的app_secret";
    wx.request({
      url: "开发者服务器接口地址",
      method: "POST",
      header: {
        "content-type": "application/x-www-form-urlencoded"
      },
      data: {
        app_id, app_secret, code
      },
      success: (res) => {
        console.log("打印返回结果", res);
        //存储到全局变量中，方便调用
        this.globalData.token = res.token;
        //把token放在本地缓存
        wx.setStorage({
          key: "token",
          data: res.token
        })
      }
    })
  }
})

当用户再次打开小程序时，就带上storage请求开发者服务器（在app.js定义），判断登录态有没有过期，而不用每次打开小程序都要重新登录：

onLaunch: function () {
  var that = this;
  //从本地缓存同步获取token
  var token = wx.getStorageSync("token");
  if (token && token.length) { //判断是否有token
    //验证token是否有效
    wx.request({
      url: "开发者服务器检验token的接口地址",
      method: "POST",
      header: {
        "content-type": "application/x-www-form-urlencoded"
      },
      data: {
        token
      },
      success: (res) => {
        if (res.status == "correct") {  //假设token正确
          //返回登录状态，存储到全局变量中，方便调用
          this.globalData.token = res.token;
        } else {
          that.login()  //重新登录，假设wx.login放到login()
        }
      }
    })
  } else {  //如果没有token
    that.login()  //重新登录，假设wx.login放到login()
  }
}

当然，如果你的登录态有效期以session_key为准，那么可以用wx.checkSession检查session_key有没有过期。wx.checkSession示例:

onLaunch: function() {
  wx.checkSession({
    success() {
      //session_key没过期，返回登录状态
    },
    fail() {
      // session_key过期，重新登录
    }
  })
}

Q&A

Q1：wx.login需要用户点击按钮授权吗？

A：不需要，这个行为是静默的，用户层面不会有感知。

Q2：wx.login返回的code只有5分钟的时效性，这样的好处是什么？

A：对于侵略者来说，想要在5分钟之内列举所有code，然后频繁请求开发者服务器试图获取真实用户信息，这无疑难度加大、容易被识别。

Q3：AppId和AppSecret都是隐私数据吗？会不会涉及安全风险？

A：AppId是公开信息，不会涉及安全风险，用户查询AppId的路径为「小程序右上角->小程序名称->更多资料->AppId」；AppSecret是隐私数据，不应该被公开泄露，一旦泄露需要到小程序后台重置。

本文作者：朱顺意

声明：本文为脚本之家专栏作者投稿，未经允许请勿转载。

微信小程序登录流程解析

热门文章

最新文章

相关课程

相关电子书

相关实验场景

推荐镜像