本文将详细的介绍微信小程序的登录流程以及在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.返回登录结果和用户信息到前台。

spring mvc+redis实现微信小程序登录的更多相关文章

  1. Spring Security 整合 微信小程序登录的思路探讨

    1. 前言 原本打算把Spring Security中OAuth 2.0的机制讲完后,用小程序登录来实战一下,发现小程序登录流程和Spring Security中OAuth 2.0登录的流程有点不一样 ...

  2. 基于Shiro,JWT实现微信小程序登录完整例子

    小程序官方流程图如下,官方地址 : https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html ...

  3. 微信小程序登录JAVA后台

    代码地址如下:http://www.demodashi.com/demo/12736.html 登录流程时序登录流程时序 具体的登录说明查看 小程序官方API 项目的结构图: springboot项目 ...

  4. Flask与微信小程序登录(后端)

    开发微信小程序时,接入小程序的授权登录可以快速实现用户注册登录的步骤,是快速建立用户体系的重要一步.这篇文章将介绍 python + flask + 微信小程序实现用户快速注册登录方案(本文主要进行后 ...

  5. 微信小程序登录方案

    微信小程序登录方案 登录程序 app.js 调用wx.login获取code 将code作为参数请求自己业务登录接口获取session_key 存储session_key 如果有回调执行回调 App( ...

  6. 微信小程序登录,获取code,获取openid,获取session_key

    微信小程序登录 wx.login(Object object) 调用接口获取登录凭证(code).通过凭证进而换取用户登录态信息,包括用户的唯一标识(openid)及本次登录的会话密钥(session ...

  7. 微信小程序登录对接Django后端实现JWT方式验证登录

    先上效果图 点击授权按钮后可以显示部分资料和头像,点击修改资料可以修改部分资料. 流程 1.使用微信小程序登录和获取用户信息Api接口 2.把Api获取的用户资料和code发送给django后端 3. ...

  8. 全栈项目|小书架|微信小程序-登录及token鉴权

    小程序登录 之前也写过微信小程序登录的相关文章: 微信小程序~新版授权用户登录例子 微信小程序-携带Token无感知登录的网络请求方案 微信小程序开通云开发并利用云函数获取Openid 也可以通过官方 ...

  9. Taro -- 微信小程序登录

    Taro微信小程序登录 1.调用Taro.login()获取登录凭证code: 2.调用Taro.request()将code传到服务器: 3.服务器端调用微信登录校验接口(appid+appsecr ...

随机推荐

  1. maven jsp out.print()request.getParameter() 爆红

    如图: 解决方案: 在pom文件中添加依赖: <!-- https://mvnrepository.com/artifact/javax.servlet.jsp/jsp-api -->&l ...

  2. java-随机生成用户名(中文版及英文版)

    开发中遇到用户名随机生成的问题,总结了两个(中文版和英文版),相关方法在此,方便直接调用. 如下: //自动生成名字(中文) public static String getRandomJianHan ...

  3. RabbitMQ Linux(Redhat6.5)安装(二 )

    一.安装erlang 由于RabbitMq的linux运行环境需要erlang环境,所以需要先安装erlang: 1.erlang下载: http://erlang.org/download/(我下载 ...

  4. 关于Spring的HibernateTemplate的findByExample方法使用时的一点注意。

    此前我们已经介绍了HibernateTemplate的使用配置方法,但是对其使用没有仔细说明.因为最近比较忙,我先不去介绍,而是重点说明一下容易引起问题的findByExample方法. 我尝试反编译 ...

  5. Nginx负载均衡和反向代理

    1:反向代理 代理就是中介,那有反向代理就有正向代理,两者的区别是什么嘞? 正向代理隐藏真实客户端,服务端不知道实际发起请求的客户端.,proxy和client同属一个LAN,对server透明: 反 ...

  6. 用Django做一个团队介绍

    所用工具 Pycharm 社区版 Django 2.x Python 3.6.4 总目录 settings中的设置 总的路由设置 templates中的index.html文件 <!DOCTYP ...

  7. python_函数默认参数设计

    >>> def printMax(a,b): if a>b: print(a,'is the max') else: print(b,'is hte max') >> ...

  8. C Primer Plus 第8章 字符输入/输出和验证输入 编程练习

    1. #include <stdio.h> int main(){ char ch; int ct = 0; while ((ch=getchar()) != EOF) ct++; pri ...

  9. 数据结构和算法总结(一):广度优先搜索BFS和深度优先搜索DFS

    前言 这几天复习图论算法,觉得BFS和DFS挺重要的,而且应用比较多,故记录一下. 广度优先搜索 有一个有向图如图a 图a 广度优先搜索的策略是: 从起始点开始遍历其邻接的节点,由此向外不断扩散. 1 ...

  10. Spring Cloud Config 分布式配置中心使用教程

    一.简介 在分布式系统中,由于服务数量巨多,为了方便服务配置文件统一管理,实时更新,所以需要分布式配置中心组件.在Spring Cloud中,有分布式配置中心组件spring cloud config ...