前端微信签名验证工具_微信jssdk 签名错误排查方法

最近手头业务，移动端页面在微信浏览器中分享转发的时候没有缩率图，只有标题和链接，如下：

无缩略图的情况

按照微信的官网自定义分享功能，引入jssdk ，结果调试，一直报错签名错误，invalid signature。

按照微信公众平台的开发文档，签名错误排查方法如下：

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)，因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。

通过微信签名工具验证，完全符合。前端config 的nonceStr 也无写法错误，非常纳闷。

如果后台返回的config 信息与微信签名工具校验一致的话，那很有可能是前端访问的url和后台生成签名的url不一致导致，

通过前后台打印分析，url 地址完全一致。我做的是前端传递url给后台，后台接收到的url参与生成签名。这时候注意到，前端传递的url地址是经过 encodeURIComponent的，所以后台接收到需要 decode 一下，比如php 可以用urldecode 函数，再一尝试，成功。。。。。。。

总结如果出现 invalid signature，首先可以确定的是你的签名算法有问题。

签名错误的排查可以这样来:

1：确保基本的appid 正确，获取的access_token和jsapi_ticket 正确

2：校验签名，可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。

3：如果签名一致，那问题基本出在浏览器访问的url和参与生成签名的url不一致。

最后附上jssdk的步骤

1：在微信公众号后台配置js 安全域名，即需要引入jssdk的页面域名。需要在域名根目录下放置微信的检测文件。

2：配置出ip白名单

3：后台开发人员生成签名传递给前台

4：前端页面引入script方式 jssdk文件

5：通过ajax获取config 配置，完成config 配置后即可使用jssdk的各项功能了

前端微信签名验证工具_微信jssdk 签名错误排查方法相关推荐

前端微信签名验证工具_微信JSSDK签名
微信JS-SDK说明文档 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 生成签名 1.签名规则参与签名的 ...
前端微信签名验证工具_微信支付服务商签名验证无误，但是统一下单后服务器返回【签名错误】...
微信支付服务商签名验证无误,但是统一下单后服务器返回, 同样的代码,采用普通商户模式,一切正常,采用服务商受理模式就签名错误,很是无奈. 普通商务模式,统一下单提交数据如下,可以正常支付: wx4a7 ...
前端微信签名验证工具_微信小程序API 用户数据的签名验证和加解密
用户数据的签名验证和加解密数据签名校验为了确保开放接口返回用户数据的安全性,微信会对明文数据进行签名.开发者可以根据业务需要对数据包进行签名校验,确保数据的完整性.签名校验算法涉及用户的ses ...
前端微信签名验证工具_微信JS接口签名的生成
简要说明微信JS接口签名的生成方式签名生成规则参与签名的字段包括有效的 jsapi_ticket(获取方式详见微信 JSSDK 文档), noncestr (随机字符串,由开发者随机生成),time ...
历史微信开发者工具_微信开发者工具PC版-微信开发者工具下载v1.03.2010240-IE浏览器中文网站...
微信自成一个生态,微信开发者工具让用户能够自行设计自己的小程序界面.添加各种需要的功能,软件相对比较容易上手,可以与公众号对接,提升流量. 功能介绍菜单栏微信web开发者工具切换帐号:快速切换登 ...
微信支付服务商，![CDATA[sub_mch_id与sub_appid不匹配],微信小程序支付，签名错误，CDATA[签名错误]解决方法，支付签名验证失败
微信支付服务商,微信小程序支付,签名错误,CDATA[签名错误]解决方法 1:服务商和普通的商户支付在代码上没有太大差异(不同的是上传的参数,而且微信支付服务商参数上比较难找,官方文档又太简洁,所以很 ...
如何微信链接自定义_微信链接自定义
微信在分享第三方网站是不显示缩略图和描述的,如下图所示微信链接自定义_微信链接自定义要解决这个问题必须调用微信JS-SDK接口,下面讲一下如何调用接口. 第一部分准备步骤注册微信公众号. 通过 ...
微信开发者工具开发微信小程序
微信开发者工具开发微信小程序 1.下载工具 2.工具使用 3.增删改查 a:使用云开发数据库以查询为例 b:调用本地springboot接口以查询为例 1.下载工具进入微信公众平台:微信公众平台 ...
使用微信开发者工具调试微信网页授权登录-react
转:https://www.jianshu.com/p/9ced1a297c95 1.使用localhost本地调试使用微信开发者工具, 选择微信网页授权, 微信团队为广大的开发者提供了一个测试账号 ...

前端微信签名验证工具_微信jssdk 签名错误排查方法

前端微信签名验证工具_微信jssdk 签名错误排查方法相关推荐

最新文章

热门文章