微信JS-SDK“分享資訊設定”API及數字簽名生成方法（NodeJS版本）

池中物willian發表於2015-01-28
APINodeJS

先上測試地址以示成功：

用微信開啟下面地址測試

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 + '&timestamp='+ 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

相關文章