小程序登录功能简记

四月 15, 2019 2536

获取 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)
           }
         }
       })
     }
   })
 }

小结

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

查看评论