微信分享JSSDK-invalid signature簽名錯誤的解決方案

王磊的部落格發表於2017-04-19
JS

核對官方步驟，確認簽名演算法。

  • 確認簽名演算法正確，可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 頁面工具進行校驗。
  • 確認config中nonceStr（js中駝峰標準大寫S）, timestamp與用以簽名中的對應noncestr, timestamp一致。
  • 確認url是頁面完整的url(請在當前頁面alert(location.href.split('#')[0])確認)，包括'http(s)://'部分，以及'？'後面的GET引數部分,但不包括'#'hash後面的部分。
  • 確認 config 中的 appid 與用來獲取 jsapi_ticket 的 appid 一致。
  • 確保一定快取access_token和jsapi_ticket。
  • 確保你獲取用來簽名的url是動態獲取的，動態頁面可參見例項程式碼中php的實現方式。如果是html的靜態頁面在前端通過ajax將url傳到後臺簽名，前端需要用js獲取當前頁面除去'#'hash部分的連結（可用location.href.split('#')[0]獲取,而且需要encodeURIComponent，後臺decodeURIComponent解碼），因為頁面一旦分享，微信客戶端會在你的連結末尾加入其它引數，如果不是動態獲取當前連結，將導致分享後的頁面簽名失敗。

 

 

簽名是正確，上面的步驟還沒能解決你的問題（invalid signature）那就用是url的問題，注意：微信公眾號必須配置了你除錯的安全域名（可以配置二級域名：xxx.com，而不用配置多個a.xxx.com/b.xxx.com等）。

原因：微信分享時候會給你當前頁面新增多個引數，你sha1時候必須保證url地址是微信給你加了引數之後的地址，這樣才不會報config：invalid signature.

解決方案：sha1之前url必須是解碼之後的正常的肉眼直接能識別的url，如果你用的是靜態頁面，在你配置wx.config之前，先通過encodeURIComponent(location.href.split('#')[0])把當前url編碼傳遞到後臺，後臺通過decodeURIComponent解碼，核心程式碼如下：

前臺html頁面，編碼傳遞url：

 

jQuery.post("/xxx", {"url": encodeURIComponent(window.location.href.split('#')[0]),"t": new Date().getTime()}, function (result) {
    if (result.errno != 0) {
        alert("您當前的網路不穩定請稍後再試！");
        return;
    }
    var shareUrl = result.data.url;
    wx.config({
        debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
        appId: 'xxx', // 必填，公眾號的唯一標識
        timestamp: result.data.timestamp, // 必填，生成簽名的時間戳
        nonceStr: result.data.nonceStr, // 必填，生成簽名的隨機串
        signature: result.data.signature,// 必填，簽名，見附錄1
        jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone'] // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2
    });

 

後臺程式碼：

let url = decodeURIComponent( this.post().url);  //重點，解碼前臺傳遞url
//當前時間戳
let timestamp = parseInt( new Date().getTime()/1000);
//隨機字串
let nonceStr = Math.random().toString(36).substr(2,16);

 

相關文章