小程序必备逻辑------登录_微信小程序登录逻辑

前言

小程序登录，官方是这么解释的,通过微信官方提供的登录能力方便地获取微信提供的用户身份标识，快速建立小程序内的用户体系，简单的说，就是先调用微信登录，然后根据返回值，设计自己的用户体系，自定义自己的登录态，废话不多了，开干~

登录

首先，先贴上官方提供的流程图，如下所示：

OK，有了流程图，接下来，咱们就按照流程图一步步往下走，第一步小程序调用wx.login，代码如下：

        wx.login({
          success (res) {
            if (res.code) {
				
            } else {
              console.log('登录失败！' + res.errMsg)
            }
          }
        })
1
2
3
4
5
6
7
8
9

这时候，接口会返回一个code的值，下一步需要把这个code值传递给自己的服务端，所以呢，咱们就需要有个服务端，我为了更好的给大家演示，就用koa简单写了个接口，具体逻辑后续我会进行讲解，现在咱们先把调用接口逻辑写上，小程序代码如下：

        wx.login({
          success (res) {
            if (res.code) {
              // --------------------------------------- newly added start
              //发起网络请求
              wx.request({
                url: 'http://localhost:3000/login',
                data: {
                  code: res.code
                },
                success (res) {
                  console.log(res)
                }
              })
              // --------------------------------------- newly added end
            } else {
              console.log('登录失败！' + res.errMsg)
            }
          }
        })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

可以看出，小程序向我写的一个服务(http://localhost:3000/login)发起了一个请求，并把code传递了过去，那么拿到code值，咱们需要做什么处理呢？很简单，流程图上也写的很详细，就是服务端把code，appid，appSecret提供给微信服务器，微信服务器做检验。服务代码如下所示：

const Koa = require('koa');
const request = require('request');
const app = new Koa();

app.use(async ctx => {
    if (ctx.path === '/login') {
        const code = ctx.query.code
        const appid = '小程序的appid'
        const appSecret = '小程序的秘钥'
        const body = await request(`https://api.weixin.qq.com/sns/jscode2session?appid=${appid}&secret=${appSecret}&js_code=${code}&grant_type=authorization_code`, function(error,response,body){
            /*判断请求是否成功*/
            if (!error && response.statusCode == 200) {
                return body;
            }
        })
        ctx.body = body
    }
});

app.listen(3000);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

以上代码主要逻辑就是给微信发一个请求，请求参数分别是appid，secret，js_code，grant_type，具体含义如下所示：

• appid就是小程序的appid
• secret是小程序的秘钥，想要获取这个值就需要大家自行登录微信公众平台生成，如下图所示
  
  由于我生成过了，所以AppSecret那一栏显示的是重置，原始值是生成
• js_code就是小程序传递过来的code的值
• grant_type指的是授权类型，此处只需填写 authorization_code

请求成功后，微信会给咱们返回一个openid和session_key，注意哦，为了安全，这两个值是不能返给小程序的，我这里只是为了看下效果，所以直接返给小程序，正确的处理逻辑应该是拿到这个值后，生成属于自己业务系统的用户体系，并把自定义登录态返回给小程序。

接下来操作权就又交给小程序了，小程序需要把这个自定义登录态存到本地仓库，代码如下所示：

        wx.login({
          success (res) {
            if (res.code) {
              //发起网络请求
              wx.request({
                url: 'http://localhost:3000/login',
                data: {
                  code: res.code
                },
                success (res) { 
              	  // --------------------------------------- newly added start
              	  // 假设，返回的登录态属性名为token
              	  cosnt token = res.data.token
              	  wx.setStorageSync('token', token)
              	  // --------------------------------------- newly added end
                }
              })
            } else {
              console.log('登录失败！' + res.errMsg)
            }
          }
        })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

存在本地之后，按照流程图，就是以后的所有的请求都要带上这个token，目的就是在后续业务逻辑中前后端交互时识别用户身份。

截止目前，咱们的登录还差最后一步，就是登录并不需要每次都去登录，只需要检验登录态即可，主要检验以下三部分：

• 本地token是否存在
• session_key的有效性
• 校验token的有效性

代码如下所示：

async function checkHasLogined() {
  const token = wx.getStorageSync('token')
  if (!token) {
    return false
  }
  // 判断小程序用户登录态
  const loggined = await checkSession()
  if (!loggined) {
    wx.removeStorageSync('token')
    return false
  }
  // 检验token
  const checkTokenRes = await checkToken(token) // 自己的检验服务
  if (checkTokenRes.code != 0) {
    wx.removeStorageSync('token')
    return false
  }
  return true
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

有了这段逻辑，咱们就可以完美的判断出是否需要登录了~

OK，大功告成，以上的就是登录的所有逻辑了，希望能给大家带来帮助，如有问题请需大家多多指教，thank you~