微信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 相关文章推荐
一些不错的js函数ajax
Aug 20 Javascript
Prototype Number对象 学习
Jul 19 Javascript
JavaScript与DropDownList 区别分析
Jan 01 Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
vue中设置、获取、删除cookie的方法
Sep 21 Javascript
详解如何用VUE写一个多用模态框组件模版
Sep 27 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
Oct 16 Javascript
jQuery中使用validate插件校验表单功能
May 24 jQuery
VUE写一个简单的表格实例
Aug 06 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
php 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
smarty获得当前url的方法分享
2014/02/14 PHP
php字符串截取函数用法分析
2014/11/25 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
PHP和MYSQL实现分页导航思路详解
2017/04/11 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
Javascript变量函数浅析
2011/09/02 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
Node.js pipe实现源码解析
2017/08/12 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
Python实现将通信达.day文件读取为DataFrame
2018/12/22 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
通信工程专业女生个人求职信
2013/09/21 职场文书
学前教育毕业生自荐信
2013/10/29 职场文书
行政管理毕业生自荐信
2014/02/24 职场文书
会计的岗位职责
2014/03/15 职场文书
公司捐款倡议书
2014/05/14 职场文书
毕业证代领委托书
2014/09/26 职场文书
保密工作整改报告
2014/11/06 职场文书
2014年应急工作总结
2014/12/11 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
男方家长婚礼答谢词
2015/09/29 职场文书