微信公众号config:invalid signature签名失效

做微信公众号项目时，在调用SDK的时候，经常会出现config:invalid signature签名失效的问题，下面来介绍一下出现问题的原因以及解决方法。

出现的原因，我只从前端方面做一下介绍，如果后端的原因，无非是签名算法问题、access_token等等，在保证后端没问题的情况下，再来讨论一下公众号的问题。

首先不得不吐槽一点，微信的开发文档，真的太辣鸡啦~

以下是配置及获取SDK结果的方法：

/*** 通过config接口注入权限验证配置*/wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: config.appId, // 必填，公众号的唯一标识timestamp: config.timestamp, // 必填，生成签名的时间戳nonceStr: config.nonceStr, // 必填，生成签名的随机串signature: config.signature, // 必填，签名jsApiList: ['getLocation'] // 必填，需要使用的JS接口列表});/*** 通过ready接口处理成功验证*/wx.ready(function() {console.log('通过ready接口处理成功验证');// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。});/*** 通过error接口处理失败验证*/wx.error(function(res) {console.log('通过error接口处理失败验证');// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。});

原因：

在获取签名的时候，一般情况下是调用后端接口来获取，该接口的参数是公众号页面的url，其中，这个URL就是罪魁祸首。

在安卓系统上，获取SDK验证的传你当前所在页的URL，即 location.href 。

而iOS系统，只认从公众号菜单首次进入页面的URL（重点！！！），所以该URL应该是：

在首次进入时，存一下（sessionStorage也可）当前的URL，在调用SDK的地方使用。

示例代码：

// 如果你最初跳转了微信授权的url，在回跳到你项目的URL时，在此时进行记录当前首次进入项目的URL
// 在调用SDK方法的地方进行使用setItemByEntryUrl(window.location.href.split('#')[0]);// 该方法是将初始地址存进storage中，在后续进行使用

// 在调用SDK时，通过URL获取签名let url = '';if (navigator.userAgent.indexOf('iPhone') !== -1) {// IOS 记录微信菜单打开时的url// getItemByEntryUrl()方法 是拿到之前存在storage中的URLurl = getItemByEntryUrl();} else {// 安卓 记录当前使用SDK的页面的urlconst { href } = window.location;url = href.split('#')[0];}const config = await wxAppGetSignature(url);

getItemByEntryUrl(); // 里面是什么
//在最开始不是通过调用setItemByEntryUrl() 将URL存在storage中嘛，然后通过getItemByEntryUrl()把URL取出来。就是封装的sessionStorage.setItem()、sessionStorage.getItem()的方法。相当于：setItemByEntryUrl() => sessionStorage.setItem(EntryUrl)getItemByEntryUrl() => sessionStorage.getItem(EntryUrl)

微信公众号config:invalid signature签名失效相关推荐

微信jssdk ios下报config invalid signature签名错误问题 Android正常
微信jssdk ios下报config invalid signature签名错误问题 Android正常最近Taro项目出于安全考虑,所有上传图片的地方都要改为,先把图片上传到微信服务器,然后根据 ...
微信公众号之支付验证签名失败
微信公众号支付最坑莫过于paySign的生成,因为他的生成参数和统一下单获得sign的生成参数不一样,因次我在这里一直弹出支付验证签名失败.最后发现paySign的生成参数是:appId,timeSt ...
微信jssdk ios下config invalid signature签名错误问题，Android成功ios失败
问题出现背景: 常见错误及解决方法相关官方文档 vue等单页面spa应用 config调用处不在启动页 Android及开发者工具浏览器正常,ios下debug invalid signature失 ...
laravel微信公众号自定义分享获取签名
话不多话上代码! public function getConfig(Request $request) {//获取参数$url = $request->get('url');//公众号的app ...
微信公众号纯文字自动回复换行失效了
在文字前面加一个空白的标签 <xml>... ...<Content><a></a>文字内容</Content></xml>
vue3实现微信公众号一次性订阅消息+ios和Android的63002 config:invalid signature问题
微信开放文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#23 微信 JS 接口签 ...
C# 微信JS-SDK之config接口注入权限验证invalid signature签名错误
文章目录 1.开发环境 2.我的代码 3.问题描述 4.问题分析 5.问题根源 6.解决办法记一次使用微信JS-SDK分享接口,config接口注入权限验证失败, 提示invalid signatu ...
微信公众号H5端网页分享微信好友-实现思路(踩坑记录总结)
第三方配置就不说了,按着官方文档来就可以了第一个坑在进行接口鉴权时需要签名等参数,签名等参数需要调用后端接口返回.需要注意的是:调用接口需要一个参数就是页面路径地址(url参数,我这边页面路径用u ...
微信公众号获取用户当前地址经纬度
微信公众号通过js-sdk获取用户地理位置第一步:(第一步比较简单不做过多解释) 1.登录微信公众平台启用服务器配置 2.配置网页授权域名填写项目所使用的的域名并将文件下载放到项目根目录 3.然后在 ...

微信公众号config:invalid signature签名失效

微信公众号config:invalid signature签名失效相关推荐

最新文章

热门文章