微信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 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
AngularJS教程之MVC体系结构详解
Aug 16 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
ES6入门教程之let和const命令详解
May 17 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
实例讲解JS中pop使用方法
Jan 27 Javascript
js module大战
Apr 19 Javascript
JS定义函数的几种常用方法小结
May 23 Javascript
通过vue写一个瀑布流插件代码实例
Sep 07 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使用SOAP扩展实现WebService的方法
2016/04/01 PHP
不错的JS中变量相关的细节分析
2007/08/13 Javascript
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
[02:06]2018完美世界全国高校联赛秋季赛开始报名(附彩蛋)
2018/09/03 DOTA
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
Python将多个list合并为1个list的方法
2018/06/27 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
高三自我评价
2014/02/01 职场文书
商务经理岗位职责
2014/07/30 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
2015年国培研修感言
2015/08/01 职场文书
庭外和解协议书
2016/03/23 职场文书
golang中的空slice案例
2021/04/27 Golang
Python3 如何开启自带http服务
2021/05/18 Python
go web 预防跨站脚本的实现方式
2021/06/11 Golang
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers