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

在微信開發中不少功能都要用到微信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);

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