微信 jssdk 签名错误invalid signature的解决方法


Posted in Javascript onJanuary 14, 2019

几乎每一个开发用于微信公众号页面的工程师都遇到过微信jssdk报的各种错误,通常是permission denied,类似这样:

微信 jssdk 签名错误invalid signature的解决方法

通常他们会建议你把debug选项开开,比如这样:

wechat.config({
   debug: true,
   appId: appId,
   timestamp: timestamp,
   nonceStr: nonceStr,
   signature: signature,
   jsApiList: ['scanQRCode'],
  });

结果你又遇到了invalid signature。类似这样:

微信 jssdk 签名错误invalid signature的解决方法

签名不对,这是什么意思?可是这签名是后端给过来的,我怎么知道它为什么不对?后端用的是标准算法,不可能不对啊。

查网上各种教程,或者微信官网,他们总是不厌其烦地告诉你,让你去检查签名算法,然而根本没有用!

90%的这种情况下,其实只是一个原因:你用于计算签名的URL地址不对,跟算法没有任何关系,完全不必浪费时间去看什么签名算法。

微信要求:如果我们需要在页面中调用微信的某个方法,则必须用这个页面的URL地址获取签名。听上去似乎很好理解,但是实际上URL地址包含的部分很多,有问号,有#号,你所要做的是取出#前面的部分。比如说你的URL地址是这样:https://www.abc.com/abc.html?abc=def#xyz,那么你用于计算签名的URL地址不可以是https://www.abc.com/abc.html,也不能是https://www.abc.com/abc.html?abc=def#xyz,而必须只能是https://www.abc.com/abc.html?abc=def

如何获取当前页面的URL地址呢?这个很简单:

let wechaturl = window.location.href.split('#')[0];

然而你以为事情就这样结束了?太天真。你的页面还是无法正常使用微信函数的。

因为:微信内嵌浏览器在iOS和安卓下的表现不一样。

在安卓下,你确实用上面的方法是可以调用了。但是在iOS下,签名依然失败!因为在iOS下,微信需要你传递的是入口URL,而不是当前页面的URL

比如说,你在微信公众号的某个菜单链接进入了A页面,然后从A页面的某个链接跳转到B页面,然后你在B页面获取签名,如果是在安卓下,你应该用B页面的URL地址来获取,但是在iOS下,你还必须用A页面的URL地址来获取,否则就还是签名失败!

知道了原因,就有很多种解决办法。

首先,我们可以在入口的A页面里增加这样的判断:

if (navigator.userAgent.indexOf('iPhone') !== -1) {
  window.wechaturl = window.location + '';
}

然后,在B页面需要调用签名的地方,再增加这样的判断:

let wechaturl = window.location.href.split('#')[0];
if (window.wechaturl !== undefined) {
 wechaturl = window.wechaturl;
}

这样我们就有效地区分开了iOS和安卓。但问题是在iOS下,如果我的另外一个菜单入口是B页面,我从B页面跳转到A页面,这时候我的入口链接被强制变成了A页面,依然会产生签名失败的错误。

所以我们还需要在微信公众号的每一个入口菜单链接里加一个特殊的参数,例如wechat=1,变成这样:https://www.abc.com/abc.html?abc=def&wechat=1

然后我们再增加一层判断,变成这样:

if (navigator.userAgent.indexOf('iPhone') !== -1) {
 if (this.$route.query.wechat !== undefined && this.$route.query.wechat === '1') {
  window.wechaturl = window.location + '';
 }
}

这里我用了vue的写法,但原理是一样的。只有我检测到了wechat这个参数,我才认为当前页面是入口页面,如果没有检测到,则不必强行设置为入口页面。

这样似乎就解决了微信签名失败的问题。

但是,我们又遇到了另外一种情况:在微信小程序里用web-view内嵌的网页,在安卓下也报permission deniedinvalid signature错误。不过有了上面的经验,我们诊断错误根源还是URL入口地址的问题。果然,在安卓下用入口地址获取签名成功,而用当前地址获取签名失败,为此,我们在入口页面里再加一个判断:

if (navigator.userAgent.indexOf('miniProgram') !== -1) {
 window.wechaturl = window.location + '';
}

至此,各种签名错误的问题才算是全部解决。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 性能优化手册 推荐
Feb 23 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
纯javascript版日历控件
Nov 24 Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 Javascript
vue实现修改图片后实时更新
Nov 14 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 Javascript
解决vue init webpack 下载依赖卡住不动的问题
Nov 09 Javascript
js实现圆形菜单选择器
Dec 03 Javascript
JavaScript实现优先级队列
Dec 06 Javascript
详解从react转职到vue开发的项目准备
Jan 14 #Javascript
node全局变量__dirname与__filename的区别
Jan 14 #Javascript
微信小程序时间轴实现方法示例
Jan 14 #Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 #Javascript
关于vue的npm run dev和npm run build的区别介绍
Jan 14 #Javascript
用npm-run实现自动化任务的方法示例
Jan 14 #Javascript
详解vue-cli 2.0配置文件(小结)
Jan 14 #Javascript
You might like
改造一台复古桌面收音机
2021/03/02 无线电
php中cookie的使用方法
2014/03/29 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
JavaScript Array扩展实现代码
2009/10/14 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
浅析Node.js查找字符串功能
2014/09/03 Javascript
javascript中字符串拼接详解
2014/09/26 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
2016/10/30 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
详解jQuery中的getAll()和cleanData()
2019/04/15 jQuery
js观察者模式的弹幕案例
2020/11/23 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
Python脚本处理空格的方法
2016/08/08 Python
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
浅谈python3.6的tkinter运行问题
2019/02/22 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
Django日志及中间件模块应用案例
2020/09/10 Python
python-地图可视化组件folium的操作
2020/12/14 Python
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
保险专业大专生求职信
2013/10/26 职场文书
药学专业大专生的自我评价
2013/12/12 职场文书
建筑工地宣传标语
2014/06/18 职场文书
开服装店计划书
2014/08/15 职场文书
股指期货心得体会
2014/09/10 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
使用Python获取字典键对应值的方法
2022/04/26 Python