記錄--微信呼叫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

如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/541619.html

標籤：其他

上一篇：Cesium viewer.extend 五個拓展(五)

下一篇：JavaScript 防抖和節流