微信 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调webservice实现邮箱验证(检测是否可用)
May 21 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
Javascript中的几种继承方式对比分析
Mar 22 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
jQuery中 bind的用法简单介绍
Feb 13 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
vue之a-table中实现清空选中的数据
Nov 07 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 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
解析PHP跨站刷票的实现代码
2013/06/18 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
番茄的表单验证类代码修改版
2008/07/18 Javascript
jQuery 定时局部刷新(setInterval)
2010/11/19 Javascript
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
Python实现的远程登录windows系统功能示例
2018/06/21 Python
python 除法保留两位小数点的方法
2018/07/16 Python
python动态进度条的实现代码
2019/07/03 Python
python 字典的打印实现
2019/09/26 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
python获取引用对象的个数方式
2019/12/20 Python
python正则过滤字母、中文、数字及特殊字符方法详解
2020/02/11 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
Python使用jupyter notebook查看ipynb文件过程解析
2020/06/02 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
英国团购网站:Groupon英国
2017/11/28 全球购物
政府门卫岗位职责
2014/04/29 职场文书
个人委托书
2014/07/31 职场文书
报到证办理个人委托书
2014/10/06 职场文书
教师节表彰会主持词
2015/07/06 职场文书
同学聚会祝酒词
2015/08/10 职场文书
工作简历的自我评价
2019/05/16 职场文书
Python实现拼音转换
2021/06/07 Python
Python Pandas常用函数方法总结
2021/06/15 Python