关于微信小程序登录的那些事


Posted in Javascript onJanuary 08, 2019

前言

最近团队在开发一款小程序,都是新手,一边看文档,一边开发。在开发中会遇到各种问题,今天把小程序登录这块的流程整理下,做个记录。

小程序的登录跟平时自己APP这种登录验证还不太一样,多了一个角色,那就是微信服务器。

关于微信小程序登录的那些事

根据微信官方提供的登录流程时序图可以清楚的了解小程序登录需要多少个步骤,下面我们来总结下:

  • 小程序启动,通过wx.login()获取code
  • 开发者服务器需要提供一个登录的接口,参数就是小程序获取的code
  • 登录接口收到code后,调用微信提供的接口进行code的验证
  • 得到验证结果,成功后能得到一个session_key和openid
  • 生成一个自定义的key, 将session_key和openid跟自定义的key关联起来
  • 将自定义的key返回给小程序
  • 每次请求都带上key, 后端根据key获取openid识别当前用户身份

首先code是微信给的,如果你随意生成code去验证肯定是无效的,只有微信给的code才有效。code传到开发者自己的服务后,再去问微信:

Hi 哥们,我这个code是有效的还是无效的啊?

微信会告诉你是有效还是无效,有效的情况下还会给你一个用户的标识,也就是openid,同时还会有一个sessionkey,也就是会话的key。sessionkey的有效期默认是2小时,当用户一直在使用小程序的话会自动刷新,这个是由微信这边来维护的。

注意:

  • 会话密钥 session_key 是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全,开发者服务器不应该把会话密钥下发到小程序,也不应该对外提供这个密钥。
  • 临时登录凭证 code 只能使用一次

所以我们要为session_key创建别名,这个别名关联的哪个用户只有我们自己知道,唯一需要做的工作就在这块。

我推荐2种方式来做关联:

第一种:随机生成key, 关联openid,存入redis中,当请求带入key,直接从redis中获取openid得到当前用户信息,这个其实也就是我们自己去维护了会话信息

第二种:采用JWT生成token,将openid绑定到token中,将token返回给小程序,请求的时候带上token,通过解析token得到用户信息。

下面我们以第二种方式来进行讲解,会贴上部分代码:

小程序中在app.js中的onLaunch方法中增加获取code方法,并且调用后端的登录接口获取token:

wx.login({
 success: function (res) {
 var code = res.code;
 if (code) {
  console.log('app启动获取用户登录凭证:' + code);
  let params = { "code": code };
  let result = config.requestHttp(config.url.userLogin, 'POST', params)
  result.then(res => {
  let data = res.data
  if (data.code == 200) {
  wx.setStorageSync("login_token", data.data.token);
  }
  }).catch(err => {
  console.log(err)
  });
 } else {
  console.log('获取用户登录态失败:' + res.errMsg);
 }
 }
})

userLogin接口则根据小程序的code去调用微信接口验证:

// 小程序获取SessionKey接口地址
String loginUrl = "https://api.weixin.qq.com/sns/jscode2session";
String url = loginUrl + "?appid=%s&secret=%s&grant_type=%s&js_code=%s";
url = String.format(url, appid, appSecret, grantType, param.getCode());
String result = restTemplate.getForObject(url, String.class);
Map<String, Object> map = JsonUtils.toBean(Map.class, result);

// 请求成功
if (map.containsKey("session_key")) {
 String openid = map.get("openid").toString();
 // 第一次保存到用户表,生成JWT TOKEN返回
}

小程序端需要将 wx.request()封装成一个通用的方法,所有跟后台交互都用这个方法来调用接口,我们可以在这个方法中设置登录之后获取的Token。这样每次请求都会将Token塞到请求头中,我们在网关中就可以获取这个Token进行解析验证。

//请求封装
function requestHttp(url, method, data) {
 //请求头设置
 var header = {
 Authorization: wx.getStorageSync("login_token")
 }

 return new Promise((resolve, reject) => {
 wx.request({
  url: config.home_config + url,
  data: data,
  header: header,
  method: method,
  success: (res => {
  if (res.data.code === 200) {
   resolve(res)
  } else {
   reject(res)
  }
  }),

  fail: (res => {
  reject(res)
  })
 })
 })
}

Zuul中进行验证:

RequestContext ctx = RequestContext.getCurrentContext();
 HttpServletRequest request = ctx.getRequest();
 String token = request.getHeader("Authorization");

 if (StringUtils.isBlank(token)) {
   ctx.setSendZuulResponse(false);
   ctx.set("isSuccess", false);
   ctx.setResponseBody(JsonUtils.toJson(Response.fail("非法请求【缺少Authorization】", ResponseCode.NO_AUTH_CODE)));
   ctx.getResponse().setContentType("application/json; charset=utf-8");
   return null;
 }

 // 验证Token是否有效
 JWTResult jwResult = JWTUtils.checkToken(token);
 if (!jwResult.isStatus()) {
   ctx.setSendZuulResponse(false);
   ctx.set("isSuccess", false);
   ctx.setResponseBody(JsonUtils.toJson(Response.fail(jwResult.getMsg(), jwResult.getCode())));
   ctx.getResponse().setContentType("application/json; charset=utf-8");
   return null;
 }

 ctx.addZuulRequestHeader("loginUserId", jwResult.getUid());
 return null;

验证成功后将用户ID设置到请求头中,传递给后端服务使用。

使用JWT必然有一个问题是Token的失效问题,我这边失效时间设置的为2个小时,正常的话用户打开小程序,使用不可能连续超过2个小时,登录的逻辑是在app.js中做的,只要下次进去token就会重新申请。不过这个也可以调整,比如稍微长一点。

核心就是用户的认证交给了微信,只要微信告诉我们认证成功了,我们就可以自己接管会话信息了。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js计算页面刷新的次数
Jul 20 Javascript
用Javascript实现Windows任务管理器的代码
Mar 27 Javascript
jquery 鼠标滑动显示详情应用示例
Jan 24 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 Javascript
js获取时间函数及扩展函数的方法
Oct 30 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
vue+axios实现登录拦截的实例代码
May 22 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
Vue 动态设置路由参数的案例分析
Apr 24 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 Javascript
聊聊JS ES6中的解构
Apr 29 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
Jan 08 #Javascript
关于React动态加载路由处理的相关问题
Jan 07 #Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 #Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 #Javascript
利用React Router4实现的服务端直出渲染(SSR)
Jan 07 #Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 #Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
Jan 07 #Javascript
You might like
重置版宣传动画
2020/04/09 魔兽争霸
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
析构函数与php的垃圾回收机制详解
2013/10/28 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
php Session无效分析资料整理
2016/11/29 PHP
PHP编程实现脚本异步执行的方法
2017/08/09 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
2016/05/20 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
vue实例的选项总结
2020/06/09 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
Python的垃圾回收机制深入分析
2014/07/16 Python
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
Python list与NumPy array 区分详解
2019/11/06 Python
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
麦当劳印度网上订餐:McDelivery
2020/03/16 全球购物
Java模拟试题
2014/11/10 面试题
经营目标管理责任书
2014/07/25 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技