spring mvc框架实现微信小程序登录（前台+后台）

本文将详细的介绍微信小程序的登录流程以及在ssm框架下如何实现小程序用户登录（日后补上过滤器的配置。。。）

登录流程概要

主要的登录流程可以参考官方提供的一张流程图：

 

1.微信前台页面：

在微信版本更新之后，提高了安全机制，我们需要为用户提供一个授权按钮，让用户同意授权，页面中的button必须包含 open-type="getUserInfo"这个属性：

一般授权页面如下：

    <form bindsubmit="bindSave">
      <wxc-button type="success" size='large' btn-style='margin-top:10%;' open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo"
        value="同意授权登录"></wxc-button>
      <view style='width:100%;padding-left:30rpx;font-size: 30rpx;margin-top:50rpx;'>1. 同意当前小程序获取我的微信头像；</view>
      <view style='width:100%;padding-left:30rpx;font-size: 30rpx;margin-top:20rpx;'>2. 同意当前小程序获取我的微信昵称等其他信息；</view>
      <wxc-button type="danger" size='large' btn-style='margin-top:30rpx;' bindtap='rejectLogin' value="拒绝授权"></wxc-button>
    </form>

2.登录前台实现

当用户登录时，我们先去判断小程序缓存中用户的token存不存在：

　　-----如果存在，将token传到后台去检查redis缓存中的用户信息是否失效：

　　　　-----如果失效，前台将用户信息删除，重新调用登录接口。

　　　　-----未失效，返回原页面，后台更新缓存失效时间。

　　-----如果不存在，前台调用官方提供的小程序登录接口：wx.login(),获得它返回的code：

　　　　-----code获取成功，前台调用wx.getSetting()获取授权以及用户的授权配置：

　　　　　　-----用户授权成功，前台调用wx.getUserInfo()获取encryptedData（密文）和 iv（偏移向量）

 　　　　　　　　------以上都获取成功后，我们将code，encryptedData和iv全部传到后台。

　　　　　　　  （code用来换取openid和sessionKey,encryptedData和iv用来获得并解密用户信息）

 　　　　　　　　　　-----如果后台获取用户信息成功，返回token和用户信息到前台，前台小程序在缓存中更新token和用户信息。

　　　　　　　　　　 登录成功。

 　　　　-----------------------任意一个步骤失败，提示用户无法登录。

 

微信小程序前台登录函数如下（下面这个函数较长，可以拆分，看的更清晰）：

  login: function () {
    let that = this;
    let token = wx.getStorageSync("token");
    console.log("进入页面登录开始取token"+token);
    if (token) {
      console.log("如果token存在");
      wx.request({
        url: urlMangerData.api0_check_token,///wxma/user/check-token
        data: {
          token: token
        },
        success: function (res) {
          console.log("前台token存在，校验token后返回值"+JSON.stringify(res));
          //如果后台缓存已经不在了
          if (!res.data.success) {
            console.log("如果后台缓存已经失效了,小程序清空token和userinfo和openid");
            wx.removeStorageSync("token");
            wx.removeStorageSync("userInfo");
            that.login();
          } else {
            console.log("后台缓存中的信息也存在,直接返回");
            // 回到原来的地方
            wx.navigateBack();
          }
        }
      });
    }
    console.log("如果token不存在");
    //小程序登录,
    wx.login({
      success: function (res) {
        if(res.code){          
      wx.getSetting({
        success: res2 => {
          if (res2.authSetting["scope.userInfo"]) {
          wx.getUserInfo({
            success:datas=>{
              console.log("开始获取code和一些加密过的用户信息" + res.code);
              console.log("datas.encryptedData" + datas.encryptedData);
              wx.request({
                url: urlMangerData.api0_loginAuth,
                data: {
                  code: res.code,
                  encryptedData: datas.encryptedData,
                  iv: datas.iv
                },
                header: {
                  'content-type': 'application/json'
                },
                success: function (res) {
                  console.log("后台成功后得到返回值" + res.data.code);
                  if(res.data.code != 0) {
                    console.log("后台登录错误")
                    wx.hideLoading();
                    wx.showModal({
                      title: "提示",
                      content: "无法登录，请重试",
                      showCancel: false
                    });
                    return;
                  }
                  console.log("存储用户信息token" + res.data.token);
                  console.log("存储用户信息userInfo" + JSON.stringify(res.data.wxMaUserInfoExtends));
                  wx.setStorageSync("token", res.data.token);
                  wx.setStorageSync("userInfo", res.data.wxMaUserInfoExtends);
                  wx.setStorageSync("user_id", res.data.wxMaUserInfoExtends.user_id);
                  wx.navigateBack();           
              }
            });//request
            }
      })//getuserinfo
    }
  }
 })//getsetting
  }
}//success
})
}

再贴一下第一次登录时，控制台打印信息：

3.登录后台实现

当用户登录时，先检查前台传来的token在redis中是否存在：存在即更新redis中用户信息的失效时间，不存在则返回登录失效信息。

前台获得失效信息后，正常去调用获取用户信息接口，传入code，encryptedData和iv：

controller层：

    @RequestMapping(value = "/loginAuth", method = RequestMethod.GET, produces = "application/json; charset=utf-8")
    public String loginAuth(String code,String encryptedData,String iv) throws WxErrorException {
        if (StringUtils.isBlank(code)) {
            return "empty jscode";
        }
        //处理登录授权 获得openid和sessionkey，生成userid 并将session存到缓存中
        WxMaAuthResult result = 
        weixinMaService.dealLoginAuth(code,encryptedData,iv);
        return JsonUtils.objectToJson(result);
        
    }

service层：

    /**
     *  处理小程序登录授权
     */
    @Override
    public WxMaAuthResult dealLoginAuth(String  code,String data,String iv) {
        WxMaJscode2SessionResult session =new WxMaJscode2SessionResult();
        //调微信官方接口获得sesssion_key openid存到 session对象里
        try {
　　　　　　  //code换取sessionKey
            session = wxMaService.getUserService().getSessionInfo(code);
            this.logger.info(session.getSessionKey());
            this.logger.info(session.getOpenid());

        } catch (WxErrorException e) {
            this.logger.error("获得sessionKey失败", e);
        }
        WxMaAuthResult wxMaAuthResult = new WxMaAuthResult();
　　　　 //该类用来存储用户信息
        WxMaUserInfoExtends wxMaUserInfoExtends =  new WxMaUserInfoExtends();
        WxMaUserInfo wxMaUserInfo = new WxMaUserInfo();
        //暂时写死失效时间
        int expire=3600;        
        String sessionKey = session.getSessionKey();
        String rawData = StringEscapeUtils.unescapeHtml4(data);
        // 解密用户信息
        try {
　　　　　　　//sessionkey data iv 解密用户信息
            wxMaUserInfo = this.wxMaService.getUserService().getUserInfo(sessionKey, data, iv);
        } catch (Exception e) {
            // TODO Auto-generated catch block
            logger.error("解密用户信息失败");
            e.printStackTrace();
        }
        BeanUtils.copyProperties(wxMaUserInfo, wxMaUserInfoExtends);
        String third_session = Base64UUID.ramdomID();
        wxMaAuthResult.setToken(third_session);
        String user_id = Base64UUID.ramdomID();
        wxMaUserInfoExtends.setUser_id(user_id);
        //通过openid获取或新增用户信息
        if(wxMaUserMapper.countAny(session.getOpenid())>0 ){
            //存在 数据库更新
            wxMaUserMapper.addWxMaUser(wxMaUserInfoExtends);
            //这里是将用户信息存到redis
            wxMaAuthSessionStorage.addWxMaSession(expire,third_session,wxMaUserInfoExtends);
            //不把openId传到前台
            wxMaUserInfo.setOpenId("");
            wxMaAuthResult.setIsReg(true);
            wxMaAuthResult.setSuccess(true);
            wxMaAuthResult.setWxMaUserInfoExtends(wxMaUserInfoExtends);
        } else {            
            //不存在 数据库保存信息
            wxMaUserMapper.addWxMaUser(wxMaUserInfoExtends);       
            wxMaAuthSessionStorage.addWxMaSession(expire,third_session,wxMaUserInfoExtends);            
            wxMaUserInfo.setOpenId("");
            wxMaAuthResult.setSuccess(true);
            wxMaAuthResult.setIsReg(false);
            wxMaAuthResult.setWxMaUserInfoExtends(wxMaUserInfoExtends);
        }
        return wxMaAuthResult;
    }

实体类：

public class WxMaUserInfoExtends{
    
    private String user_id;

      private String openId;
      private String nickName;
      private String gender;
      private String language;
      private String city;
      private String province;
      private String country;
      private String avatarUrl;
      private String unionId;
      private Date create_date;
    
    ...
}

public class WxMaAuthResult extends WxMaJscode2SessionResult{

    private String code;

    private String token;
    
    private int expiresIn = -1;
    
    Boolean isReg = false; //是否保存过用户信息
    
    private boolean success;
    
    private WxMaUserInfoExtends wxMaUserInfoExtends;

    ...
    
}

注：还有一些是api提供的。

redis存取方法：

　　 @Autowired
    private JedisClient jedisClient;
    /**
     * 存放token和用户信息
     */
    //内部事务回滚不影响外部事务
    @Transactional(propagation = Propagation.REQUIRES_NEW)
    @Override
    public void addWxMaSession(int expire,String token,WxMaUserInfoExtends wxMaUserInfoExtends) {
        String json = JsonUtils.objectToJson(wxMaUserInfoExtends);
        try {
            jedisClient.set(token, json);
            jedisClient.expire(token, expire);        
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
　　//从缓存中获取用户信息
    @Override
    public WxMaAuthResult getWxMaSessionBy3rdKey(String token) {
        WxMaAuthResult wxMaAuthResult = new WxMaAuthResult();
        try {
            String json = jedisClient.get(token);
            if(json == null) {
                wxMaAuthResult.setSuccess(false);
                return wxMaAuthResult;
            }
            wxMaAuthResult.setSuccess(true);
            WxMaUserInfoExtends wxMaUserInfoExtends= JsonUtils.jsonToPojo(json, WxMaUserInfoExtends.class);
            wxMaAuthResult.setWxMaUserInfoExtends(wxMaUserInfoExtends);
            return wxMaAuthResult;
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            wxMaAuthResult.setSuccess(false);
            return wxMaAuthResult;
        }
        
    }

 

注：这里使用了binarywang（一个github上的开源开发者）提供的API，该API封装了调用微信小程序官方接口的方法，并提供了一些小程序登录信息和用户信息的实体类，非常方便，有需要可以下载下来用：https://github.com/binarywang

后台大体流程：

1.我们用code去换取sessionKey和openId，再通过sessionKey,encryptedData和iv来解密用户信息（解密过程已经封装好了）。

2.生成一个随机字符串，将它作为key（token）,用户信息作为value存入redis缓存并设置或更新失效时间。

3.返回登录结果和用户信息到前台。