詳解基于Koa2開(kāi)發(fā)微信二維碼掃碼支付相關(guān)流程
前段時(shí)間在開(kāi)發(fā)一個(gè)功能，要求是通過(guò)微信二維碼進(jìn)行掃碼支付。這個(gè)情景我們屢見(jiàn)不鮮了，各種電子商城、線下的自動(dòng)販賣(mài)機(jī)等等都會(huì)有這個(gè)功能。平時(shí)只是使用者，如今變?yōu)殚_(kāi)發(fā)者，也是有不小的坑。所以特此寫(xiě)一篇博客記錄一下。
注： 要開(kāi)發(fā)微信二維碼支付，你必須要有相應(yīng)的商戶號(hào)的權(quán)限，否則你是無(wú)法開(kāi)發(fā)的。若無(wú)相應(yīng)權(quán)限，本文不推薦閱讀。
兩種模式
打開(kāi)微信支付的文檔，我們可以看到兩種支付模式：模式一和模式二。這二者的流程圖微信的文檔里都給出了（不過(guò)說(shuō)實(shí)話畫(huà)得真的有點(diǎn)丑）。
文檔里指出了二者的區(qū)別：
模式一開(kāi)發(fā)前，商戶必須在公眾平臺(tái)后臺(tái)設(shè)置支付回調(diào)URL。URL實(shí)現(xiàn)的功能：接收用戶掃碼后微信支付系統(tǒng)回調(diào)的productid和openid。
模式二與模式一相比，流程更為簡(jiǎn)單，不依賴設(shè)置的回調(diào)支付URL。商戶后臺(tái)系統(tǒng)先調(diào)用微信支付的統(tǒng)一下單接口，微信后臺(tái)系統(tǒng)返回鏈接參數(shù)code_url，商戶后臺(tái)系統(tǒng)將code_url值生成二維碼圖片，用戶使用微信客戶端掃碼后發(fā)起支付。注意：code_url有效期為2小時(shí)，過(guò)期后掃碼不能再發(fā)起支付。
模式一是我們平時(shí)在網(wǎng)購(gòu)的時(shí)候比較常見(jiàn)的，會(huì)彈出一個(gè)專(zhuān)門(mén)的頁(yè)面用于掃碼支付，然后支付成功后這個(gè)頁(yè)面會(huì)再次跳轉(zhuǎn)回回調(diào)頁(yè)面，通知你支付成功。第二種的話想對(duì)少一些，不過(guò)第二種開(kāi)發(fā)起來(lái)相對(duì)簡(jiǎn)單點(diǎn)。 本文主要介紹模式二的開(kāi)發(fā) 。
搭建Koa2的簡(jiǎn)單開(kāi)發(fā)環(huán)境
快速搭建Koa2的開(kāi)發(fā)環(huán)境我推薦可以使用koa-generator 。腳手架能幫我們省去Koa項(xiàng)目一開(kāi)始的一些基本中間件的書(shū)寫(xiě)步驟。（如果你想學(xué)習(xí)Koa最好自己搭建一個(gè)。如果你已經(jīng)會(huì)Koa了就可以使用一些快速腳手架了。）
首先全局安裝 koa-generator ：
npm install -g koa-generator #or yarn global add koa-generator
然后找一個(gè)目錄用來(lái)存放Koa項(xiàng)目，我們打算給這個(gè)項(xiàng)目取個(gè)名字叫做 koa-wechatpay ，然后就可以輸入 koa2 koa-wechatpay 。然后腳手架會(huì)自動(dòng)創(chuàng)建相應(yīng)文件夾 koa-wechatpay ，并生成基本骨架。進(jìn)入這個(gè)文件夾，安裝相應(yīng)的插件。輸入：
npm install #or yarn
接著你可以輸入 npm start 或者 yarn start 來(lái)運(yùn)行項(xiàng)目（默認(rèn)監(jiān)聽(tīng)在3000端口）。
如果不出意外，你的項(xiàng)目跑起來(lái)了，然后我們用postman測(cè)試一下：
這條路由是在 routes/index.js 里。
如果你看到了
{
"title": "koa2 json"
}
就說(shuō)明沒(méi)問(wèn)題。（如果有問(wèn)題，檢查一下是不是端口被占用了等等。）
接下來(lái)在 routes 文件夾里我們新建一個(gè) wechatpay.js 的文件用來(lái)書(shū)寫(xiě)我們的流程。
簽名
跟微信的服務(wù)器交流很關(guān)鍵的一環(huán)是簽名必須正確，如果簽名不正確，那么一切都白搭。
首先我們需要去公眾號(hào)的后臺(tái)獲取我們所需要的如下相應(yīng)的id或者key的信息。其中 notify_url 和 server_ip 是用于當(dāng)我們支付成功后，微信會(huì)主動(dòng)往這個(gè)url post 支付成功的信息。
簽名算法如下：https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=4_3
為了簽名正確，我們需要安裝一下 md5 。
npm install md5 --save #or yarn add md5
const md5 = require('md5')
const appid = 'xxx'
const mch_id = 'yyy'
const mch_api_key = 'zzz'
const notify_url = 'http://xxx/api/notify' // 服務(wù)端可訪問(wèn)的域名和接口
const server_ip = 'xx.xx.xx.xx' // 服務(wù)端的ip地址
const trade_type = 'NATIVE' // NATIVE對(duì)應(yīng)的是二維碼掃碼支付
let body = 'XXX的充值支付' // 用于顯示在支付界面的提示詞
然后開(kāi)始寫(xiě)簽名函數(shù)：
const signString = (fee, ip, nonce) => {
let tempString = `appid=${appid}&body=${body}&mch_id=${mch_id}&nonce_str=${nonce}¬ify_url=${notify_url}&out_trade_no=${nonce}&spbill_create_ip=${ip}&total_fee=${fee}&trade_type=${trade_type}&key=${mch_api_key}`
return md5(tempString).toUpperCase()
}
其中 fee 是要充值的費(fèi)用，以分為單位。比如要充值1塊錢(qián)， fee 就是100。ip是個(gè)比較隨意的選項(xiàng)，只要符合規(guī)則的ip經(jīng)過(guò)測(cè)試都是可以的，下文里我用的是 server_ip 。 nonce 就是微信要求的不重復(fù)的32位以內(nèi)的字符串，通?？梢允褂糜唵翁?hào)等唯一標(biāo)識(shí)的字符串。
由于跟微信的服務(wù)器交流都是用xml來(lái)交流，所以現(xiàn)在我們要手動(dòng)組裝一下post請(qǐng)求的 xml :
const xmlBody = (fee, nonce_str) => {
const xml = `
<xml>
<appid>${appid}</appid>
<body>${body}</body>
<mch_id>${mch_id}</mch_id>
<nonce_str>${nonce_str}</nonce_str>
<notify_url>${notify_url}</notify_url>
<out_trade_no>${nonce_str}</out_trade_no>
<total_fee>${fee}</total_fee>
<spbill_create_ip>${server_ip}</spbill_create_ip>
<trade_type>NATIVE</trade_type>
<sign>${signString(fee, server_ip, nonce_str)}</sign>
</xml>
`
return {
xml,
out_trade_no: nonce_str
}
}
如果你怕自己的簽名的 xml 串有問(wèn)題，可以提前在微信提供的簽名校驗(yàn)工具里先校驗(yàn)一遍，看看是否能通過(guò)。
發(fā)送請(qǐng)求
因?yàn)樾枰⑿欧?wù)端發(fā)請(qǐng)求，所以我選擇了 axios 這個(gè)在瀏覽器端和node端都能發(fā)起ajax請(qǐng)求的庫(kù)。
安裝過(guò)程不再贅述。繼續(xù)在 wechatpay.js 寫(xiě)發(fā)請(qǐng)求的邏輯。
由于微信給我們返回的也將是一個(gè)xml格式的字符串。所以我們需要預(yù)先寫(xiě)好解析函數(shù)，將xml解析成js對(duì)象。為此你可以安裝一個(gè) xml2js 。安裝過(guò)程跟上面的類(lèi)似，不再贅述。
微信會(huì)給我們返回一個(gè)諸如下面格式的 xml 字符串：
<xml><return_code><![CDATA[SUCCESS]]></return_code> <return_msg><![CDATA[OK]]></return_msg> <appid><![CDATA[wx742xxxxxxxxxxxxx]]></appid> <mch_id><![CDATA[14899xxxxx]]></mch_id> <nonce_str><![CDATA[R69QXXXXXXXX6O]]></nonce_str> <sign><![CDATA[79F0891XXXXXX189507A184XXXXXXXXX]]></sign> <result_code><![CDATA[SUCCESS]]></result_code> <prepay_id><![CDATA[wx152316xxxxxxxxxxxxxxxxxxxxxxxxxxx]]></prepay_id> <trade_type><![CDATA[NATIVE]]></trade_type> <code_url><![CDATA[weixin://wxpay/xxxurl?pr=dQNakHH]]></code_url> </xml>
我們的目標(biāo)是轉(zhuǎn)為如下的js對(duì)象，好讓我們用js來(lái)操作數(shù)據(jù)：
{
return_code: 'SUCCESS', // SUCCESS 或者 FAIL
return_msg: 'OK',
appid: 'wx742xxxxxxxxxxxxx',
mch_id: '14899xxxxx',
nonce_str: 'R69QXXXXXXXX6O',
sign: '79F0891XXXXXX189507A184XXXXXXXXX',
result_code: 'SUCCESS',
prepay_id: 'wx152316xxxxxxxxxxxxxxxxxxxxxxxxxxx',
trade_type: 'NATIVE',
code_url: 'weixin://wxpay/xxxurl?pr=dQNakHH' // 用于生成支付二維碼的鏈接
}
于是我們寫(xiě)一個(gè)函數(shù)，調(diào)用 xml2js 來(lái)解析xml：
// 將XML轉(zhuǎn)為JS對(duì)象
const parseXML = (xml) => {
return new Promise((res, rej) => {
xml2js.parseString(xml, {trim: true, explicitArray: false}, (err, json) => {
if (err) {
rej(err)
} else {
res(json.xml)
}
})
})
}
上面的代碼返回了一個(gè) Promise 對(duì)象，因?yàn)?xml2js 的操作是在回調(diào)函數(shù)里返回的結(jié)果，所以為了配合Koa2的 async 、 await ，我們可以將其封裝成一個(gè) Promise 對(duì)象，將解析完的結(jié)果通過(guò) resolve 返回回去。這樣就能用 await 來(lái)取數(shù)據(jù)了：
const axios = require('axios')
const url = 'https://api.mch.weixin.qq.com/pay/unifiedorder' // 微信服務(wù)端地址
const pay = async (ctx) => {
const form = ctx.request.body // 通過(guò)前端傳來(lái)的數(shù)據(jù)
const orderNo = 'XXXXXXXXXXXXXXXX' // 不重復(fù)的訂單號(hào)
const fee = form.fee // 通過(guò)前端傳來(lái)的費(fèi)用值
const data = xmlBody(fee, orderNo) // fee是費(fèi)用，orderNo是訂單號(hào)（唯一）
const res = await axios.post(url, {
data: data.xml
}).then(async res => {
const resJson = await parseXML(res.data)
return resJson // 拿到返回的數(shù)據(jù)
}).catch(err => {
console.log(err)
})
if (res.return_code === 'SUCCESS') { // 如果返回的
return ctx.body = {
success: true,
message: '請(qǐng)求成功',
code_url: res.code_url, // code_url就是用于生成支付二維碼的鏈接
order_no: orderNo // 訂單號(hào)
}
}
ctx.body = {
success: false,
message: '請(qǐng)求失敗'
}
}
router.post('/api/pay', pay)
module.exports = router
然后我們要將這個(gè)router掛載到根目錄的 app.js 里去。
找到之前默認(rèn)的兩個(gè)路由，一個(gè) index ，一個(gè) user ：
const index = require('./routes/index')
const users = require('./routes/users')
const wechatpay = require('./routes/wechatpay') // 加在這里
然后到頁(yè)面底下掛載這個(gè)路由：
// routes app.use(index.routes(), index.allowedMethods()) app.use(users.routes(), users.allowedMethods()) app.use(wechatpay.routes(), users.allowedMethods()) // 加在這里
于是你就可以通過(guò)發(fā)送 /api/pay 來(lái)請(qǐng)求二維碼數(shù)據(jù)啦。（如果有跨域需要自己考慮解決跨域方案，可以跟Koa放在同域里，也可以開(kāi)一層proxy來(lái)轉(zhuǎn)發(fā)，也可以開(kāi)CORS頭等等）
注意， 本例里是用前端來(lái)生成二維碼，其實(shí)也可以通過(guò)后端生成二維碼，然后再返回給前端。不過(guò)為了簡(jiǎn)易演示，本例采用前端通過(guò)獲取 code_url 后，在前端生成二維碼。
展示支付二維碼
前端我用的是 Vue ，當(dāng)然你可以選擇你喜歡的前端框架。這里關(guān)注點(diǎn)在于通過(guò)拿到剛才后端傳過(guò)來(lái)的 code_url 來(lái)生成二維碼。
在前端，我使用的是 @xkeshi/vue-qrcode 這個(gè)庫(kù)來(lái)生成二維碼。它調(diào)用特別簡(jiǎn)單：
import VueQrcode from '@xkeshi/vue-qrcode'
export default {
components: {
VueQrcode
},
// ...其他代碼
}
然后就可以在前端里用 <vue-qrcode> 的組件來(lái)生成二維碼了：
<vue-qrcode :value="codeUrl" :options="{ size: 200 }">
放到Dialog里就是這樣的效果：
文本是我自己添加的
付款成功自動(dòng)刷新頁(yè)面
有兩種將支付成功寫(xiě)入數(shù)據(jù)庫(kù)的辦法。
一種是在打開(kāi)了掃碼對(duì)話框后，不停向微信服務(wù)端輪詢支付結(jié)果，如果支付成功，那么就向后端發(fā)起請(qǐng)求，告訴后端支付成功，讓后端寫(xiě)入數(shù)據(jù)庫(kù)。
一種是后端一直開(kāi)著接口，等微信主動(dòng)給后端的 notify_url 發(fā)起post請(qǐng)求，告訴后端支付結(jié)果，讓后端寫(xiě)入數(shù)據(jù)庫(kù)。然后此時(shí)前端向后端輪詢的時(shí)候應(yīng)該是去數(shù)據(jù)庫(kù)取輪詢?cè)撚唵蔚闹Ц督Y(jié)果，如果支付成功就關(guān)閉Dialog。
第一種比較簡(jiǎn)單但是不安全：試想萬(wàn)一用戶支付成功的同時(shí)關(guān)閉了頁(yè)面，或者用戶支付成功了，但是網(wǎng)絡(luò)有問(wèn)題導(dǎo)致前端沒(méi)法往后端發(fā)支付成功的結(jié)果，那么后端就一直沒(méi)辦法寫(xiě)入支付成功的數(shù)據(jù)。
第二種雖然麻煩，但是保證了安全。所有的支付結(jié)果都必須等微信主動(dòng)向后端通知，后端存完數(shù)據(jù)庫(kù)后再返回給前端消息。這樣哪怕用戶支付成功的同時(shí)關(guān)閉了頁(yè)面，下次再打開(kāi)的時(shí)候，由于數(shù)據(jù)庫(kù)已經(jīng)寫(xiě)入了，所以拿到的也是支付成功的結(jié)果。
所以 付款成功自動(dòng)刷新頁(yè)面 這個(gè)部分我們分為兩個(gè)部分來(lái)說(shuō)：
前端部分
Vue的data部分
data: {
payStatus: false, // 未支付成功
retryCount: 0, // 輪詢次數(shù)，從0-200
orderNo: 'xxx', // 從后端傳來(lái)的order_no
codeUrl: 'xxx' // 從后端傳來(lái)的code_url
}
在methods里寫(xiě)一個(gè)查詢訂單信息的方法：
// ...
handleCheckBill () {
return setTimeout(() => {
if (!this.payStatus && this.retryCount < 120) {
this.retryCount += 1
axios.post('/api/check-bill', { // 向后端請(qǐng)求訂單支付信息
orderNo: this.orderNo
})
.then(res => {
if (res.data.success) {
this.payStatus = true
location.reload() // 偷懶就用reload重新刷新頁(yè)面
} else {
this.handleCheckBill()
}
}).catch(err => {
console.log(err)
})
} else {
location.reload()
}
}, 1000)
}
在打開(kāi)二維碼Dialog的時(shí)候，這個(gè)方法就啟用了。然后就開(kāi)始輪詢。我訂了一個(gè)時(shí)間，200s后如果還是沒(méi)有付款信息也自動(dòng)刷新頁(yè)面。實(shí)際上你可以自己根據(jù)項(xiàng)目的需要來(lái)定義這個(gè)時(shí)間。
后端部分
前端到后端只有一個(gè)接口，但是后端有兩個(gè)接口。一個(gè)是用來(lái)接收微信的推送，一個(gè)是用來(lái)接收前端的查詢請(qǐng)求。
先來(lái)寫(xiě)最關(guān)鍵的微信的推送請(qǐng)求處理。由于我們接收微信的請(qǐng)求是在Koa的路由里，并且是以流的形式傳輸?shù)?。需要讓Koa支持解析xml格式的body，所以需要安裝一個(gè)rawbody 來(lái)獲取xml格式的body。
// 處理微信支付回傳notify
// 如果收到消息要跟微信回傳是否接收到
const handleNotify = async (ctx) => {
const xml = await rawbody(ctx.req, {
length: ctx.request.length,
limit: '1mb',
encoding: ctx.request.charset || 'utf-8'
})
const res = await parseXML(xml) // 解析xml
if (res.return_code === 'SUCCESS') {
if (res.result_code === 'SUCCESS') { // 如果都為SUCCESS代表支付成功
// ... 這里是寫(xiě)入數(shù)據(jù)庫(kù)的相關(guān)操作
// 開(kāi)始回傳微信
ctx.type = 'application/xml' // 指定發(fā)送的請(qǐng)求類(lèi)型是xml
// 回傳微信，告訴已經(jīng)收到
return ctx.body = `<xml>
<return_code><![CDATA[SUCCESS]]></return_code>
<return_msg><![CDATA[OK]]></return_msg>
</xml>
`
}
}
// 如果支付失敗，也回傳微信
ctx.status = 400
ctx.type = 'application/xml'
ctx.body = `<xml>
<return_code><![CDATA[FAIL]]></return_code>
<return_msg><![CDATA[OK]]></return_msg>
</xml>
`
}
router.post('/api/notify', handleNotify)
這里的坑就是Koa處理微信回傳的xml。如果不知道是以 raw-body 的形式回傳的，會(huì)調(diào)試半天。。
接下來(lái)這個(gè)就是比較簡(jiǎn)單的給前端回傳的了。
const checkBill = async (ctx) => {
const form = ctx.request.body
const orderNo = form.orderNo
const result = await 數(shù)據(jù)庫(kù)操作
if (result) { // 如果訂單支付成功
return ctx.body = {
success: true
}
}
ctx.status = 400
ctx.body = {
success: false
}
}
router.post('/api/check-bill', checkBill)
總結(jié)
至此，一整個(gè)基于Koa2的微信二維碼支付流程就簡(jiǎn)單演示完了，由于不是公開(kāi)的項(xiàng)目，所以沒(méi)有實(shí)際的GitHub倉(cāng)庫(kù)。不過(guò)基本上關(guān)鍵的代碼我都已經(jīng)注釋出來(lái)啦。我參考了不少人的實(shí)現(xiàn)，曾考慮過(guò)用一些比如 wechatpay 的npm庫(kù)，不過(guò)最終還是自己解決了。這里面感謝很多前人的分享，也希望我這篇文章能給你一些幫助。
參考文章
微信支付文章
http://www.dbjr.com.cn/article/135125.htm
返回接口
http://webcache.googleusercontent.com/search?q=cache:iFC0HZuFB1gJ:jeffdeng.me/wx/2017/03/13/wx-platform-conect.html+&cd=4&hl=zh-CN&ct=clnk&gl=us
XML流處理
http://www.dbjr.com.cn/article/140291.htm
http://www.dbjr.com.cn/article/140296.htm
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
node.js中g(shù)runt和gulp的區(qū)別詳解
這篇文章主要介紹了node.js中g(shù)runt和gulp的區(qū)別詳解的相關(guān)資料,需要的朋友可以參考下2017-07-07
這篇文章主要介紹了一文詳解Node?中文件模塊與核心模塊，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-07-07
node.js中的fs.truncate方法使用說(shuō)明
這篇文章主要介紹了node.js中的fs.truncate方法使用說(shuō)明,本文介紹了fs.truncate的方法說(shuō)明、語(yǔ)法、接收參數(shù)、使用實(shí)例和實(shí)現(xiàn)源碼,需要的朋友可以參考下2014-12-12
Node.js中使用事件發(fā)射器模式實(shí)現(xiàn)事件綁定詳解
這篇文章主要介紹了Node.js中使用事件發(fā)射器模式實(shí)現(xiàn)事件綁定詳解,本文一并講解了回調(diào)模式、發(fā)射器模式、事件類(lèi)型等基礎(chǔ)知識(shí)做了補(bǔ)充,需要的朋友可以參考下2014-08-08
nodejs入門(mén)教程二：創(chuàng)建一個(gè)簡(jiǎn)單應(yīng)用示例
這篇文章主要介紹了nodejs入門(mén)教程之創(chuàng)建一個(gè)簡(jiǎn)單應(yīng)用的方法,涉及nodejs http模塊的引用、端口監(jiān)聽(tīng)等相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
path 模塊是 Node.js 官方提供的、用來(lái)處理路徑的模塊,它提供了一系列的方法和屬性,用來(lái)滿足用戶對(duì)路徑的處理需求,這篇文章主要介紹了Node.js開(kāi)發(fā) path路徑模塊,需要的朋友可以參考下2024-02-02
使用Node.js實(shí)現(xiàn)一個(gè)多人游戲服務(wù)器引擎
這篇文章主要給大家介紹了關(guān)于如何使用Node.js實(shí)現(xiàn)一個(gè)多人游戲服務(wù)器引擎的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用Node.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要給大家介紹了關(guān)于node.js到底要不要加分號(hào)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
如何利用node轉(zhuǎn)發(fā)請(qǐng)求詳解
這篇文章主要給大家介紹了關(guān)于利用node轉(zhuǎn)發(fā)請(qǐng)求的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
Node連接mysql數(shù)據(jù)庫(kù)方法介紹
本篇文章主要介紹了Node連接mysql數(shù)據(jù)庫(kù)方法介紹。詳細(xì)的介紹了怎樣連接和操作數(shù)據(jù)庫(kù)，并舉例說(shuō)明，有興趣的可以了解一下。2017-02-02