在微信專案的開發的時候,經常需要對微信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 + '×tamp='+ 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的介面了,再也不求後端,可以自己在本地測試好所有的介面了,且不是美滋滋。
寫的過程中已經儘量詳細說明了,不過難免會漏掉一些細節問題,歡迎指正和討論。