微信公众号签名失效

公众号签名失效"/>

微信公众号签名失效

一、出现问题：

做微信公众号项目时，在调用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 ，即 ocation.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)