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


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 相关文章推荐
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
Aug 03 Javascript
javascript小数计算出现近似值的解决办法
Feb 06 Javascript
jquery调用wcf并展示出数据的方法
Jul 07 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 Javascript
详解前后端分离之VueJS前端
May 24 Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 Javascript
老生常谈JS中的继承及实现代码
Jul 06 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 Javascript
js实现网页随机验证码
Oct 19 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
那些年一起学习的PHP(三)
2012/03/22 PHP
PHP的PSR规范中文版
2013/09/28 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
2017/12/09 Javascript
angularjs实现的购物金额计算工具示例
2018/05/08 Javascript
详解如何使用webpack打包多页jquery项目
2019/02/01 jQuery
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
python使用三角迭代计算圆周率PI的方法
2015/03/20 Python
django通过ajax发起请求返回JSON格式数据的方法
2015/06/04 Python
Django中Model的使用方法教程
2018/03/07 Python
python如何生成各种随机分布图
2018/08/27 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
用canvas显示验证码的实现
2020/04/10 HTML / CSS
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
美国礼品卡交易网站:Cardpool
2018/08/27 全球购物
一道写SQL的面试题和答案
2013/11/19 面试题
什么是托管函数?托管函数有什么用?
2014/06/15 面试题
2014年涉外离婚协议书范本
2014/11/20 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang