vue中使用微信JS-SDK 報錯 invalid signature 簽名無效問題分析記錄

時間 2019-11-05

標籤 php html 前端 vue ajax 算法 vue-router json segmentfault 後端欄目 JavaScript 简体版

原文原文鏈接

問題描述

以前在 html+js 的項目中使用微信JS-SDK，wx.config 配置正常，使用圖片上傳和掃一掃等功能都正常。html

如今的問題是，在 vue history模式項目中，一直是簽名無效，iOS和Android 都不行。
按照官方文檔中的1~6排查了都沒問題，打印出來的url編碼先後和後端獲取到的簽名的url編碼先後都是一致的，但就是一直 invalid signature 簽名無效。前端

常見錯誤及解決方法vue

invalid signature簽名錯誤。建議按以下順序檢查：
1.確認簽名算法正確，可用http://mp.weixin.qq.com/debug... 頁面工具進行校驗。ajax

2.確認config中nonceStr（js中駝峯標準大寫S）, timestamp與用以簽名中的對應noncestr, timestamp一致。算法

3.確認url是頁面完整的url(請在當前頁面alert(location.href.split('#')[0])確認)，包括'http(s)://'部分，以及'？'後面的GET參數部> 分,但不包括'#'hash後面的部分。vue-router

4.確認 config 中的 appid 與用來獲取 jsapi_ticket 的 appid 一致。json

5.確保必定緩存access_token和jsapi_ticket。segmentfault

6.確保你獲取用來簽名的url是動態獲取的，動態頁面可參見實例代碼中php的實現方式。若是是html的靜態頁面在前端經過ajax將url傳到後臺籤> 名，前端須要用js獲取當前頁面除去'#'hash部分的連接（可用location.href.split('#')[0]獲取,並且須要encodeURIComponent），由於頁> 面一旦分享，微信客戶端會在你的連接末尾加入其它參數，若是不是動態獲取當前連接，將致使分享後的頁面簽名失敗。後端

問題分析

通過查資料發現，參考資料前兩篇裏都說是

從 A頁面，跳轉到B頁面，因爲沒有刷新，B調用 JSSDK的內容，因爲vue-router切換的時候都是操做的瀏覽器歷史記錄，真實url爲第一次剛進入時的url。每次路由變化時都從新請求下簽名，簽名的url 須要用第一次進入時的url
IOS：微信IOS版，每次切換路由，SPA的url是不會變的，發起簽名請求的url參數必須是當前頁面的url就是最初進入頁面時的url
Android：微信安卓版，每次切換路由，SPA的url是會變的，發起簽名請求的url參數必須是當前頁面的url(不是最初進入頁面時的)

在另外一篇文章微信 jssdk 簽名錯誤 invalid signature裏，說是：

在iOS下，簽名依然失敗！由於在iOS下，微信須要你傳遞的是入口URL，而不是當前頁面的URL！
好比說，你在微信公衆號的某個菜單連接進入了A頁面，而後從A頁面的某個連接跳轉到B頁面，而後你在B頁面獲取簽名，若是是在安卓下，你應> 該用B頁面的URL地址來獲取，可是在iOS下，你還必須用A頁面的URL地址來獲取，不然就仍是簽名失敗！

有點兒懵 -_-||

嘗試解決

按前兩篇文裏說的方法試着改了一下代碼
在A組件增長：

if (navigator.userAgent.indexOf('iPhone') !== -1) {
      // IOS 記錄微信菜單打開時的url
      window.entryUrl = location.href.split('#')[0]
    }

在B組件修改：

let href = window.location.href.split('#')[0]
      let signLink = /(Android)/i.test(navigator.userAgent) ? href : window.entryUrl
      let encodeURI = encodeURIComponent(signLink)
      let data = {
        url: encodeURI
      }
      let url = '/.../getconfig.json'  //接口省略了
      this.$get(url, data, response => {
        let rtn = response.data
        wx.config({
          // beta: true, // 必須這麼寫，不然wx.invoke調用形式的jsapi會有問題 [這是企業微信的使用]
          // debug: false, // 關閉調試模式
          debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來
          appId: rtn.appId, // 必填，公衆號的惟一標識
          timestamp: rtn.timestamp, // 必填，生成簽名的時間戳
          nonceStr: rtn.nonceStr, // 必填，生成簽名的隨機串
          signature: rtn.signature, // 必填，簽名，見附錄1
          jsApiList: ['checkJsApi', 'chooseImage', 'uploadImage'] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2
        })

結果：

仍是invalid signature 簽名無效，依然是 iOS和Android 都不行。
真是讓人頭疼啊。。。。抓狂。。。。

等問題解決了再來更新問題的緣由和解決辦法，哎............

以上是2019-07-25下午

如下是2019-07-26上午

解決了

來更新了，問題解決了，去掉了encodeURIComponent就行了。。。。

那麼爲何官方文檔中的常見錯誤及解決方法第6條，以及別的文章裏都說要encodeURIComponent呢？

6.確保你獲取用來簽名的url是動態獲取的，動態頁面可參見實例代碼中php的實現方式。若是是html的靜態頁面在前端經過ajax將url傳到後臺簽名，前端須要用js獲取當前頁面除去'#'hash部分的連接（可用location.href.split('#')[0]獲取,並且須要encodeURIComponent），由於頁面一旦分享，微信客戶端會在你的連接末尾加入其它參數，若是不是動態獲取當前連接，將致使分享後的頁面簽名失敗。