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

news2025/1/21 15:22:59

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

最近在做安卓内嵌入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'],
});