概况描述

后台使用Spring boot,部分功能需要在小程序上实现。

我们的后台是有权限验证的,所以需要用户登录才能调用后端的API。所以,小程序端就需要登录后端。

本文实现了微信小程序的登录来完成自己服务器后端的登录功能。

实现原理

首先,我们需要登录小程序,用微信对其授权,然后带着授权的状态进行后端的登录。我们来看一下微信官方提供给我们的时序图:

clipboard.png

我们看到,最开始会调用wx.login以获取code,然后携带获取的code,去请求后我们的后端的。

clipboard.png

然后,我们需要在后端,使用获取的code和小程序的appId以及secret,共同请求微信接口,实现授权,然后微信会返回给我们openIdsession_key

clipboard.png

接着,我们需要将openIdsession_key进行保存,就和我们原来后端的登录做法一样,对登录的用户进行session存储,然后再登录的时候,去session中请求,看是否存在用户信息,以达到验证登录的目的。

clipboard.png

这之后,我们就可以带着登录的状态去请求后端的API了。

大致的原理知道了,我们就去实现一下登录的过程。

实现

小程序端

首先我们要知道一点,如果要验证你是哪个用户,就需要微信进行授权。微信给我们提供了比较方便的解决办法。

clipboard.png

button中有这么一个属性:open-type,通过他我们可以直接去获取用户的微信信息。

<button open-type='getUserInfo' bindgetuserinfo='doLogin'>登录</button>

open-type设置为getUserInfo,然后再使用bindgetuserinfo去触发登录的方法,这个函数会返回用户的信息。

clipboard.png

然后,就是调用wx.login()来获取code

    wx.login({
      success: function(res) {
        console.log(res)
      }
    })

当微信端登录成功的时候,我们就会获取到相应的code,这是用户的临时登录凭证,每次登录都会不同,过一段时间也会失效:

clipboard.png

接着带着code去请求我们的后端:

    wx.login({
      success: function(res) {
        console.log(res)
        
        // 获取登录的临时凭证
        var code = res.code;

        // 调用后台,获取session_key,openid
        wx.request({
          url: 'http://localhost:8080/user/wxLogin?code=' + code,
          method: 'POST',  
        })
      }
    })

好了,现在我们需要一个支撑微信小程序登录的后台了。

后端

控制器:

    /**
     * 微信登录
     * @param code  登录临时凭证code
     */
    @PostMapping("/wxLogin")
    public voidwxLogin(String code) {
        userService.wxLogin(code);
    }

service:

    public void wxLogin(String code) {
        String url = "https://api.weixin.qq.com/sns/jscode2session?" +
                "appid=APPID&" +
                "secret=SERECT&" +
                "js_code=" + code + "&" +
                "grant_type=authorization_code";

        logger.debug("请求微信api,进行登录授权,获取session_key和openid");
        String jsonString = restTemplate.getForObject(url, String.class);
        JSONObject jsonObject = JSONObject.parseObject(jsonString);

        logger.debug("获取openid,进行存储");
        String openid = jsonObject.get("openid").toString();
        httpSession.setAttribute("openid", openid);
    }

因为这里,对于同一个用户而言,openid是相同的,所以,当下次再来请求的时候,我们只需要获取它,就能判断是否登录了。

后面,对于其他请求的处理,还需要涉及到拦截器,但是原理和之前一样,这里就不做赘述。


官方参考:
https://developers.weixin.qq....
https://developers.weixin.qq....
https://developers.weixin.qq....
https://developers.weixin.qq....
https://developers.weixin.qq....

本文固定链接: http://www.js-code.com/weixin/weixin_46356.html