先上測試地址以示成功：
用微信打開下面地址測試
http://game.4gshu.com/deep-love/index.html
獲直接掃二維碼君
用異步ajax的方式獲取數字簽名
異步的方式好
1、前后端分離啊
2、一個服務可以供多個微信公眾帳號的數字簽名服務
在服務器端用NodeJS跑起一個數字簽名生成服務，web端用ajax方式請求NodeJS服務獲取數字簽名信息
得到信息后配置微信JS-SDK
步驟
第一步 認證的微信公眾帳號
首先你得擁有一個通過認證了的微信公眾號或者開發者帳號，沒有通過認證的公眾帳號。數字簽名認證也能成功，但是分享信息是無法設置成功的；
第二步 添加安全域名
在公眾帳號平台后台添加app運行的域名地址，可以理解為為某個域名添加白名單功能
以我們公司旗下的榕樹下為例：
微信公眾號是：榕樹下，添加了game.4gshu.com為安全域名，那么我在game.4gshu.com上的網頁可以使用榕樹下公眾帳號的數字簽名了
第三步 生成數字簽名
在微信公眾平台后台上面能找到一個 appid 及 secret字符串
通過這兩個數據，請求微信提供的兩個公開API地址，生成對應的access_token后再生成ticket再通過規則加密成數字簽名
注意，數字簽名必須在服務端生成，這里我以NodeJS來實現
數字簽名具體生成過程，NodeJS版本
1、獲取微信簽名所需的access_token
https.get('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=你的appid寫在這里&secret=你的secret寫在這里', function(_res) {
// 這個異步回調里可以獲取access_token
})
2、獲取微信簽名所需的ticket
https.get('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=上一步中獲取的access_token&type=jsapi', function(_res){
// 這個異步回調里可以獲取ticket
});
3、生成數字簽名具體方法
ticket、 noncestr、timestamp、url通過微信的規則用sha1加密
noncestr和timestamp在微信官方sample包中有具體的生成方法函數
// noncestr var createNonceStr = function() { return Math.random().toString(36).substr(2, 15); }; // timestamp var createTimeStamp = function () { return parseInt(new Date().getTime() / 1000) + ''; };
也可以參考我代碼中的代碼
// 計算簽名方法 var calcSignature = function (ticket, noncestr, ts, url) { var str = 'jsapi_ticket=' + ticket + '&noncestr=' + noncestr + '×tamp='+ ts +'&url=' + url; shaObj = new jsSHA(str, 'TEXT'); return shaObj.getHash('SHA-1', 'HEX'); } var signature = calcSignature(ticket, noncestr, timestamp, url);
4、返回輸出signature數字簽名以及在生成數字簽名時用到的timestamp、nonceStr、url、及appid
因為在客戶內初始化微信JS-SDK中還要用到
5、至此數字簽名生成成功
第四步 在web中如何使用數字簽名？
1、引入微信JS-SDK
2、請求服務器獲取數字簽名
在web上用ajax方式請求NodeJS服務地址，請求時將當前web地址url上傳至服務器
服務器生成數字簽名后返回：
signature，timestamp, appid, nonceStr
這四個數據用於配置微信JS-SDK
wx.config({ debug: true, appId: appid, timestamp: timestamp, nonceStr: nonceStr, signature: signature, jsApiList: [ 'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'hideMenuItems', 'chooseImage' ] });
3、在wx.ready內調用API
wx.ready(function(){ var sdata = { title: '那年|時光遺忘了，文字卻清晰地復刻着', desc: '那年|時光遺忘了，文字卻清晰地復刻着', link: 'http://game.4gshu.com/deep-love/index2.html', imgUrl: 'http://game.4gshu.com/xuangedan/other-project/2015-01-06/img/share-wx-logo.jpg', success: function () { alert('用戶確認分享后執行的回調函數'); }, cancel: function () { alert('用戶取消分享后執行的回調函數'); } }; wx.onMenuShareTimeline(sdata); wx.onMenuShareAppMessage(sdata); });
4、搞定
關於數字簽名過期與微信API的1w次請求的限制問題
由於微信提供的兩個數字簽名生成API有7200秒的有效期，並且暫時有1w次的限制，所以在我們自己服務器上需要將數字簽名緩存
邏輯是：
如果用戶請求時沒緩存中沒有數字簽名，那么請求執行
第三步 生成數字簽名
如果緩存中有，並且是在2小時內那么直接返回數字簽名信息，不去請求微信服務器
如果緩存中的數字簽名過期了(超過2小時)則還是執行
第三步 生成數字簽名
注意：由於微信規定地址欄中的參數發生變化都認作是新的請求地址，數字簽名也需要重新生成。
新生成的數字簽名將存入cachedSignatures對象內
緩存中的數據結構將url設為key
數據結構如下：
var cachedSignatures = { 'http://game.4gshu.com/': { appid: ’微信認證帳號的的appid' ,secret: '微信認證帳號的secret' ,timestamp: '1421135250' ,noncestr: 'ihj9ezfxf26jq0k' } }
測試項目源碼
我的項目源碼已經放到Github上了，有需要的可以pull下來看一看，
NodeJS我也是一知半解，將就着用，多有不足之處，歡迎交流
源碼地址：https://github.com/willian12345/wechat-JS-SDK-demo
======== ======== ======== ======== ======== ======== ======== ======== ======== ========
博客園willian12345
by sheldon.wang