微信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 相关文章推荐
DOM下的节点属性和操作小结
May 14 Javascript
浅析JavaScript基本类型与引用类型
May 28 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 Javascript
JS实现的简易拖放效果示例
Dec 29 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 Javascript
详解JS深拷贝与浅拷贝
Aug 04 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
Aug 27 Javascript
使用Vant完成Dialog弹框案例
Nov 11 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实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
用PHP写的基于Memcache的Queue实现代码
2011/11/27 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
2016/06/01 Javascript
详解jQuery事件
2017/01/13 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
微信小程序抽奖组件的使用步骤
2021/01/11 Javascript
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
详解Python的三种可变参数
2019/05/08 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
python两个_多个字典合并相加的实例代码
2019/12/26 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
Keras之fit_generator与train_on_batch用法
2020/06/17 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
电子银行营销方案
2014/02/22 职场文书
2014年五一劳动节社区活动总结
2014/04/14 职场文书
家长学校培训材料
2014/08/20 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书
孟佩杰观后感
2015/06/17 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
经销商会议开幕词
2016/03/04 职场文书
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android