微信小程序登录

klshige

2019-07-01

关注关注

概况描述

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

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

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

实现原理

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

微信小程序登录

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

微信小程序登录

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

微信小程序登录

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

微信小程序登录

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

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

实现

小程序端

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

微信小程序登录

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

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

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

微信小程序登录

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

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

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

微信小程序登录

接着带着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....

微信小程序 segmentfault