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


Posted in Javascript onApril 11, 2020

前一段时间做了一个微信分享的东西,而且前端框架用的是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签名错误内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript中Date对象的常用方法示例
Oct 24 Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 Javascript
AngularJS内建服务$location及其功能详解
Jul 01 Javascript
javascript实现页面滚屏效果
Jan 17 Javascript
bootstrap中的 form表单属性role="form"的作用详解
Jan 20 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
vue 中引用gojs绘制E-R图的方法示例
Aug 24 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 Javascript
通过JS判断网页是否为手机打开
Oct 28 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
Apr 11 #Javascript
vue使用微信扫一扫功能的实现代码
Apr 11 #Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 #Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 #Javascript
JavaScript实现轮播图特效
Apr 10 #Javascript
JavaScript实现图片伪异步上传过程解析
Apr 10 #Javascript
Vue实现Layui的集成方法步骤
Apr 10 #Javascript
You might like
PHP iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
深入理解PHP原理之Session Gc的一个小概率Notice
2011/04/12 PHP
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
PHP基础知识回顾
2012/08/16 PHP
一个PHP的ZIP压缩类分享
2014/05/04 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
Linux系统下使用XHProf和XHGui分析PHP运行性能
2015/12/08 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
JS实现图片放大镜效果的方法
2015/02/27 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
javascript拖拽应用实例
2016/03/25 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
打开电脑上的QQ的python代码
2013/02/10 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
老生常谈python中的重载
2018/11/11 Python
flask实现验证码并验证功能
2019/12/05 Python
会计主管岗位职责
2014/01/03 职场文书
代理商会议邀请函
2014/01/27 职场文书
企业道德讲堂实施方案
2014/03/19 职场文书
党支部鉴定意见
2015/06/02 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书