如何用伺服器做微信js

① 如何在React中調用微信的jsSDK

1. 微信JSSDK使用步驟簡介

我們既然是在做基於微信的開發，當然就離不開微信的開發文檔了。開始之前希望大家能先去看下《微信JS-SDK說明文檔》。那麼我們怎麼樣才能用上微信的JSSDK呢？以下基本步驟就是基於該文檔的。

需要注意的是，如果本人下面的描述你看的有點雲里霧里的話，我建議你：

• 回頭看下本系列《小白學react》的歷史基礎文章，特別是《小白學react之altjs的Action和Store》以及《小白學react之打通React Component任督二脈》，或/和：

• 直接跳過我的描述，在文章後面下載最新的源碼，先閱讀源碼，碰到問題再反過來看文章的描述。

步驟一：綁定域名

先登錄微信公眾平台進入「公眾號設置」的「功能設置」里填寫「JS介面安全域名」。
備註：登錄後可在「開發者中心」查看對應的介面許可權。

這里綁定的時候需要注意不要帶前面的http協議頭。寫法跟上一篇《小白學react之網頁獲取微信用戶信息》中的網頁回調域名設置的寫法是一樣的。

步驟二：引入JS文件

在需要調用JS介面的頁面引入如下JS文件，（支持https）：

請注意，如果你的頁面啟用了https，務必引入 ：
，否則將無法在iOS9.0以上系統中成功使用JSSDK

因為我們的index.html是通過ejs模版生成的，所以我們只需要在我們的index.ejs中的body部分末尾加入相應的微信jssdk庫的引用就好了。

• <% for (var chunk in htmlWebpackPlugin.files.chunks) { %> <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>


• <script src="jweixin-1.0.0.js"></script>


• <% } %>



步驟三：通過config介面注入許可權驗證配置

所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用（同一個url僅需調用一次，對於變化url的SPA的web app可在每次url變化時進行調用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實現web app的頁面會導致簽名失敗，此問題會在Android6.2中修復）。

• wx.config({


• debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會列印。


• appId: '', // 必填，公眾號的唯一標識


• timestamp: , // 必填，生成簽名的時間戳


• nonceStr: '', // 必填，生成簽名的隨機串


• signature: '',// 必填，簽名，見附錄1


• jsApiList: [] // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2});



這一步的關鍵是如何生成正確的簽名。這里微信jssdk文檔中有給出不同語言版本的簽名演算法示例大家可以參考。往下我們也會就github上的一個簽名演算法的封裝進行學習。

在我們的實戰過程中，簽名會在伺服器端發生。

react客戶端會像之前的獲取微信用戶信息一樣，通過一個restfulApi調用伺服器端的api，然後由伺服器來生成對應的簽名，然後將簽名信息返回給客戶端。

客戶端獲取到上面wx.config示例代碼中的簽名相關信息後，就會調用一個Alt的Action，來觸發將獲取回來的信息保存到一個跟該Action綁定的jssdk狀態管理的Store裡面。然後就可以調用wx.config來配置我們需要用到的JS介面列表了。

注意這里的wx這個對象是通過上一步的JS文件引入進來的。我們在react的客戶端代碼中可以直接通過window.wx對其進行引用：

• window.wx.config({


• ...


• });



步驟四：通過ready介面處理成功驗證

• wx.ready(function(){ // config信息驗證後會執行ready方法，所有介面調用都必須在config介面獲得結果之後，config是一個客戶端的非同步操作，所以如果需要在頁面載入時就調用相關介面，則須把相關介面放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的介面，則可以直接調用，不需要放在ready函數中。});



隨後，react客戶端負責jssdk狀態管理的store會調用wx.ready來監聽config配置是否成功，如果成功的話，就會將該store的一個ready狀態設置成true。

這樣的話，通過AltContainer綁定了該store的相應的Component組件就能知道響應的jssdk的api是否已經准備就緒，可以進行調用了。

步驟五：通過error介面處理失敗驗證

• wx.error(function(res){ // config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這里更新簽名。});



同理，如果如果配置失敗的話，那麼就在wx.error這個監聽介面中將ready狀態設置成false。

2. 生成簽名

如前面所述，我們需要用到jssdk的頁面必須要要注入調用到的api的配置信息。

• wx.config({


• debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會列印。


• appId: '', // 必填，公眾號的唯一標識


• timestamp: , // 必填，生成簽名的時間戳


• nonceStr: '', // 必填，生成簽名的隨機串


• signature: '',// 必填，簽名，見附錄1


• jsApiList: [] // 必填，需要使用的JS介面列表



而注入JS介面到頁面時，我們可以看到，還需要使用到其他一些信息。其中appId我們可以從公眾號管理後台獲得。signature是跟所訪問頁面的url關聯的一個簽名，它有專門的一套演算法來生成。另外兩個參數nonceStr和signature都是在簽名的過程中生成的。

這里通過wx.config傳進去這些參數，主要是為了讓微信去判斷我們生成的簽名和微信通過這些信息生成的簽名是否一致，如果不一致的話，那麼注入到該頁面的jsApiListj就失敗。

那麼我們在伺服器這邊的簽名演算法是如何的呢？根據微信開發文檔我們需要提供以下4個參數，然後通過sha1算發來生成對應的簽名：

• noncestr：一個隨機字元串，我們隨便填寫

• jsapi_ticket：jsapi_ticket是公眾號用於調用微信JS介面的臨時票據

• timestamp: 簽名時間戳。注意這個時間戳需要和上面傳入wx.config的時間戳一致

• url: 調用JS介面頁面的完整URL。我們可以從react客戶端通過location.href獲得，並傳給伺服器端

那麼這里主要需要解決的就是如何獲得jsapi_ticket這個臨時票據了。

根據文檔的描述，我們可以通過以下這個介面獲得：

cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

從中可以看到，我們調用這個介面首先要獲得一個access_token。這里微信也有相應的api來處理。

cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

這里需要用到我們的微信公眾號的appId和secret，這些我們都是已知的，所以好辦。

那麼，也就是說，我們其實只需要提供我們的微信公眾號的appId和secret，就能獲取到access_token，從而就會獲得我們需要的jsapi_ticket。

這里我們參考下github上一個示例(wechat-sdk-demo )的簽名的實現。其傳入的參數有兩個，其中:

• url: react客戶端傳進來的需要注入jsapi的頁面url

• callback: 一個回調函數，接受一個json格式的參數。主要是用來將生成的簽名信息等回傳給上層調用函數。

• const config = { grant_type: 'client_credential', appid: 'xxxx', secret: "xxxxx", noncestr:'Wm3WZYTPz0wzccnW', accessTokenUrlin.qq.com/cgi-bin/token', ticketUrl:'com/cgi-bin/ticket/getticket',


• }



• exports.sign = function (url,callback) { var noncestr = config.noncestr,


• timestamp = Math.floor(Date.now()/1000), //精確到秒


• ...


• request(config.accessTokenUrl + '?grant_type=' + config.grant_type + '&appid=' + config.appid + '&secret=' + config.secret ,function(error, response, body){ if (!error && response.statusCode == 200) { var tokenMap = JSON.parse(body);


• request(config.ticketUrl + '?access_token=' + tokenMap.access_token + '&type=jsapi', function(error, resp, json){ if (!error && response.statusCode == 200) { var ticketMap = JSON.parse(json);


• cache.put('ticket',ticketMap.ticket,config.cache_ration); //加入緩存


• callback({ noncestr:noncestr, timestamp:timestamp, url:url, jsapi_ticket:ticketMap.ticket, signature:sha1('jsapi_ticket=' + ticketMap.ticket + '&noncestr=' + noncestr + '&timestamp=' + timestamp + '&url=' + url)


• });


• }


• })


• }


• })


• }


• }



這里的流程和我們剛才描述的並無二致。首先是通過appId和secret獲得調用獲取jsapi_ticket的access_token，然後通過該access_token獲得我們簽名需要用到的jsapi_ticket。noncestr我們是提前隨便填寫好的。timestamp的演算法也比較簡單。

最後就是通過sha1這個庫提供的方法，將jsapi_ticket，noncestr，timestamp和頁面url進行sha1簽名，然後將以上這些信息通過callback返回給上層調用函數。

那麼我們往下看下我們的上層調用函數。其實就是我們的express路由:

• app.get("/api/signature", function(req,res) { const url = req.query.url.split('#')[0];



• signature.sign(url,function(signatureMap){


• signatureMap.appId = wechat_cfg.appid;


• res.send(signatureMap);


• });



• })



根據微信開發文檔需求，我們首先需要將傳進來的url的錨點後面的數據給去掉，保留前面的有效部分。

然後就是調用上面的sign方法來生成簽名。上面的簽名方法最後傳進來的json數據就是這里的signatureMap。我們最終會將這些數據發送回react客戶端。

同時，通過上面的wx.config的示例，我們知道還需要用到微信公眾號的appId。所以這里一並將其放到signatureMap中進行返回。

那麼到此為止，react客戶端調用服務端的"/api/signature"返回的數據示例如下:

• {


• noncestr: 'Wm3WZYTPz0wzccnW',


• timestamp: 1476873698,


• url: 'com/?code=&state=',


• jsapi_ticket: 'sM4AOVdWfPE4DxkXGEs8VBqyVbs-TKGYp4d_ZSQa0Q5WvvMUPNQ6XGpyEcgKOD_xID_GrMCaalSmIF9JbrGaOg',


• signature: ''


• }



3. 客戶端獲取簽名信息

3.1 獲取簽名信息並注入jssdk

和之前的獲取微信用戶信息一樣，我們這里會建立一個新的Source文件WechatSdkSource.js來調用遠程伺服器的"/api/signature"介面:

• var WechatSdkSource = {


• fetchSignatureMap() { return {


• remote(state,url) { return co(function *() { let signatureMap = null; const getSignatureMapUrl = `/api/signature`; try { let result = yield request.get(getSignatureMapUrl).query({url:url});


• signatureMap = result.body;


• } catch (e) {


• signatureMap = null;


• } //console.log("userInfo:", userInfo);


• return signatureMap;


• });


• },



• local() { // Never check locally, always fetch remotely.


• return null;


• }, success: WechatSdkActions.updateSignatureMap, error: WechatSdkActions.getSignatureMapFailed, loading: WechatSdkActions.getSignatureMap,


• }


• }


• };



這里傳進來的url由下面將要談及的上層函數所生成。整個流程就沒有什麼好說的了，說白了就是通過相應的庫發送一個帶有url的query參數的請求到伺服器端來請求簽名信息，相信有跟著這個系列文章的朋友都是很清楚的了。

最終請求成功返回的時候就會調用WechatSdkActions的updateSignatureMap這個Action。

• var alt = require('../alt');mole.exports = alt.generateActions( 'updateSignatureMap', 'getSignatureMap', 'getSignatureMapFailed',


• );



而這個action就會觸發所監聽的WechatSdkStore的onUpdateSignatureMap這個回調。

• class WechatSdkStore { constructor() { this.signatureMap = []; this.errorMessage = null; this.ready = false; this.bindActions(WechatSdkActions); this.exportAsync(WechatSdkSource);