vuejs实现微信JSSDK获取网页授权以及接口授权遇到的坑

yuan_life

于 2019-06-13 14:43:24 发布

阅读量3.4k

点赞数

分类专栏：微信JSSDK

本文链接：https://blog.youkuaiyun.com/yuan_life/article/details/91854646

版权

本文详细介绍了在使用VueJS实现微信JSSDK获取网页授权和接口授权时遇到的问题，包括签名不一致和跨域问题。重点在于解决签名错误，通过检查签名算法、nonceStr、timestamp的一致性，以及使用js-sha1库来解决签名问题。同时，文章提到了本地开发环境中跨域问题的解决办法，通过在Vue配置文件的proxyTable设置。此外，还推荐使用微信web开发者工具进行调试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vuejs实现微信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），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接

最低0.47元/天解锁文章