一步步教会你微信小程序的登录鉴权


Posted in Javascript onApril 09, 2018

前言

为了方便小程序应用使用微信登录态进行授权登录,微信小程序提供了登录授权的开放接口。乍一看文档,感觉文档上讲的非常有道理,但是实现起来又真的是摸不着头脑,不知道如何管理和维护登录态。本文就来手把手的教会大家在业务里如何接入和维护微信登录态,下面话不多说了,来一起看看详细的介绍吧。

接入流程

这里官方文档上的流程图已经足够清晰,我们直接就该图展开详述和补充。

一步步教会你微信小程序的登录鉴权 

首先大家看到这张图,肯定会注意到小程序进行通信交互的不止是小程序前端和我们自己的服务端,微信第三方服务端也参与其中,那么微信服务端在其中扮演着怎样的角色呢?我们一起来串一遍登录鉴权的流程就明白了。

1. 调用wx.login生成code

wx.login()这个API的作用就是为当前用户生成一个临时的登录凭证,这个临时登录凭证的有效期只有五分钟。我们拿到这个登录凭证后就可以进行下一步操作:获取 openid 和 session_key

wx.login({
 success: function(loginRes) {
 if (loginRes.code) {
  // example: 081LXytJ1Xq1Y40sg3uJ1FWntJ1LXyth
 }
 }
});

2. 获取openid和session_key

我们先来介绍下openid,用过公众号的童鞋应该对这个标识都不陌生了,在公众平台里,用来标识每个用户在订阅号、服务号、小程序这三种不同应用的唯一标识,也就是说每个用户在每个应用的openid都是不一致的,所以在小程序里,我们可以用openid来标识用户的唯一性。

那么session_key是用来干嘛的呢?有了用户标识,我们就需要让该用户进行登录,那么 session_key 就保证了当前用户进行会话操作的有效性,这个session_key是微信服务端给我们派发的。也就是说,我们可以用这个标识来间接地维护我们小程序用户的登录态,那么这个session_key是怎么拿到的呢?我们需要在自己的服务端请求微信提供的第三方接口 https://api.weixin.qq.com/sns/jscode2session ,这个接口需要带上四个参数字段:

参数
appid 小程序的appid
secret 小程序的secret
js_code 前面调用wx.login派发的code
grant_type 'authorization_code'

从这几个参数,我们可以看出,要请求这个接口必须先调用wx.login()来获取到用户当前会话的code。那么为什么我们要在服务端来请求这个接口呢?其实是出于安全性的考量,如果我们在前端通过request调用此接口,就不可避免的需要将我们小程序的appid和小程序的secret暴露在外部,同时也将微信服务端下发的session_key暴露给“有心之人”,这就给我们的业务安全带来极大的风险。除了需要在服务端进行session_key的获取,我们还需要注意两点:

  1. session_key和微信派发的code是一一对应的,同一code只能换取一次session_key。每次调用wx.login() ,都会下发一个新的code和对应的session_key,为了保证用户体验和登录态的有效性,开发者需要清楚用户需要重新登录时才去调用wx.login()
  2. session_key是有失效性的,即便是不调用wx.login,session_key也会过期,过期时间跟用户使用小程序的频率成正相关,但具体的时间长短开发者和用户都是获取不到的
function getSessionKey (code, appid, appSecret) {
 var opt = {
 method: 'GET',
 url: 'https://api.weixin.qq.com/sns/jscode2session',
 params: {
  appid: appid,
  secret: appSecret,
  js_code: code,
  grant_type: 'authorization_code'
 }
 };
 return http(opt).then(function (response) {
 var data = response.data;
 if (!data.openid || !data.session_key || data.errcode) {
  return {
  result: -2,
  errmsg: data.errmsg || '返回数据字段不完整'
  }
 } else {
  return data
 }
 });
}

3. 生成3rd_session

前面说过通过 session_key 来“间接”地维护登录态,所谓间接,也就是我们需要 自己维护用户的登录态信息 ,这里也是考虑到安全性因素,如果直接使用微信服务端派发的session_key来作为业务方的登录态使用,会被“有心之人”用来获取用户的敏感信息,比如wx.getUserInfo()这个接口呢,就需要session_key来配合解密微信用户的敏感信息。

那么我们如果生成自己的登录态标识呢,这里可以使用几种常见的不可逆的哈希算法,比如md5、sha1等,将生成后的登录态标识(这里我们统称为'skey')返回给前端,并在前端维护这份登录态标识(一般是存入storage)。而在服务端呢,我们会把生成的skey存在用户对应的数据表中,前端通过传递skey来存取用户的信息。

可以看到这里我们使用了sha1算法来生成了一个skey:

const crypto = require('crypto');
return getSessionKey(code, appid, secret)
 .then(resData => {
 // 选择加密算法生成自己的登录态标识
 const { session_key } = resData;
 const skey = encryptSha1(session_key);
 });
 
function encryptSha1(data) {
 return crypto.createHash('sha1').update(data, 'utf8').digest('hex')
}

4. checkSession

前面我们将skey存入前端的storage里,每次进行用户数据请求时会带上skey,那么如果此时session_key过期呢?所以我们需要调用到wx.checkSession()这个API来校验当前session_key是否已经过期,这个API并不需要传入任何有关session_key的信息参数,而是微信小程序自己去调自己的服务来查询用户最近一次生成的session_key是否过期。如果当前session_key过期,就让用户来重新登录,更新session_key,并将最新的skey存入用户数据表中。

checkSession这个步骤呢,我们一般是放在小程序启动时就校验登录态的逻辑处,这里贴个校验登录态的流程图:

一步步教会你微信小程序的登录鉴权 

下面代码即校验登录态的简单流程:

let loginFlag = wx.getStorageSync('skey');
if (loginFlag) {
 // 检查 session_key 是否过期
 wx.checkSession({
 // session_key 有效(未过期)
 success: function() {
  // 业务逻辑处理
 },
 
 // session_key 过期
 fail: function() {
  // session_key过期,重新登录
  doLogin();
 }
 });
) else {
 // 无skey,作为首次登录
 doLogin();
}

5. 支持emoji表情存储

如果需要将用户微信名存入数据表中,那么就确认数据表及数据列的编码格式。因为用户微信名可能会包含emoji图标,而常用的UTF8编码只支持1-3个字节,emoji图标刚好是4个字节的编码进行存储。

这里有两种方式(以mysql为例):

1.设置存储字符集

在mysql5.5.3版本后,支持将数据库及数据表和数据列的字符集设置为 utf8mb4 ,因此可在 /etc/my.cnf 设置默认字符集编码及服务端编码格式

// my.cnf

[client]
default-character-set=utf8mb4
[mysql]
default-character-set=utf8mb4
[mysqld]
character-set-client-handshake = FALSE
character-set-server=utf8mb4
collation-server=utf8mb4_unicode_ci

设置完默认字符集编码及服务端字符集编码,如果是对已经存在的表和字段进行编码转换,需要执行下面几个步骤:

设置数据库字符集为 utf8mb4

ALTER DATABASE 数据库名称 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci;

设置数据表字符集为 utf8mb4

ALTER TABLE 数据表名称 CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

设置数据列字段字符集为 utf8mb4

ALTER TABLE 数据表名称 CHANGE 字段列名称 VARCHAR(n) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

这里的 COLLATE 指的是排序字符集,也就是用来对存储的字符进行排序和比较的, utf8mb4 常用的collation有两种: utf8mb4_unicode_ci 和 utf8mb4_general_ci ,一般建议使用 utf8mb4_unicode_ci ,因为它是基于标准的 Unicode Collation Algorithm(UCA) 来排序的,可以在各种语言进行精确排序。这两种排序方式的具体区别可以参考: What's the difference between utf8_general_ci and utf8_unicode_ci

2.通过使用sequelize对emoji字符进行编码入库,使用时再进行解码

这里是sequelize的配置,可参考 Sequelize文档

{
 dialect: 'mysql', // 数据库类型
 dialectOptions: { 
  charset: 'utf8mb4',
  collate: "utf8mb4_unicode_ci"
 },
}

最后

前面讲了微信小程序如何接入微信登录态标识的详细流程,那么如何获取小程序中的用户数据以及对用户敏感数据进行解密,并保证用户数据的完整性,我将在下一篇文章给大家做一个详细地介绍。

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

Javascript 相关文章推荐
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 Javascript
用jQuery模拟页面加载进度条的实现代码
Dec 19 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
JS实现留言板功能
Jun 17 Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 Javascript
javascript的this关键字详解
May 20 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
vue组件详解之使用slot分发内容
Apr 09 #Javascript
vue组件中使用props传递数据的实例详解
Apr 08 #Javascript
Vue入门之animate过渡动画效果
Apr 08 #Javascript
vue组件与复用详解
Apr 08 #Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 #Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 #Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 #Javascript
You might like
分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)
2014/01/30 PHP
php实现爬取和分析知乎用户数据
2016/01/26 PHP
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
如何检测JavaScript的各种类型
2016/07/30 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
2020/02/03 Javascript
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
Python元字符的用法实例解析
2018/01/17 Python
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
Python3中详解fabfile的编写
2018/06/24 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
使用python接入微信聊天机器人
2020/03/31 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
小学教师国培感言
2014/02/08 职场文书
幼儿教师寄语集锦
2014/04/03 职场文书
法学专业求职信
2014/07/15 职场文书
2015年发展党员工作总结报告
2015/03/31 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery
手写实现JS中的new
2021/11/07 Javascript