微信分享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中的五种数据类型详解
Dec 26 Javascript
avalonjs实现仿微博的图片拖动特效
May 06 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
Node.js pipe实现源码解析
Aug 12 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
vue在手机中通过本机IP地址访问webApp的方法
Aug 15 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
Vue实现简单分页器
Dec 29 Javascript
Vue 实现手动刷新组件的方法
Feb 19 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
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
第二节--PHP5 的对象模型
2006/11/16 PHP
表单复选框向PHP传输数据的代码
2007/11/13 PHP
PHP5中使用PDO连接数据库的方法
2010/08/01 PHP
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
2007/08/31 Javascript
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
javascript中的document.open()方法使用介绍
2013/10/09 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
js插件Jcrop自定义截取图片功能
2016/10/14 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
2017/10/11 Javascript
使用cookie绕过验证码登录的实现代码
2017/10/12 Javascript
关于vue面试题汇总
2018/03/20 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
2019/04/19 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
js实现特别简单的钟表效果
2020/09/14 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
python 接收处理外带的参数方法
2018/12/03 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
Whistles官网:英国女装品牌
2020/08/14 全球购物
DataReader和DataSet的异同
2014/12/31 面试题
化工机械应届生求职信
2013/11/04 职场文书
药学专业个人的自我评价
2013/12/31 职场文书
酒店前厅员工辞职信
2014/01/08 职场文书
开办大学饮食联盟创业计划书
2014/01/29 职场文书
办公室综合文员岗位职责范本
2014/02/13 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
村委会贫困证明范文
2014/09/21 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
Pygame Rect区域位置的使用(图文)
2021/11/17 Python