微信JS-SDK出现“invalid signature”的问题时该如何解决

Posted 2023-04-22 FangAoLin

最近我在帮助前端生成微信 JS-SDK 分享签名时，遇到了一个问题，即 wx.config 初始化一直报 invalid signature 的错误，我想总结一下我排查这个问题的过程。

官方文档中已经说了详细介绍了排查过程，如下图所示：

 

校验工具校验签名过程

首先我在微信提供的签名校验工具中比对了接口生成的签名与工具签名差异，我将缓存中的 jsapi_ticket 和接口数据输入到校验工具中进行了比对。通过这一步操作，我能够更加准确地判断签名是否正确。

通过比对我发现接口签名与校验工具生成的签名是相同的，说明我们的签名计算过程是正确的，只能继续按文档进行排查。

调试代码

这时我要来了前端的地址，并下载安装了微信开发者工具，微信扫码进入 -> 公众号网页项目 -> 输入网址。

直接在 console 栏中输入初始化 wx.config 代码，里面的参数输入换成接口的参数即可。

这一步是方便调试，我们可以一直调试到成功再让前端继续开发，节省前后端沟通的成本。

 let confTest = 
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId:"", // 必填，公众号的唯一标识
    timestamp: 123,  // 必填，生成签名的时间戳
    nonceStr: \'\',  // 必填，生成签名的随机串
    signature:  \'\',// 必填，签名
    jsApiList: [] // 必填，需要使用的JS接口列表
  ;
  wx.config(confTest);

排查生成签名的参数

URL与编码

在 console 里面继续输入如下代码，排查前后端参与签名计算的域名是否一致：

alert(location.href.split(\'#\')[0])

在这里，我尝试了对网址进行正常编码和 URL 编码后生成签名，但是结果都是错误的。我推测这里有人可能是因没有进行 URL 编码参数丢失，而导致签名错误。虽然这些尝试都没有解决问题，但是我并没有放弃，而是继续进行排查。（毕竟需要交差）

jsapi_ticket

接着我继续检查生成 jsapi_ticket 时使用的公众号 appid 是否正确，以及请求的 type 是否为 jsapi。在这个过程中，我发现我的请求获取 jsapi_ticket 的 type 实际上是 wx_card，而不是正确的 jsapi 类型。我立即找到了问题所在，尝试清理了缓存并重新生成 jsapi_ticket，最终成功解决了问题。

以上除了文档第五条缓存 access_token 和 jsapi_ticket （我本来就缓存了），基本覆盖了文档所说的整个过程。

自定义微信分享链接(使用JS-SDK) + 实现预览pdf

参考技术A

可参考：微信JS-SDK说明文档 >

此时可能出现白名单错误（忘截图了），需要在微信公众号中设置错误中的IP

注意：access_token和ticket都需要缓存

4. 获取签名 signature

将以上内容以键值对形式拼接，类似如下

本地引入sha1算法（需网上查找）
将上述拼接的字符串以参数的形式传递到sha1中得到 signature
signature = sha1(拼接完的字符串)
验证 signature 是否正确 >
将appId，nonceStr，timestamp和signature返回给前端

官网上是这样描述的：

这时候调用 updateAppMessageShareData ， updateTimelineShareData 的时候就可以生效了，具体原理不清楚。。

注意：imgUrl配置有严格的要求
尺寸120 x 120，大小不超过10K，不支持GIF格式。必须采用https协议（最好写完整url）,不支持base64。由于我使用的是vue，在webpack打包时图片小于10k的是会自动打包成base64导致无法正常显示图片，因此在webpack.base.config.js中修改默认配置

由于在网页中直接查看pdf的路径是无法在微信中查看（安卓）和分享（ios），因此使用pdf插件进行优化 --- pdf.js 。其原理是绘制成canvas，最终在真机上放大时可能出现模糊的问题。

创建之后控制台会报错出现跨域问题，因为pdf.js不支持跨域访问。此时可以将错误跨域信息在上一步你引入的文件中查找，然后将其判断语句注释掉即可解决这个问题。最后会发现pdf出现在这个容器中（忘截图了），也实现了微信中预览和分享的功能。