1. 程式人生 > >微信開發配置JSSDK,註入權限驗證,以及invalid signature簽名錯誤解決

微信開發配置JSSDK,註入權限驗證,以及invalid signature簽名錯誤解決

工具 沒有 ans dem menus true 發現 bin ces

在微信開發中很多功能都要用到微信JSSDK,關於JSSDK的使用,微信官方的文檔已經比較詳細,一定要仔細去看文檔。

<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

我們先進入微信SDK的JS文件。在頁面中使用ajax註入權限驗證,關於後臺的驗證以及簽名算法,官方文檔寫的很詳細,也有demo可以查看。

$(function(){  
    //var url = window.location.href; 
    var url=encodeURIComponent(location.href.split(‘#‘)[0]); 
    
//alert(url); //ajax註入權限驗證 $.ajax({ url:"ajax", //dataType: ‘json‘, type:‘POST‘, data: {url:url}, error: function(XMLHttpRequest, textStatus, errorThrown){ alert("發生錯誤:"+errorThrown); }, success: function(res){
var appId = res.appid; var noncestr = res.noncestr; var jsapi_ticket = res.jsapi_ticket; var timestamp = res.timestamp; var signature = res.signature; wx.config({ debug: true, //開啟調試模式,調用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數,可以在pc端打開,參數信息會通過log打出,僅在pc端時才會打印。
appId: appId, //必填,公眾號的唯一標識 timestamp: timestamp, // 必填,生成簽名的時間戳 nonceStr: noncestr, //必填,生成簽名的隨機串 signature: signature,// 必填,簽名,見附錄1 jsApiList: [‘onMenuShareTimeline‘,‘onMenuShareAppMessage‘,‘onMenuShareQQ‘, ‘onMenuShareWeibo‘,‘onMenuShareQZone‘,‘chooseImage‘, ‘uploadImage‘,‘downloadImage‘,‘startRecord‘,‘stopRecord‘, ‘onVoiceRecordEnd‘,‘playVoice‘,‘pauseVoice‘,‘stopVoice‘, ‘translateVoice‘,‘openLocation‘,‘getLocation‘,‘hideOptionMenu‘, ‘showOptionMenu‘,‘closeWindow‘,‘hideMenuItems‘,‘showMenuItems‘, ‘showAllNonBaseMenuItem‘,‘hideAllNonBaseMenuItem‘,‘scanQRCode‘] //必填,需要使用的JS接口列表,所有JS接口列表 見附錄2 }); } }); });

這裏主要的難點在於配置會遇到invalid signature簽名錯誤,官方文檔給出了5條排查的問題。

1.確認簽名算法正確,可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 頁面工具進行校驗。

2.確認config中nonceStr(js中駝峰標準大寫S), timestamp與用以簽名中的對應noncestr, timestamp一致。

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

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

5.確保一定緩存access_token和jsapi_ticket。

6.確保你獲取用來簽名的url是動態獲取的,動態頁面可參見實例代碼中php的實現方式。如果是html的靜態頁面在前端通過ajax將url傳到後臺簽名,前端需要用js獲取當前頁面除去‘#‘hash部分的鏈接(可用location.href.split(‘#‘)[0]獲取,而且需要encodeURIComponent),因為頁面一旦分享,微信客戶端會在你的鏈接末尾加入其它參數,如果不是動態獲取當前鏈接,將導致分享後的頁面簽名失敗。

在仔細排查前5條後,都沒有發現問題,第六條寫的不是很清楚。

這裏要註意的是,在微信瀏覽器裏,微信客戶端會給你的連接轉碼,這裏把連接提交到後臺的時候一定要用encodeURIComponent。

var url=encodeURIComponent(location.href.split(‘#‘)[0]); 

這個連接提交到後臺,後臺處理

$url=urldecode($_POST[‘url‘]);  //這裏轉回後成為簽名的參數
$string="jsapi_ticket={$ticket}&noncestr{$noncestr}&timestamp={$timestamp}&url={$url}";
$signature=sha1($string);

數據轉回到頁面上後就不報簽名錯誤了。

微信開發配置JSSDK,註入權限驗證,以及invalid signature簽名錯誤解決