微信jssdk踩坑之签名错误invalid signature


Posted in Javascript onMay 19, 2020

最近做公众号网页开发,使用微信 jssdk 页面签名时 IOS 中一直报错,这才刚开始就被这只拦路虎拦住了,报错如下:

微信jssdk踩坑之签名错误invalid signature

然而 Android 和开发者工具中好得很,没有任何问题:

微信jssdk踩坑之签名错误invalid signature

既然提示 签名非法 ,那就是签名有问题咯,但是同样的接口,为什么Android没问题?是真是假还是用官方的签名校验工具验证下:

微信jssdk踩坑之签名错误invalid signature

微信jssdk踩坑之签名错误invalid signature

生成的签名完全没有问题,这就奇怪了,按照网上说的 url 改成如下方式也不行:

url = window.location.href.split('#')[0]

突然看到网上有人说是因为 SPA 的原因,经过几番测试,问题锁定在了 SPA 。先来解释下为什么会这样,我们使用 Vue Router 切换页面时,底层使用的是 pushState 技术,这是 H5 的一个新特性,虽然表面上看页面的 path 变了,内容也换了,但是页面是没有刷新的。

现在知道问题出在哪里,再来实际确认一下。首先进入项目的首页,地址是 https://www.abc.com/weixin/quan?rr=234wfwf ,然后点击进入我们要分享的页面,这时候会提示 invalid signature ,这时jssdk是配置失败的,分享出去的就是原始的页面链接,然而问题出现了:

微信jssdk踩坑之签名错误invalid signature

分享后的链接仍然是首页进入的链接,这是微信的BUG啊,原来在微信的网页中不支持 pushState ,这就导致我们在jssdk从配置时传入的 urlwindow.location.href 得到)和微信识别到的不一样,这时候在分享的页面刷新一下,配置就会正常。

后面再看官方文档时也提到了这一点:

微信jssdk踩坑之签名错误invalid signature

然而我的Android没这个问题,iOS反而出现了这个问题(IOS版本13.3.1,微信版本7.0.9,jssdk 1.6)

如何解决

在跳转到要分享的页面时,不用 pushState ,在 Vue router 中就是不用 push 方式跳转,方式如下:

window.location.href = 要跳转的链接
// _this.$router.push({
// …
// })

既然 SPA 在微信中只认第一个页面的 path ,那我们就在第一次进入页面时记录下 path ,其他页面用这个 path 。我们在 App.vue 或者 main.js 中记录下这个 path

window.sessionStorage.setItem('firstEntryUrl', window.location.href)

然后在需要分享的页面,使用这个 path

let url = window.location.href.split('#')[0]
if (utils.isIOS() && window.sessionStorage.getItem('firstEntryUrl')) {
	url = window.sessionStorage.getItem('firstEntryUrl').split('#')[0]
}

经测试,上述两种方法都能完美解决。

到此这篇关于微信jssdk踩坑之签名错误invalid signature的文章就介绍到这了,更多相关微信jssdk 签名错误 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript去除空格的几种方法
Oct 03 Javascript
帮助避免错误的Javascript陷阱清单
May 31 Javascript
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
jQuery操作checkbox选择(list/table)
Apr 07 Javascript
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
jQuery插件分享之分页插件jqPagination
Jun 06 Javascript
webpack常用配置项配置文件介绍
Nov 07 Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 Javascript
Vue2实时监听表单变化的示例讲解
Aug 30 Javascript
JS学习笔记之数组去重实现方法小结
May 29 Javascript
Vuex 模块化使用详解
Jul 31 Javascript
JavaScript实现简单的弹窗效果
May 19 #Javascript
js实现自定义右键菜单
May 18 #Javascript
微信小程序手动添加收货地址省市区联动
May 18 #Javascript
怎么理解wx.navigateTo的events参数使用详情
May 18 #Javascript
django简单的前后端分离的数据传输实例 axios
May 18 #Javascript
vue+koa2搭建mock数据环境的详细教程
May 18 #Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
May 18 #Javascript
You might like
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
js+css在交互上的应用
2010/07/18 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
python3.3实现乘法表示例
2014/02/07 Python
9种python web 程序的部署方式小结
2014/06/30 Python
Python 自动刷博客浏览量实例代码
2017/06/14 Python
python贪吃蛇游戏代码
2020/04/18 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
python制作填词游戏步骤详解
2019/05/05 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2019/09/18 Python
QML使用Python的函数过程解析
2019/09/26 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
法学专业自我鉴定
2014/02/05 职场文书
股权转让协议书
2014/04/12 职场文书
党员四风剖析材料
2014/08/27 职场文书
五心教育心得体会
2014/09/04 职场文书
村主任个人对照检查材料
2014/10/01 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
决心书格式范文
2015/09/23 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript
Python爬虫入门案例之爬取去哪儿旅游景点攻略以及可视化分析
2021/10/16 Python