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

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

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

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

结果你又遇到了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 denied和invalid signature错误。不过有了上面的经验，我们诊断错误根源还是URL入口地址的问题。果然，在安卓下用入口地址获取签名成功，而用当前地址获取签名失败，为此，我们在入口页面里再加一个判断：

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信开发之使用java获取签名signature

    微信开发之使用java获取签名signature

    一.前言 微信接口调用验证最终需要用到的三个参数noncestr.timestamp.signature: 接下来将会给出获取这三个参数的详细代码 本文的环境eclipse + maven 本文使用到的技术HttpClient.Json字符串转map.sha1加密 二.需要用到的jar包 maven依赖的包有: 1.HttpClient包依赖 <dependency> <groupId>org.apache.httpcomponents</groupId> <ar

  • Android微信支付获取二次签名Sign的方法

    本文实例为大家分享了Android微信支付获取二次签名Sign的方法,供大家参考,具体内容如下 /** * 获取sign签名 * * @return */ private String genPayReq() { // 获取参数的值 PayReq request = new PayReq(); request.appId = ConstantsMember.APP_ID; request.partnerId = ConstantsMember.MCHID; request.prepayId =

  • 微信封装的调用微信签名包的类库

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <?php namespace Home\Model; use Think\Model; class WechatModel extends Model { private $_token = ''; //令牌 private $appid; private $appsecret; public function __construct() { $this->appid = C('APPID');//公众号的appid $this->

  • 详解IOS微信上Vue单页面应用JSSDK签名失败解决方案

    背景 手机型号: 型号:iphone 7 / iphone xs max 版本:ios 10.3.1 / ios 12.1 微信版本:WeChat 6.7.3 问题还原: Vue应用(vue-router)上使用history模式,在某个页面内调用微信JSSDK相关API,如扫码.分享等,使用当前页面URL总会出现签名错误(invalid signature),导致API调用失败. 问题根源 Vue-Router进行路由切换的时候,总是会操作浏览器的历史记录,从而响应页面URL变化. 在JSSD

  • VUE解决微信签名及SPA微信invalid signature问题(完美处理)

    前端小菜鸟,因为项目要对接微信的jssdk,对接就需要签名认证,但是无奈安卓和IOS各有各的坑,本篇文章只讨论签名,和一个分享的坑,希望大家有所收获,能够解决问题,如果解决不到,请麻烦在评论区留言,本文综合了所有的回答,才调试出来坑 需求: 使用微信的功能 原因: 1. 项目基于vue,在微信上的web应用 2. 要使用上传功能(不同系统的兼容真的很多BUG,最后只能使用微信方案),支付功能,定位.... 3. 签名一直存在bug和问题,那么后面的功能都会唤不起(偶尔也可以) 签名 1. 流程详

  • 微信js sdk invalid signature签名错误问题的解决方法分析

    本文实例讲述了微信js sdk invalid signature签名错误问题的解决方法.分享给大家供大家参考,具体如下: /**最近在做微信js sdk 接口调用说明*/ ***相信很多人都遇见像我这样的问题,再加上自己只能算是半个程序员,所以苦苦摸索了好久终于搞懂了. ****下面就把自己所遇见的各种问题和大家分享一下,都是自己亲手实验过的********/ 一.问题说明 如果出现 invalid signature,首先可以确定的是你的签名算法有问题. 建议:首先查看微信官方网站给出的解决

  • 详解Vue开发微信H5微信分享签名失败问题解决方案

    关于Vue中路由使用history模式,开发微信H5页面分享时在安卓上签名有效成功,但是在IOS设备上一直报错签名失效问题 问题描述:在Vue开发过程中,路由使用History模式下,在使用微信分享时,在微信开发者工具上一切正常.在安卓上一切正常. 但是!!!在IOS上反复报签名错误. 以下是真机测试截图,划掉黑线的是我个人IOS设备分享出来一直是服务号,接着下面分享出来自定义内容是安卓分享正常,话不多说上图!!!! 我的代码: 需求描述:需要从首页进入活动详情页,然后在详情页分享详情页面内容.

  • C# 微信支付 wx.chooseWXPay 签名错误的解决方法

    本着安全第一慎用第三方代码的原则,决定自己根据微信支付SDK写支付过程,从统一下单开始一切还算顺利,到最后JS发起支付调用时抛出"支付签名错误",下面将给出正确签名方法 这里整理出的签名函数实际是通用的,在统一下单时或支付返回验证时都可以调用 重点是非空参数才参与签名,参数名称区分大小写,排序要按照ASC顺序排列,key(密匙)永远放在最后一位 以下是原函数说明: wx.chooseWXPay({ timestamp: 0, // 支付签名时间戳,注意微信jssdk中的所有使用time

  • .NET微信小程序用户数据的签名验证和解密代码

    微信小程序时下大热,抱着学习的心态了解了一下,目前没有搜到完整的.NET用户数据签名验证和解密代码,于是就写了一点. 简单使用方法: 1.客户端调用wx.getUserInfo方法,服务端创建WeChatLoginInfo类的实例接收客户端发来的数据: 2.服务端新建WeChatAppDecrypt类的实例,初始化此类时需传入appId与AppSecret用于验证: 3.调用WeChatAppDecrypt类中的Decrypt方法,传入步骤1中获取的WechatLoginInfo实例: 4.得到

  • 基于微信签名signature获取(实例讲解)

    微信分享的签名算法微信也写有,主要是调用接口需要使用服务器(微信官方文档是这么说的,试了下前端居然特么也可以),不过微信的access_token和jsapi_ticket是有使用次数限制的,所以还是用服务器来获取,得到以后存下来,下次使用判断超时以后再重新获取,这样就够用了,要不然就会出现接口调用次数超出限制这种尴尬的事情了. 如果需要使用自定义分享文案的时候,服务号或者订阅号一定要是已认证的(我的是个人类型的订阅号,不能认证,所以不能使用分享功能) 我这边用的是node做的后台,所以代码用的

随机推荐