微信 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 相关文章推荐
Mozilla 表达式 __noSuchMethod__
Apr 05 Javascript
javascript中字符串拼接需注意的问题
Jul 13 Javascript
js replace 与replaceall实例用法详解
Aug 03 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
Aug 14 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
Sep 19 Javascript
在vue里使用codemirror遇到的问题
Nov 01 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 Javascript
Vue——解决报错 Computed property "****" was assigned to but it has no setter.
Dec 19 Vue.js
javascript实现拼图游戏
Jan 29 Javascript
react项目从新建到部署的实现示例
Feb 19 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中常用数组处理方法实例分析
2008/08/30 PHP
PHP 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
PHP中::、->、self、$this几种操作符的区别介绍
2013/04/24 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
laravel实现前后台路由分离的方法
2019/10/13 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
JS操作Cookies的小例子
2013/10/15 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
2016/06/12 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
Python isinstance函数介绍
2015/04/14 Python
Python实现提取文章摘要的方法
2015/04/21 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
PyQt5实现简易计算器
2020/05/30 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
python绘制直方图和密度图的实例
2019/07/08 Python
django-初始配置(纯手写)详解
2019/07/30 Python
django删除表重建的实现方法
2019/08/28 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
四年大学自我鉴定
2014/02/17 职场文书
电子商务专业应届生求职信
2014/05/28 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
工程索赔意向书
2014/08/30 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
靠谱准确的求职信
2019/04/02 职场文书
PostgreSQL数据库去除重复数据和运算符的基本查询操作
2022/04/12 PostgreSQL