完美解決微信js-sdk在IOS系統報invalid signature的問題
做者原創,轉載註明出處javascript
1、解決方案
先說結論再說過程:vue
(一)npm i jweixin-1.6.0 。系本人優化封裝。修正了微信js-sdk官方1.6.0的bug,並針對iOS系統url驗證簽名錯誤進行優化。java
(二)在須要分享的頁面引入。git
import wx from 'jweixin-1.6.0'
正常狀況,按官方標準編碼便可。github
(三)若是IOS系統的分享有問題(請自行編碼判斷蘋果和安卓)。向後臺請求的地址:npm
signLink = decodeURIComponent(wx.signurl())
signLink是wx.config 須要驗證簽名的url。其中wx.signurl(),系本人增長。瀏覽器
2、問題現象
(一)vue開發微信公衆號單頁應用。自定義圖文消息分享好友、羣、朋友圈。項目使用了三方封裝的weixin-js-sdk。該工具基於微信js-jdk 1.4.0封裝,npm安裝。安全
- 安卓手機測試正常。
- 微信開發者工具正常。
- 蘋果手機沒法分享。
- wx.config開啓debug模式。蘋果手機顯示invalid signature。
- 使用updateAppMessageShareData。顯示offline verifying。
(二)本項目使用history,url沒有#符號。 試遍網上主要方法,均無有效解決方案。緣由很明確。蘋果系統瀏覽器url保存問題。微信
- 本項目單頁應用,打開即獲取微信受權及用戶信息。問題現象是,蘋果手機url爲帶着微信返回code的地址。不符合安全以及業務使用須要。所以使用replace替換爲業務地址。如
/?code=xxxx&state=123456
在顯示時須要被改成
/?order=123456。
- 此時蘋果手機沒法使用正確的地址驗證簽名。嘗試使用全部可能的url寫死給config驗證簽名,均無效。
3、解決思路
(一)方案思路。兩個方向,一是升級jdk1.4.0到1.6.0,用新的可能會好。二是找到正確的url,並進行簽名驗證。微信開發
-
試了不少網上的npmjs中的1.6.0版本,包括在head裏直接引入
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
。都報document
not a function。說明這個版本存在bug。需改正。 -
根據print出的地址寫死,仍然驗證無效。說明驗證先後有轉碼。需讓jdk在驗證前把地址返回。
4、實施步驟
- 自微信官方獲取SDK版本https://res.wx.qq.com/open/js/jweixin-1.6.0.js。
- 測試並修正該版本的bug。
- 找到SDK中驗證url參數,用signurl:function返回。
- 發佈到github:https://github.com/luquan22/jweixin-js-sdk。具體改動見github的readme。
- 發佈到npm。