本篇目录:

  • 获取SessionKey
  • 微信登录流程
  • 时序图
  • 校验登录是否过期
  • 小结

我们在开发微信小程序时,有些时候需要进行用户的微信登录,以能够达到我们的一些需求,比如获取微信用户的信息等。而小程序在微信中是如何来实现微信登录功能的呢?

获取SessionKey

小程序和微信可以共用一套用户验证机制。

我们可以使用wx.login方法通过腾讯的服务器进行登录,此时会返回一个请求码(Resuest Code),不过这只是登录的第一步。

当返回请求码之后,需要访问https://api.weixin.qq.com域名下的某个URL进一步获取session_key和openid。其中,session_key是对数据进行加密签名的密钥,openid是当前用户的唯一标识。

此时我们就遇到了下面的问题:

  • 在小程序后台管理中设置的request域名是我们自己的,因此,小程序端是不能直接使用wx.request方法访问https://api.weixin.qq.com 域名下的 URL 的。
  • 由于session_key是用于加密的密钥,所以session_key是不应该保存在客户端(小程序端)的。

所以获取session_key和openid的任务应该是服务端处理的。

微信登录流程

根据上面的分析,我们可以将小程序登录的基本步骤梳理如下:

  1. 小程序使用wx.login方法获取Request Code;
  2. 小程序通过wx.request方法请求第三方服务器登录接口URL(需要在管理后台设置域名),请求的URL参数需要带Request Code;
  3. 第三方服务器程序获得Request Code后,与小程序的AppID、SECRET组合形成一个URL,该URL指向微信服务器,通过这个URL,从微信服务器获取session_key和openid;
    URL格式如下:

    https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
    AppID:小程序的 ID。
    SECRET:在小程序 ID 的下方的密码字符串,默认是隐藏的,点击右侧的“重置”链接,会得到 SECRET 字符串,在操作的过程中会要求用管理员微信扫描二维码。
    JSCODE:就是在小程序客户端通过 wx.login 方法获取的 Request Code 这个 URL 会返回如下内容。

  4. 第三方服务器程序需要自己产生一个session_id(最好位数长一些),并用这个session_id作为key,session_key和openid作为value,保存在第三方服务器中的Session中,最好设置一个较短的过期时间。因为wx.request通常只是为了获取某些与微信相关的数据,获取完后,就不需要session_key和openid了,因此并不需要永久登录;
  5. 将第三方服务器产生的session_id返回给小程序,并把session_id保存在小程序端的storage中;
  6. 每次使用wx.request方式时需要带上上面返回的session_id,以便能够在服务器端的Session中找到对应的session_key和openid。

时序图

微信登录时序图

其中,wx.login方法获取Request Code的代码如下:

1
2
3
4
5
6
7
8
9
10
wx.login({
success: function(res) {
if (res.code) {
//向第三方服务器发起网络请求,以便获取session_key和openid
console.log("获取用户代码成功:" + res.code);
} else {
console.log('获取用户登录态失败!' + res.errMsg)
}
}
});

校验登录是否过期

每次使用Request Code之前,通常都会调用wx.checkSession方法来校验一下Request Code是否过期,如果已经过期的话,需要重新调用wx.login来获取新的Request Code。

校验登录是否过期的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
checkSession: function () {
wx.checkSession({
success: function () {
console.log('Session未过期');
},
fail: function () {
//登录态过期
console.log('Session已经过期');
wx.login({
success: function (res) {
if (res.code) {
//发起网络请求
console.log("获取用户代码成功:" + res.code);
} else {
console.log('获取用户登录态失败!' + res.errMsg)
}
}
})
}
})
}

小结

通过上面的基本梳理和时序图的展示能够方便我们理解小程序中处理微信登录的全过程,方便我们以后的实际开发工作。