微信分享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 相关文章推荐
jQuery Tools tab使用介绍
Jul 14 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
jQuery中index()的用法分析
Sep 05 Javascript
Java中Timer的用法详解
Oct 21 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
javascript中的altKey 和 Event属性大全
Nov 06 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
May 05 Javascript
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 Javascript
图文详解vue框架安装步骤
Feb 12 Javascript
jquery实现下载图片功能
Jul 18 jQuery
JS浮点数运算结果不精确的Bug解决
Aug 01 Javascript
原生JS利用transform实现banner的无限滚动示例代码
Jun 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数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
PHP使用file_get_content设置头信息的方法
2016/02/14 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
URL地址中的#符号使用说明
2011/02/12 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
Vue指令指令大全
2019/02/09 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
用python实现对比两张图片的不同
2018/02/05 Python
Python Pillow Image Invert
2019/01/22 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
酒店总经理助理岗位职责
2014/02/01 职场文书
《蓝色的树叶》教学反思
2014/02/24 职场文书
个人合作协议书范本
2014/04/18 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
理财学专业自荐书
2014/06/28 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
python实现大文本文件分割成多个小文件
2021/04/20 Python
python使用shell脚本创建kafka连接器
2022/04/29 Python
vscode内网访问服务器的方法
2022/06/28 Servers