微信 jssdk 签名错误 invalid signature

lei___ 发布于2019-08-23 14:40 / 3412人阅读

摘要：你的页面还是无法正常使用微信函数的。这样似乎就解决了微信签名失败的问题。但是，我们又遇到了另外一种情况在微信小程序里用内嵌的网页，在安卓下也报和错误。

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

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

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

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

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

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

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

我又遇到了一种新情况，所以还是有必要进入微信公众号管理后台按照以下顺序检查：第一，在接口配置页面检查是否把你的服务器的域名加入了信任域名？第二，在基本配置页面检查是否把你的服务器的IP地址加入了白名单？

微信要求：如果我们需要在页面中调用微信的某个方法，则必须用这个页面的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 denied和invalid signature错误。不过有了上面的经验，我们诊断错误根源还是URL入口地址的问题。果然，在安卓下用入口地址获取签名成功，而用当前地址获取签名失败，为此，我们在入口页面里再加一个判断：

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

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

服务器托管专线服务 invalid signature 微信支付签名错误微信jssdk jssdk微信图片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100969.html

微信JSSDK提示invalid signature

摘要：简直是个神坑，被坑哭了，所以记录一下把微信和改用存，为了避免并发导致次数被用完，加了锁，为了避免以后扩展，改用了分布式锁，改完用并发测试了下，一切正常，。简直是个神坑，被坑哭了，所以记录一下！把微信token和ticket改用redis存，为了避免并发导致token次数被用完，加了锁，为了避免以后redis扩展，改用了分布式锁，改完用100并发测试了下，一切正常，perfect。 ...

zone 2019-07-25 11:44 评论0 收藏0
微信JSSDK分享，解决config:invalid signature问题

摘要：微信分享可以实现自己的网页在微信自定义图标，标题，还有描述，还可以分享到朋友圈，分享到微信群，分享给朋友等操作。微信JSSDK分享可以实现自己的网页在微信自定义图标，标题，还有描述，还可以分享到朋友圈，分享到微信群，分享给朋友等操作。 showImg(https://segmentfault.com/img/bVbiGlk?w=1214&h=1079); 上图就是，左侧是分享到朋友圈...

fsmStudy 2019-08-23 12:32 评论0 收藏0
angular2 + JSSDK的微信分享定制总结

摘要：本篇文章就记录我的做微信分享信息定制的过程和踩坑总结。但是，这就要求在每个组件中都加微信分享代码，会导致维护困难。在微信浏览器内打开任何网页，若不配置分享接口，微信会默认使用如下信息作为分享信息：默认标题：HTML的title 默认连接：当前页面的地址，即location.href 默认图片：会取当前页面body内最前面的一张符合条件的图片（尺寸必须大于300px × 300px...

qylost 2019-08-20 14:51 评论0 收藏0
IOS微信上Vue单页面应用JSSDK签名失败解决方案

摘要：路由守卫内触发更新签名获取真实有效微信签名此处需要自行处理在路由守卫内更新签名，保证是使用当前页面，是使用目标路由完整地址再加上域名使用签名调用在使用的页面通过取出缓存的微信签名，然后进行签名。背景手机型号：型号：iphone 7 / iphone xs max版本：ios 10.3.1 / ios 12.1微信版本：WeChat 6.7.3 问题还原： Vue应用(vue-ro...

lixiang 2019-08-23 13:12 评论0 收藏0