前一段时间做了一个微信分享的东西,而且前端框架用的是VUE,被这个东西快折磨疯了,一个列表页,一个详情页,分享详情页的时候,会报错invalid signature签名错误。
当时就不淡定了,然后开始了排坑之路,根据官网的各种校验错误问题,没有发现有什么区别
建议按如下顺序检查:
1.确认签名算法正确,可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。
2.确认config中nonceStr(js中驼峰标准大写S), timestamp与用以签名中的对应noncestr, timestamp一致。
3.确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认),包括'http(s)://'部分,以及'?'后面的GET参数部分,但不包括'#'hash后面的部分。
4.确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
5.确保一定缓存access_token和jsapi_ticket。
6.确保你获取用来签名的url是动态获取的,动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名,前端需要用js获取当前页面除去'#'hash部分的链接(可用location.href.split('#')[0]获取,而且需要encodeURIComponent),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。
究竟什么导致呢,后来发现是history在微信中的问题,就是当从列表进入详情页的时候,往后台传入URL,跟你直接从详情页进入传的URL不一致。比如:A=>B,分享B
这时候你需要记录初始页的url,解决办法在你的main.js里,添加
router.beforeEach((to, from, next) => { if (!window.initUrl) { window.initUrl = location.href.split('#')[0] } next() })
然后在你的详情页里B获取
url: '....?url=' + encodeURIComponent(that.isIosOrAndroid() === 'android' ? location.href.split('#')[0] : window.initUrl)
在这里要判断是android还是ios,因为再android里显示是正常的,所以就用
location.href.split('#')[0]
直接获取当前的url即可。
// 判断ios还是android Vue.prototype.isIosOrAndroid = function () { let u = navigator.userAgent; let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 // android终端 let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端 let isStr = '' if (isAndroid) { isStr = 'android' } if (isiOS) { isStr = 'ios' } return isStr }
总结
到此这篇关于微信分享invalid signature签名错误踩过的坑的文章就介绍到这了,更多相关微信分享invalid signature签名错误内容请搜索小牛知识库以前的文章或继续浏览下面的相关文章希望大家以后多多支持小牛知识库!
本文向大家介绍微信jssdk踩坑之签名错误invalid signature,包括了微信jssdk踩坑之签名错误invalid signature的使用技巧和注意事项,需要的朋友参考一下 最近做公众号网页开发,使用微信 jssdk 页面签名时 IOS 中一直报错,这才刚开始就被这只拦路虎拦住了,报错如下: 然而 Android 和开发者工具中好得很,没有任何问题: 既然提示 签名非法 ,那就是签名
这具体会是哪里的问题?折腾可长时间了。。。wx.config需要的appid,timestamp,signature这些参数是后台给的,人家用可长时间了,按说这肯定没问题,那具体还可能是哪里的问题? 对的用的uniapp开会的,公众号的页面。
本文向大家介绍C#微信分享代码,包括了C#微信分享代码的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了C#微信分享的具体代码,供大家参考,具体内容如下 微信分享代码,先引入: 获取签名: 分享代码: wxsign输出的json 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
本文向大家介绍微信封装的调用微信签名包的类库,包括了微信封装的调用微信签名包的类库的使用技巧和注意事项,需要的朋友参考一下 废话不多说了,直接给大家贴代码了,具体代码如下所示: 以上所述是小编给大家介绍的微信封装的调用微信签名包的类库,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持!
本文向大家介绍微信小程序 slot踩坑的解决,包括了微信小程序 slot踩坑的解决的使用技巧和注意事项,需要的朋友参考一下 今天在使用微信小程序 component 里的 slot 时发现,当只用一个 slot 并且将 slot 命名后,页面中调用这个 slot 并不会加载进来。 研究尝试后发现,如果想要使用命名的方式调用单个 slot ,也需要像调用多个 slot 的方式 在 component
本文向大家介绍Android微信签名知识的总结,包括了Android微信签名知识的总结的使用技巧和注意事项,需要的朋友参考一下 前言 最近遇到一个项目的应用要上微信登录,大家都知道微信登录是需要开放平台上申请的,在微信开发平台创建移动应用后,需要填写: 需要填写的内容 问题 这里的应用签名是keystore的证书的md5,但是微信的这个只有一个填写输入框,不像百度地图、高德地图那样,有线上的SHA
本篇文章介绍如何利用x5提供的cordova插件实现微博、微信、QQ分享。 在x5中提供了两类分享的插件,一种是微信、QQ、微博这类特定客户端的分享插件,另外一种是通用的分享功能,开发者如果是通用分享需求可参考作者另一篇文章:<社交分享开发教程>( http://doc.wex5.com/social-share/);本篇文章介绍第一种插件的使用教程。 注:在wex53.4版本中,还有一种方式实现
本文向大家介绍PHP微信分享开发详解,包括了PHP微信分享开发详解的使用技巧和注意事项,需要的朋友参考一下 分享一个php微信端开发的经验,有时候当一个项目或工程需要微信端分享之后做一系列事件那么我们就需要获取到微信分享这个动作,也就是说我们已经知道了当前这个东西已经被分享了 ,那么走微信默认的分享显然是不行的我们需要自己动手来配置微信分享,当用户分享时走的是我们预定好的程序那么我们就可以轻松实