如何使用ngrok+express解決本地環(huán)境中微信接口調(diào)試問題

這篇文章將為大家詳細(xì)講解有關(guān)如何使用ngrok+express解決本地環(huán)境中微信接口調(diào)試問題，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)成都網(wǎng)站建設(shè)按需開發(fā)，是成都網(wǎng)站建設(shè)公司,為公路鉆孔機(jī)提供網(wǎng)站建設(shè)服務(wù),有成熟的網(wǎng)站定制合作流程，提供網(wǎng)站定制設(shè)計(jì)服務(wù)：原型圖制作、網(wǎng)站創(chuàng)意設(shè)計(jì)、前端HTML5制作、后臺(tái)程序開發(fā)等。成都網(wǎng)站推廣熱線：13518219792

在微信項(xiàng)目的開發(fā)的時(shí)候，經(jīng)常需要對(duì)微信jssdk提供的接口進(jìn)行調(diào)試，比如說錄音, 分享 ,上傳圖像等接口，但是微信jssdk要求綁定安全域名才能使用其提供的一系列功能 , 而在開發(fā)環(huán)境中使用localhost或者本地ip無法完成域名的認(rèn)證和綁定, 所以無法在本地調(diào)試 。當(dāng)然有一種迫不得已方法 ，就是在本地開發(fā)完 ，打包發(fā)到公司的測(cè)試服務(wù)器上 ，利用測(cè)試服務(wù)器認(rèn)證后的域名進(jìn)行調(diào)試，每次改動(dòng)，調(diào)試都要發(fā)一遍測(cè)試，顯然這種方法非常麻煩且很不科學(xué)，所以這篇文章就針對(duì)這個(gè)問題介紹一下如何利用ngrok和express解決開發(fā)環(huán)境中微信接口的調(diào)試問題。

一：首先介紹一下ngrok，ngrok主要的功能就是將本地的ip映射到外網(wǎng) ，并且分配給你一個(gè)可用的域名，通過這個(gè)域名可以讓外網(wǎng)用戶打開你的本地的web服務(wù)，使用起來也很簡(jiǎn)單，官網(wǎng)也有文檔也有詳細(xì)介紹 。這里簡(jiǎn)單的介紹一下使用方法，首先去ngrok 的官網(wǎng)下載ngrok的對(duì)應(yīng)的客戶端 ，并且注冊(cè)用戶 ，可以通過你的github賬號(hào)或者google賬號(hào)注冊(cè) ，注冊(cè)完成后再個(gè)人中心打開auth選項(xiàng)，復(fù)制這里的authtoken，如下圖：

 

(這里就以window版本為例)，然后下載完成解壓，會(huì)有一個(gè)ngrok.exe文件，雙擊運(yùn)行會(huì)出現(xiàn)下面的命令行：

 

首先我們需要完成ngrok的token認(rèn)證，否則運(yùn)行會(huì)發(fā)生錯(cuò)誤，運(yùn)行一下命令

ngrok authtoken ***************** //*號(hào)就是個(gè)人中心中的token ，復(fù)制下來就可以了

認(rèn)證完成后，就可以操作了，上圖中的examples就是一些常用的示例命令，我們用到的就是ngrok http，后面接的參數(shù)就是你本地web服務(wù)的端口號(hào)，運(yùn)行后會(huì)分配一個(gè)外網(wǎng)域名，通過這個(gè)域名就可以訪問到你的本地web服務(wù)，

 

不過，這個(gè)域名在重啟后就會(huì)重新分配一個(gè)新域名，導(dǎo)致重啟后需要去微信公眾平臺(tái)重新設(shè)置一下安全域名和token認(rèn)證 。比較遺憾的是在ngrok1.0的時(shí)候可以通過 ngrok http subdomain=***(自定義域名) 80 固定每次的分配的域名，但是在2.0版本后，免費(fèi)用戶無法固定域名，只有付費(fèi)用戶才可以，雖然每個(gè)月只需要$5,但是對(duì)于不是經(jīng)常測(cè)試的人來說還是完全沒有購(gòu)買欲望，關(guān)鍵是好像只支持visaa......。不過對(duì)于想要免費(fèi)固定域名的胖友來說，解決辦法還是有的，國(guó)內(nèi)有個(gè)sunny-ngrok ，可以免費(fèi)申請(qǐng)一個(gè)自定義的固定域名 ，具體教程可以去其官網(wǎng)查看，也不是很復(fù)雜，有問題話可以在評(píng)論里面問我，就不詳細(xì)講了。當(dāng)然想要實(shí)現(xiàn)外網(wǎng)映射的話還有很多其他方法，比如使用npm安裝的Localtunnel和花生殼等等，可以自行了解一下。

二：得到域名后，接下來我們要做的就是使用該域名完成微信安全域名綁定啦，我們可以去微信公眾平臺(tái)申請(qǐng)一個(gè)測(cè)試號(hào)，不過這時(shí)候填寫時(shí)無法通過的，因?yàn)槲⑿耪J(rèn)證需要擁有一個(gè)自己的服務(wù)器正確響應(yīng)配置請(qǐng)求

 

測(cè)試號(hào)申請(qǐng)的時(shí)候填寫配置信息的url，微信服務(wù)器會(huì)發(fā)送一個(gè)get請(qǐng)求到這個(gè)地址上，get請(qǐng)求會(huì)攜帶一些參數(shù)，我們需要用這些參數(shù)生成一個(gè)簽名和微信參數(shù)的簽名進(jìn)行對(duì)比，對(duì)比成功接口才會(huì)配置成功。

因?yàn)槲⑿耪J(rèn)證需要擁有一個(gè)自己的服務(wù)器 ，所以這里我們就需要用到express搭建一個(gè)簡(jiǎn)單的服務(wù)器，用來完成微信的token認(rèn)證和生成signature（簽名），搭建的過程也很簡(jiǎn)單，參照express中文文檔，下面就貼一下官網(wǎng)的步驟：

 

安裝完成過后,進(jìn)入myapp目錄，創(chuàng)建一個(gè)app.js的文件 ，

var express = require('express');
var crypto = require('crypto') //使用npm安裝后引入，用來生成簽名
var http = require('request') //express的中間件，使用npm安裝，用來發(fā)出請(qǐng)求
var jsSHA = require('jssha')//jssha是微信官網(wǎng)提供的nodejs版本簽名算法，可以去官網(wǎng)下載官網(wǎng)的sample包
var app = express();
app.use(express.static('./review'))
app.get('/weixin',function (req, res) {//這個(gè)get接口就是測(cè)試號(hào)填寫的接口，用來響應(yīng)微信服務(wù)器的請(qǐng)求
  var token = 'weixin' //注意這里填寫token，與微信測(cè)試號(hào)申請(qǐng)時(shí)候填寫的token要保持一致  
  var signature = req.query.signature;
  var timestamp = req.query.timestamp;  
  var nonce = req.query.nonce;  
  var echostr = req.query.echostr;  
   /* 加密/校驗(yàn)流程如下： */  
   //1. 將token、timestamp、nonce三個(gè)參數(shù)進(jìn)行字典序排序  
   var array = new Array(token,timestamp,nonce);  
   array.sort();  
   var str = array.toString().replace(/,/g,"");   
  //2. 將三個(gè)參數(shù)字符串拼接成一個(gè)字符串進(jìn)行sha1加密  
  var sha1Code = crypto.createHash("sha1");  
  var code = sha1Code.update(str,'utf-8').digest("hex");  
   //3. 開發(fā)者獲得加密后的字符串可與signature對(duì)比，標(biāo)識(shí)該請(qǐng)求來源于微信  
  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);
});

創(chuàng)建完成后，運(yùn)行

node app.js

服務(wù)器就開啟好了，上面要注意的幾點(diǎn)就是：

1：jssha不能用npm安裝，因?yàn)閚pm安裝的運(yùn)行時(shí)候會(huì)報(bào) Chosen SHA variant is not supported

，必須使用官網(wǎng)提供的sample包，下載解壓后，選擇node版本，打開后將node_module里面jssha文件復(fù)制到項(xiàng)目?jī)?nèi)的node_module里面即可；

2：這里的token值需要和微信測(cè)試號(hào)中填寫的token值一致；

現(xiàn)在我們就可以開始填寫測(cè)試號(hào)的參數(shù)了，填寫完成微信服務(wù)器就會(huì)發(fā)送請(qǐng)求給你填寫的接口了，都正確響應(yīng)的話就會(huì)彈出配置成功。

當(dāng)然到這還沒有結(jié)束，因?yàn)榍岸讼胍{(diào)用jssdk的接口還需要通過接口請(qǐng)求完成權(quán)限配置，這里大家可以看一下微信jssdk的說明文檔，具體引用步驟這里就不贅述了，接口請(qǐng)求大概如下：

 

這個(gè)接口主要就是提交當(dāng)前的url請(qǐng)求服務(wù)端拿到相應(yīng)的參數(shù)，完成權(quán)限配置，所以在express中還需要在寫一個(gè)響應(yīng)post請(qǐng)求的接口，這個(gè)接口做的主要的工作就是拿appid和appSerect（測(cè)試號(hào)提供）去請(qǐng)求微信提供的接口生成access_token，然后拿這個(gè)access_token再去請(qǐng)求微信提供的接口生成tiket，關(guān)于這兩者文檔上都有詳細(xì)說明。最后生成簽名，代碼如下

// noncestr生成var createNonceStr = function() {
  return Math.random().toString(36).substr(2, 15);
};
// timestamp時(shí)間戳生成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)
       }     })   })}
// 計(jì)算簽名方法
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()//隨機(jī)字符串
     let timeStamp = createTimeStamp()//時(shí)間戳
     let signature = calcSignature(tiket,nonceStr,timeStamp,req.body.url)
     let obj = { //將前端需要的參數(shù)返回
      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的有效期，所以要進(jìn)行緩存，我的代碼中沒有寫緩存的操作代碼了，大家有兩種方法：

1.拿到access_token和tiket后，直接寫在變量中存下來，有效期內(nèi)就不用繼續(xù)請(qǐng)求接口了，直接進(jìn)行簽名操作就可以了；過期后，在請(qǐng)求一次就好了，雖然這種方法有點(diǎn)笨，不過好歹有效期還算長(zhǎng)。

2.在服務(wù)器拿到access_token和tiket后，寫入本地的json文件中，具體步驟也不贅述了，然后判斷是否過期，過期后就重新請(qǐng)求，沒過期就直接讀取json文件中的數(shù)據(jù)進(jìn)行簽名。

最后呢，有兩種選擇：

第一：把我們的前端項(xiàng)目執(zhí)行 npm run build 后，把dist文件放入我們的服務(wù)器文件夾中，可以直接用express的static中間件

app.use(express.static('./dist'))

然后微信開發(fā)者工具，輸入分配的域名打開我們的項(xiàng)目，這樣我們不用設(shè)置代理了，不過需要執(zhí)行build，項(xiàng)目大一點(diǎn)的話還是有點(diǎn)浪費(fèi)時(shí)間的；

第二：就是為我們的開發(fā)環(huán)境在申請(qǐng)一個(gè)域名，因?yàn)楝F(xiàn)在腳手架的熱更新其實(shí)就是啟動(dòng)了一個(gè)webpack-dev-sever的微服務(wù)器，申請(qǐng)域名是后填寫開發(fā)的端口號(hào)就可以了，使得開發(fā)地址和我們的服務(wù)器地址的二級(jí)域名相同，不過對(duì)于服務(wù)器的接口，開發(fā)環(huán)境需要設(shè)置一下代理，而且熱更新也會(huì)失效，需要手動(dòng)刷新一下，不過相對(duì)于第一種方法可能會(huì)更好一點(diǎn)。

兩種方法運(yùn)行成功后查看發(fā)出請(qǐng)求如果配置成功，控制臺(tái)會(huì)出現(xiàn)配置成功的信息如下：

 

然后我們就可以愉快的在使用jssdk的接口了，再也不求后端，可以自己在本地測(cè)試好所有的接口了，且不是美滋滋。

關(guān)于“如何使用ngrok+express解決本地環(huán)境中微信接口調(diào)試問題”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

網(wǎng)站名稱：如何使用ngrok+express解決本地環(huán)境中微信接口調(diào)試問題
分享路徑：http://muchs.cn/article26/iheccg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、網(wǎng)站改版、虛擬主機(jī)、商城網(wǎng)站、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)