微信公众号开发调用jssdk,配置时总是 invalid signature?
前端环境: vue2.0 weixin-js-sdk: 1.6.0 后端环境: springboot2.0+ 引入maven依赖: <dependency>
<groupId>com.github.binarywang</groupId>
<artifactId>weixin-java-mp</artifactId>
<version>4.1.0</version>
<scope>compile</scope>
</dependency>
签名接口: public WxJsapiSignature getOfficialAccountsShareSign(String url) {
try {
AppConfigReq appConfigReq = new AppConfigReq();
appConfigReq.setKeyPrefix(JmsConstant.APP_CONFIG_WXPAY);
AppConfigWxpay appConfigWxpay = appConfigWxpayService.getAppConfigWxpay(appConfigReq);
// 使用这个实现类则表示将配置信息存储在内存中
WxMpDefaultConfigImpl wxMpDefaultConfig = new WxMpDefaultConfigImpl();
wxMpDefaultConfig.setAppId(appConfigWxpay.getSlAppId());
wxMpDefaultConfig.setSecret(appConfigWxpay.getSlSecret());
// 这里设值之前,已经通过@Component @Bean new WxMpServiceImpl() 注入了
wxMpService.setWxMpConfigStorage(wxMpDefaultConfig);
log.debug("JmsUserServiceImpl getOfficialAccountsShareSign wxMpService -> {}", wxMpService.getWxMpConfigStorage());
return wxMpService.createJsapiSignature(url);
} catch (WxErrorException e) {
log.error("JmsUserServiceImpl getOfficialAccountsShareSign createJsapiSignature error -> {}", e.getMessage());
Asserts.fail(e.getMessage());
}
return null;
}
签名方法: public WxJsapiSignature createJsapiSignature(String url) throws WxErrorException {
long timestamp = System.currentTimeMillis() / 1000L;
String randomStr = RandomUtils.getRandomStr();
String jsapiTicket = this.getJsapiTicket(false);
String signature = SHA1.genWithAmple(new String[]{"jsapi_ticket=" + jsapiTicket, "noncestr=" + randomStr, "timestamp=" + timestamp, "url=" + url});
WxJsapiSignature jsapiSignature = new WxJsapiSignature();
jsapiSignature.setAppId(this.getWxMpConfigStorage().getAppId());
jsapiSignature.setTimestamp(timestamp);
jsapiSignature.setNonceStr(randomStr);
jsapiSignature.setUrl(url);
jsapiSignature.setSignature(signature);
return jsapiSignature;
}
接口返回实体: @Data
public class WxJsapiSignature {
private String appId;
private String nonceStr;
private long timestamp;
private String url;
private String signature;
}
前端返回数据和错误信息: [图片] Vue调用方法: this.$http.post(
this.$apiUri.APP_ADD_UPDTA_HESIGN,
{
url: "https://mth-gzh.lanceyi.com/",
},
(res) => {
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
appId: res.data.appId, // 必填,公众号的唯一标识
timestamp: res.data.timestamp, // 必填,生成签名的时间戳
nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
signature: res.data.signature, // 必填,签名
url: res.data.url,
jsApiList: [
"checkJsApi",
"updateAppMessageShareData",
"onMenuShareAppMessage",
"onMenuShareTimeline",
"chooseWXPay",
"showOptionMenu",
"hideMenuItems",
"showMenuItems",
"onMenuShareTimeline",
], // 必填,需要使用的JS接口列表
});
wx.ready(function () {
// 分享给朋友
wx.onMenuShareAppMessage({
title: goods.title,
desc: goods.desc,
link: shareUrl,
imgUrl: goods.imgUrl,
success: function (res) {
console.log("分享成功");
},
cancel: function (res) {
console.log("分享失败!");
},
});
});
}
);
调试时的签名验证截图: [图片] [图片] 所有的条件都满足,实在找不到哪里出现问题,希望官方能给出正确解释和解决方案!