这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

记录--微信调用jssdk--Invalid Signature, updateAppMessageShareData: denied等问题

最近在做安卓内嵌入H5活动页拉新活动,遇到的棘手问题记录下,

一是为了日后遇到同样问题好回顾,二是希望能帮到有同样问题的兄弟。

废话不多说,先从最棘手的问题直接开始:

一、Invalid Signature

1.因为项目内是Vue中的hash模式,所以遇到这个问题时,一直怀疑hash模式是不是不可以。——其实可以,hash和history都可以;记得 encodeURIComponent(location.href.split('#')[0])

2.按照官方文档的步骤去排查错误:
(1)确认签名算法正确,可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。——这个问题主要在后台那里,要点:1.公众号后台配置ip白名单以及JS安全域名。重点:ip白名单记得要配后台线上服务器的ip,否则线上后台是拿不到asscee_token的,access_token为null时也可以参与signature的计算,很坑!!!建议让后台把access_token和jsapi_ticket返回或者让后台看看到底有没有返回值;2.记得拿公众号的APPID去计算,一定要后台亲眼去比对,APPID对不对!(2)确认config中nonceStr(js中驼峰标准大写S), timestamp与用以签名中的对应noncestr, timestamp一致。——这一步没啥好说的,自己好好检查

(3)确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认),包括'http(s)://'部分,以及'?'后面的GET参数部分,但不包括'#'hash后面的部分。——记得 encodeURIComponent(location.href.split('#')[0])

(4)确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。

(5)确保一定缓存access_token和jsapi_ticket。

(6)确保你获取用来签名的url是动态获取的,动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名,前端需要用js获取当前页面除去'#'hash部分的链接(可用location.href.split('#')[0]获取,而且需要encodeURIComponent),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。**——记得前端把当前页面路径(encodeURIComponent(location.href.split('#')[0]))ajax 传给后台 **

二、the permission value is offline verifying

(1)确认config正确通过。——记得在页面挂在完毕去注入JSSDK,如果有路由拦截跳转的,要跳转完毕后再去注入,要保证注入的页面url和调用分享接口的url是一模一样(encodeURIComponent(location.href.split('#')[0]))

(2)如果是在页面加载好时就调用了JSAPI,则必须写在wx.ready的回调中。——wx.ready的回调去写分享逻辑

(3)确认config的jsApiList参数包含了这个JSAPI。

三、permission denied

(1)先去微信公众平台 看看公众号没有权限使用这个JSAPI

(2)可以调用jweixin.checkJsApi,记得把debug打开,微信开发者工具和真机报的错误很大可能会不一样。引用的最新的jssdk 1.6;也用了最新的分享给好友的方法;真机 updateAppMessageShareData: true; updateTimelineShareData: true; config: ok,就是分享不了,我真是吐了,

如果遇到同样的情况,记得jsApiList加入 onMenuShareAppMessage,没错就是老版本,那个即将废弃的分享api

最后放上封装的类:
1.初始化vue时,let wx = new Wx();if(wx.isWeiXin){ Vue.prototype.wx = wx; }
2.调用时,this.wx.share(title, desc, link, imgUrl, successCallback)
3.记得改一下_initJssdk方法中请求接口config配置的api?

export class Wx {
constructor (jsApiList = ['updateAppMessageShareData', 'onMenuShareAppMessage' , 'closeWindow']) {
this.isWeiXin = this.isInWx()
this.wxJssdkInfo = {}
this.jsApiList = jsApiList
}
isInWx () {
return navigator.userAgent.toLowerCase().indexOf('micromessenger') > -1 ? true : false
}
async _initJssdk (callback) {
try {
let auth_url = encodeURIComponent(location.href.split('#')[0])
let params = { auth_url }
this.wxJssdkInfo = await fissionApi.getWxAuth(params)
jweixin.config({
debug: IS_PRO() ? false : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: this.wxJssdkInfo.app_id, // 必填,公众号的唯一标识
timestamp: this.wxJssdkInfo.timestamp, // 必填,生成签名的时间戳
nonceStr: this.wxJssdkInfo.noncestr, // 必填,生成签名的随机串
signature: this.wxJssdkInfo.signature,// 必填,签名
jsApiList: this.jsApiList // 必填,需要使用的JS接口列表
})
jweixin.error(res => console.log(res))
if (callback) {
callback(this.wxJssdkInfo)
}
} catch (err) {
console.log(err)
}
}
share (title, desc, link, imgUrl, successCallback) {
link = link || window.location.href;
if(!this.isWeiXin) return
this._initJssdk(() => {
jweixin.ready(() => {
jweixin.checkJsApi({
jsApiList: this.jsApiList, // 需要检测的JS接口列表,所有JS接口列表见附录2,
success: function(res) {
if (res.checkResult.updateAppMessageShareData || res.checkResult.onMenuShareAppMessage) {
jweixin.onMenuShareAppMessage({
title,
desc,
link,
imgUrl,
success: res => successCallback && successCallback(res),
fail: function(error) {
console.log('updateAppMessageShareData error:', error);
}
})
jweixin.onMenuShareAppMessage({
title,
desc,
link,
imgUrl,
success: res => successCallback && successCallback(res),
fail: function(error) {
console.log('updateAppMessageShareData error:', error);
}
})
}
}
})
})
})
}
closeH5 () {
wx.closeWindow();
}
}

【问题】

使用微信SDK的分享接口wx.updateAppMessageShareData时,控制台出现‘updateAppMessageShareData:fail, the permission value is offline verifying’错误提示。

【解决】

jsApiList里面声明updateAppMessageShareData方法。

示例代码如下:

wx.config({
debug: false,
appId: data.appId,
timestamp: data.timestamp,
nonceStr: data.nonceStr,
signature: data.signature,
jsApiList: ['updateAppMessageShareData'],
});

本文转载于:

https://www.jianshu.com/p/d471217e7bd0

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

记录--微信调用jssdk--Invalid Signature, updateAppMessageShareData: denied等问题

发表回复