微信jssdk踩坑之签名错误invalid signature

最近做公众号网页开发，使用微信 jssdk 页面签名时 IOS 中一直报错，这才刚开始就被这只拦路虎拦住了，报错如下：

然而 Android 和开发者工具中好得很，没有任何问题：

既然提示 签名非法 ，那就是签名有问题咯，但是同样的接口，为什么Android没问题？是真是假还是用官方的签名校验工具验证下：

生成的签名完全没有问题，这就奇怪了，按照网上说的 url 改成如下方式也不行：

url = window.location.href.split('#')[0]

突然看到网上有人说是因为 SPA 的原因，经过几番测试，问题锁定在了 SPA 。先来解释下为什么会这样，我们使用 Vue Router 切换页面时，底层使用的是 pushState 技术，这是 H5 的一个新特性，虽然表面上看页面的 path 变了，内容也换了，但是页面是没有刷新的。

现在知道问题出在哪里，再来实际确认一下。首先进入项目的首页，地址是 https://www.abc.com/weixin/quan?rr=234wfwf ，然后点击进入我们要分享的页面，这时候会提示 invalid signature ，这时jssdk是配置失败的，分享出去的就是原始的页面链接，然而问题出现了：

分享后的链接仍然是首页进入的链接，这是微信的BUG啊，原来在微信的网页中不支持 pushState ，这就导致我们在jssdk从配置时传入的 url （ window.location.href 得到）和微信识别到的不一样，这时候在分享的页面刷新一下，配置就会正常。

后面再看官方文档时也提到了这一点：

然而我的Android没这个问题，iOS反而出现了这个问题（IOS版本13.3.1，微信版本7.0.9，jssdk 1.6）

如何解决

在跳转到要分享的页面时，不用 pushState ，在 Vue router 中就是不用 push 方式跳转，方式如下：

window.location.href = 要跳转的链接
// _this.$router.push({
// …
// })

既然 SPA 在微信中只认第一个页面的 path ，那我们就在第一次进入页面时记录下 path ，其他页面用这个 path 。我们在 App.vue 或者 main.js 中记录下这个 path ：

window.sessionStorage.setItem('firstEntryUrl', window.location.href)

然后在需要分享的页面，使用这个 path ：

let url = window.location.href.split('#')[0]
if (utils.isIOS() && window.sessionStorage.getItem('firstEntryUrl')) {
	url = window.sessionStorage.getItem('firstEntryUrl').split('#')[0]
}

经测试，上述两种方法都能完美解决。

到此这篇关于微信jssdk踩坑之签名错误invalid signature的文章就介绍到这了,更多相关微信jssdk 签名错误 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

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

    几乎每一个开发用于微信公众号页面的工程师都遇到过微信jssdk报的各种错误,通常是permission denied,类似这样: 通常他们会建议你把debug选项开开,比如这样: wechat.config({ debug: true, appId: appId, timestamp: timestamp, nonceStr: nonceStr, signature: signature, jsApiList: ['scanQRCode'], }); 结果你又遇到了invalid signatu

  • 微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)

    最近在搞微信公众号开发,进行到网页开发部分被坑了一天,最坑的问题就是invalid signature,而网上大部分解答这个问题的都没有说清楚,都直接丢文档.博主认为这样很不好.本文是博主结合自身遇到的问题所写,整个流程跟问题都很详细,虽然排版可能有点不好.但是绝对对遇到类似问题的朋友有所帮助.请认真看下去 一.绑定JS接口安全域名 生产号绑定方法:登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名". 测试号绑定方法:进入

  • 微信jssdk踩坑之签名错误invalid signature

    最近做公众号网页开发,使用微信 jssdk 页面签名时 IOS 中一直报错,这才刚开始就被这只拦路虎拦住了,报错如下: 然而 Android 和开发者工具中好得很,没有任何问题: 既然提示 签名非法 ,那就是签名有问题咯,但是同样的接口,为什么Android没问题?是真是假还是用官方的签名校验工具验证下: 生成的签名完全没有问题,这就奇怪了,按照网上说的 url 改成如下方式也不行: url = window.location.href.split('#')[0] 突然看到网上有人说是因为 SP

  • 详解vue项目接入微信JSSDK的坑

    用于记录接入微信JS-SDK的坑,以后方便查询 第一次接入公众号微信支付.分享.定位等等的坑的时候,心里是迷茫而又恐惧.因为,听说坑特别多,后来发现自己的亲身体验到了这一点. 支付的坑 1.当前URL未注册 问题: 微信公众号H5调起支付时,点击支付按钮出现"当前页面的URL未注册"的提示. 解决办法:由于2017年8月1日微信官方把关于支付的信息转移到了商户平台:公众平台微信支付公众号支付授权目录.扫码支付回调URL配置入口已于8月1日迁移至商户平台(pay.weixin.qq.co

  • vue中使用微信公众号js-sdk踩坑记录

    最近又在vue中捣鼓了下微信公众号api的接入,不得不说这里边水是真的深啊,上次分享了微信授权登录和js-sdk签名的部分,其中很多朋友私信我表示了疑惑,今天我就再次尝试理顺一下这里边的坑吧: 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.卡券.支付等微信特有的能力,为微信用户提供更优质的网页体验. 分享页面到朋友圈 上文是从官方文档

  • 微信js-sdk+JAVA实现“分享到朋友圈”和“发送给朋友”功能详解

    主要为以下实现步骤: 1.绑定域名 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名".(特别提示不需要加上http或者https,吃过亏) 2.页面引入js文件 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>    <script src="https://res.wx

  • 微信分享invalid signature签名错误踩过的坑

    前一段时间做了一个微信分享的东西,而且前端框架用的是VUE,被这个东西快折磨疯了,一个列表页,一个详情页,分享详情页的时候,会报错invalid signature签名错误. 当时就不淡定了,然后开始了排坑之路,根据官网的各种校验错误问题,没有发现有什么区别 建议按如下顺序检查: 1.确认签名算法正确,可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验. 2.确认config中nonceStr(js中驼峰标准大

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

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

  • 详解Vue微信公众号开发踩坑全记录

    详解Vue微信公众号开发踩坑全记录

    本文介绍了Vue微信公众号开发踩坑全记录,分享给大家,也给自己留个笔记. 需求 微信授权登录(基于公众号的登录方案) 接入JS-SDK实现图片上传,分享等功能 现状及难点 采用的Vue框架,前后端分离模式(vue工程仅作为客户端),用户通过域名访问的是客户端,但是微信授权中涉及签名和token校验依赖服务端 JS-SDK需要向服务端获取签名,且获取签名中需要的参数包括所在页面的url,但由于单页应用的路由特殊,其中涉及到IOS和android微信客户端浏览器内核的差异性导致的兼容问题 解决方案

  • 基于IOS端微信分享失效的踩坑及解决方法

    最近的一个公众号是基于vue的spa应用,在接入微信分享和微信语音的时候出现了:在Android上一切正常,但是在ios端调用wx.config的时候总是失败,去翻了官方文档也并没有找到解决方案,最后在测试中发现是因为初始化的时候传入的URL的问题.具体过程如下: 微信config接口配置,官方文档如下: 所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支

随机推荐