ngrok+express解決本地環境中微信接口調試問題

  在微信項目的開發的時候，常常須要對微信jssdk提供的接口進行調試，好比說錄音, 分享 ,上傳圖像等接口，可是微信jssdk要求綁定安全域名才能使用其提供的一系列功能 , 而在開發環境中使用localhost或者本地ip沒法完成域名的認證和綁定, 因此沒法在本地調試 。固然有一種無可奈何方法 ，就是在本地開發完 ，打包發到公司的測試服務器上 ，利用測試服務器認證後的域名進行調試，每次改動，調試都要發一遍測試，顯然這種方法很是麻煩且很不科學，因此這篇文章就針對這個問題介紹一下如何利用ngrok和express解決開發環境中微信接口的調試問題。

  一：首先介紹一下 ngrok，ngrok主要的功能就是將本地的ip映射到外網 ，而且分配給你一個可用的域名，經過這個域名可讓外網用戶打開你的本地的web服務，使用起來也很簡單，官網也有文檔也有詳細介紹 。這裏簡單的介紹一下使用方法，首先去ngrok 的官網下載ngrok的對應的客戶端 ，而且註冊用戶 ，能夠經過你的github帳號或者google帳號註冊 ，註冊完成後再我的中心打開auth選項，複製這裏的authtoken，以下圖：

(這裏就以window版本爲例)，而後下載完成解壓，會有一個ngrok.exe文件，雙擊運行會出現下面的命令行：

首先咱們須要完成ngrok的token認證，不然運行會發生錯誤，運行一下命令

ngrok authtoken ***************** //*號就是我的中心中的token ，複製下來就能夠了複製代碼

認證完成後，就能夠操做了，上圖中的examples就是一些經常使用的示例命令，咱們用到的就是ngrok http，後面接的參數就是你本地web服務的端口號，運行後會分配一個外網域名，經過這個域名就能夠訪問到你的本地web服務，

  不過，這個域名在重啓後就會從新分配一個新域名，致使重啓後須要去微信公衆平臺從新設置一下安全域名和token認證 。比較遺憾的是在ngrok1.0的時候能夠經過 ngrok http subdomain=***(自定義域名) 80 固定每次的分配的域名，可是在2.0版本後，免費用戶沒法固定域名，只有付費用戶才能夠，雖然每月只須要$5,可是對於不是常常測試的人來講仍是徹底沒有購買慾望，關鍵是好像只支持visaa......。不過對於想要免費固定域名的胖友來講，解決辦法仍是有的，國內有個sunny-ngrok ，能夠免費申請一個自定義的固定域名 ，具體教程能夠去其官網查看，也不是很複雜，有問題話能夠在評論裏面問我，就不詳細講了。固然想要實現外網映射的話還有不少其餘方法，好比使用npm安裝的Localtunnel和花生殼等等，能夠自行了解一下。

  二：獲得域名後，接下來咱們要作的就是使用該域名完成微信安全域名綁定啦，咱們能夠去微信公衆平臺申請一個測試號，不過這時候填寫時沒法經過的，由於微信認證須要擁有一個本身的服務器正確響應配置請求

測試號申請的時候填寫配置信息的url，微信服務器會發送一個get請求到這個地址上，get請求會攜帶一些參數，咱們須要用這些參數生成一個簽名和微信參數的簽名進行對比，對比成功接口才會配置成功。

  由於微信認證須要擁有一個本身的服務器 ，因此這裏咱們就須要用到express搭建一個簡單的服務器，用來完成微信的token認證和生成signature（簽名），搭建的過程也很簡單，參照express中文文檔，下面就貼一下官網的步驟：

安裝完成事後,進入myapp目錄，建立一個app.js的文件 ，

var express = require('express');
var crypto = require('crypto') //使用npm安裝後引入，用來生成簽名
var http = require('request') //express的中間件，使用npm安裝，用來發出請求
var jsSHA = require('jssha')//jssha是微信官網提供的nodejs版本簽名算法，能夠去官網下載官網的sample包
var app = express();
app.use(express.static('./review'))

app.get('/weixin',function (req, res) {//這個get接口就是測試號填寫的接口，用來響應微信服務器的請求
    var token = 'weixin' //注意這裏填寫token，與微信測試號申請時候填寫的token要保持一致    
    var signature = req.query.signature;
    var timestamp = req.query.timestamp;    
    var nonce = req.query.nonce;    
    var echostr = req.query.echostr;   
     /*  加密/校驗流程以下： */   
     //1. 將token、timestamp、nonce三個參數進行字典序排序   
     var array = new Array(token,timestamp,nonce);   
     array.sort();   
     var str = array.toString().replace(/,/g,"");      
    //2. 將三個參數字符串拼接成一個字符串進行sha1加密    
    var sha1Code = crypto.createHash("sha1");    
    var code = sha1Code.update(str,'utf-8').digest("hex");   
     //3. 開發者得到加密後的字符串可與signature對比，標識該請求來源於微信    
    if(code===signature){        
        res.send(echostr)   
    }else{
        res.send("error");
    }  
});
var server = app.listen(80, function () {
    var host = server.address().address;
    var port = server.address().port;
    console.log('Example app listening at http://%s:%s', host, port);
});複製代碼

建立完成後，運行

node app.js複製代碼

服務器就開啓好了，上面要注意的幾點就是：

1：jssha不能用npm安裝，由於npm安裝的運行時候會報Chosen SHA variant is not supported

，必須使用官網提供的sample包，下載解壓後，選擇node版本，打開後將node_module裏面jssha文件複製到項目內的node_module裏面便可；

2：這裏的token值須要和微信測試號中填寫的token值一致；

如今咱們就能夠開始填寫測試號的參數了，填寫完成微信服務器就會發送請求給你填寫的接口了，都正確響應的話就會彈出配置成功。

  固然到這尚未結束，由於前端想要調用jssdk的接口還須要經過接口請求完成權限配置，這裏你們能夠看一下微信jssdk的說明文檔，具體引用步驟這裏就不贅述了，接口請求大概以下：

這個接口主要就是提交當前的url請求服務端拿到相應的參數，完成權限配置，因此在express中還須要在寫一個響應post請求的接口，這個接口作的主要的工做就是拿appid和appSerect（測試號提供）去請求微信提供的接口生成access_token，而後拿這個access_token再去請求微信提供的接口生成tiket，關於這二者文檔上都有詳細說明。最後生成簽名，代碼以下

// noncestr生成var createNonceStr = function() {
    return Math.random().toString(36).substr(2, 15);
};
// timestamp時間戳生成var createTimeStamp = function () {
    return parseInt(new Date().getTime() / 1000) + '';
};
//獲取tiket
var getTiket= function (data) { //經過access_token獲取tiket
   return new Promise((reslove,reject)=>{
        http.get(`https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${data}&type=jsapi`,
         function(err,res,body){
             if(res.body.tiket){
                resoleve(res.body.ticket)
             }else{
                reject(err)
             }         })      })}
// 計算簽名方法
var calcSignature = function (ticket, noncestr, ts, url) {//使用jssha
    var str = 'jsapi_ticket=' + ticket + '&noncestr=' + noncestr + '&timestamp='+ ts +'&url=' + url;
    shaObj = new jsSHA(str, 'TEXT');    return shaObj.getHash('SHA-1', 'HEX');
}
//返回給前端配置信息的post接口
app.post('/weixin',function(req,res,next){
     let appId = '******'
     let appSecret = '******'
     let url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appId}&secret=${appSecret }`
     http.get(url, function (err, response, body) {
       getTiket(response.body).then(resolve=>{
          let tiket = resolve//tiket
          let nonceStr = createNonceStr()//隨機字符串
          let timeStamp = createTimeStamp()//時間戳
          let signature = calcSignature(tiket,nonceStr,timeStamp,req.body.url)
          let obj = { //將前端須要的參數返回
            data:{
                appId:appId,
                timestamp:timeStamp,
                nonceStr:nonceStr,
                signature:signature
            } 
         } 
         res.end(JSON.stringify(obj))
        }).catch(err=>{})
          res.end(JSON.stringify(err))
     });})複製代碼

這裏要注意的是微信返回的access_token 和tiket的都有7200s的有效期，因此要進行緩存，個人代碼中沒有寫緩存的操做代碼了，你們有兩種方法：

1.拿到access_token和tiket後，直接寫在變量中存下來，有效期內就不用繼續請求接口了，直接進行簽名操做就能夠了；過時後，在請求一次就行了，雖然這種方法有點笨，不過好歹有效期還算長。

2.在服務器拿到access_token和tiket後，寫入本地的json文件中，具體步驟也不贅述了，而後判斷是否過時，過時後就從新請求，沒過時就直接讀取json文件中的數據進行簽名。

  最後呢，有兩種選擇：

第一：把咱們的前端項目執行npm run build後，把dist文件放入咱們的服務器文件夾中，能夠直接用express的static中間件

app.use(express.static('./dist'))複製代碼

而後微信開發者工具，輸入分配的域名打開咱們的項目，這樣咱們不用設置代理了，不過須要執行build，項目大一點的話仍是有點浪費時間的；

第二：就是爲咱們的開發環境在申請一個域名，由於如今腳手架的熱更新其實就是啓動了一個webpack-dev-sever的微服務器，申請域名是後填寫開發的端口號就能夠了，使得開發地址和咱們的服務器地址的二級域名相同，不過對於服務器的接口，開發環境須要設置一下代理，並且熱更新也會失效，須要手動刷新一下，不過相對於第一種方法可能會更好一點。

兩種方法運行成功後查看發出請求若是配置成功，控制檯會出現配置成功的信息以下：

而後咱們就能夠愉快的在使用jssdk的接口了，不再求後端，能夠本身在本地測試好全部的接口了，且不是美滋滋。

  寫的過程當中已經儘可能詳細說明了，不過不免會漏掉一些細節問題，歡迎指正和討論。