spring mvc实现微信小程序登录(前台+后台)

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

登录流程概要

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

spring mvc实现微信小程序登录(前台+后台)_第1张图片

 

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>

spring mvc实现微信小程序登录(前台+后台)_第2张图片

2.登录前台实现

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

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

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

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

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

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

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

         ------以上都获取成功后,我们将codeencryptedData和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
})
}

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

spring mvc实现微信小程序登录(前台+后台)_第3张图片

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.返回登录结果和用户信息到前台。

 

转载于:https://www.cnblogs.com/xjx199403/p/10785356.html

你可能感兴趣的:(spring mvc实现微信小程序登录(前台+后台))