微信 jssdk 署名毛病 invalid signature

2019年8月20日 474次阅读 来源: 张京

险些每个开辟用于微信民众号页面的工程师都遇到过微信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地点不对，跟算法没有任何关系，完整没必要浪费时间去看什么署名算法。

我又遇到了一种新状况，所以照样有必要进入微信民众号治理背景根据以下递次搜检：
第一，在接口设置页面搜检是不是把你的服务器的域名加入了信托域名？第二，在基础设置页面搜检是不是把你的服务器的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 + '';
}

至此，种种署名毛病的题目才算是悉数处理。

    原文作者：张京
    原文地址: https://segmentfault.com/a/1190000017870058
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞