基於Koa2開發微信二維碼掃碼支付相關流程

時間  2019-11-17
標籤 基於 koa2 koa 開發 微信 二維 支付 相關 流程 简体版
原文   原文鏈接

原文首發於個人博客，歡迎查看~php

前段時間在開發一個功能，要求是經過微信二維碼進行掃碼支付。這個情景咱們家常便飯了，各類電子商城、線下的自動販賣機等等都會有這個功能。平時只是使用者，現在變爲開發者，也是有不小的坑。因此特此寫一篇博客記錄一下。html

注： 要開發微信二維碼支付，你必需要有相應的商戶號的權限，不然你是沒法開發的。若無相應權限，本文不推薦閱讀。前端

兩種模式

打開微信支付的文檔，咱們能夠看到兩種支付模式：模式一和模式二。這兩者的流程圖微信的文檔裏都給出了（不過說實話畫得真的有點醜）。vue

文檔裏指出了兩者的區別：node

模式一開發前，商戶必須在公衆平臺後臺設置支付回調URL。URL實現的功能：接收用戶掃碼後微信支付系統回調的productid和openid。ios

模式二與模式一相比，流程更爲簡單，不依賴設置的回調支付URL。商戶後臺系統先調用微信支付的統一下單接口，微信後臺系統返回連接參數code_url，商戶後臺系統將code_url值生成二維碼圖片，用戶使用微信客戶端掃碼後發起支付。注意：code_url有效期爲2小時，過時後掃碼不能再發起支付。git

模式一是咱們平時在網購的時候比較常見的，會彈出一個專門的頁面用於掃碼支付，而後支付成功後這個頁面會再次跳轉回回調頁面，通知你支付成功。第二種的話想對少一些，不過第二種開發起來相對簡單點。本文主要介紹模式二的開發。github

搭建Koa2的簡單開發環境

快速搭建Koa2的開發環境我推薦可使用koa-generator。腳手架能幫咱們省去Koa項目一開始的一些基本中間件的書寫步驟。（若是你想學習Koa最好本身搭建一個。若是你已經會Koa了就可使用一些快速腳手架了。）web

首先全局安裝koa-generator：ajax

npm install -g koa-generator

#or

yarn global add koa-generator
複製代碼

而後找一個目錄用來存放Koa項目，咱們打算給這個項目取個名字叫作koa-wechatpay，而後就能夠輸入koa2 koa-wechatpay。而後腳手架會自動建立相應文件夾koa-wechatpay，並生成基本骨架。進入這個文件夾，安裝相應的插件。輸入：

npm install

#or

yarn
複製代碼

接着你能夠輸入npm start 或者 yarn start來運行項目（默認監聽在3000端口）。

若是不出意外，你的項目跑起來了，而後咱們用postman測試一下：

這條路由是在routes/index.js裏。

若是你看到了

{
  "title": "koa2 json"
}
複製代碼

就說明沒問題。（若是有問題，檢查一下是否是端口被佔用了等等。）

接下來在routes文件夾裏咱們新建一個wechatpay.js的文件用來書寫咱們的流程。

簽名

跟微信的服務器交流很關鍵的一環是簽名必須正確，若是簽名不正確，那麼一切都白搭。

首先咱們須要去公衆號的後臺獲取咱們所須要的以下相應的id或者key的信息。其中notify_url和server_ip是用於當咱們支付成功後，微信會主動往這個urlpost支付成功的信息。

簽名算法以下：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' // 服務端可訪問的域名和接口
const server_ip = 'xx.xx.xx.xx' // 服務端的ip地址
const trade_type = 'NATIVE' // NATIVE對應的是二維碼掃碼支付
let body = 'XXX的充值支付' // 用於顯示在支付界面的提示詞
複製代碼

而後開始寫簽名函數：

const signString = (fee, ip, nonce) => {
  let tempString = `appid=${appid}&body=${body}&mch_id=${mch_id}&nonce_str=${nonce}&notify_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是要充值的費用，以分爲單位。好比要充值1塊錢，fee就是100。ip是個比較隨意的選項，只要符合規則的ip通過測試都是能夠的，下文裏我用的是server_ip。nonce就是微信要求的不重複的32位之內的字符串，一般可使用訂單號等惟一標識的字符串。

因爲跟微信的服務器交流都是用xml來交流，因此如今咱們要手動組裝一下post請求的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串有問題，能夠提早在微信提供的簽名校驗工具裏先校驗一遍，看看是否能經過。

發送請求

由於須要跟微信服務端發請求，因此我選擇了axios這個在瀏覽器端和node端都能發起ajax請求的庫。

安裝過程再也不贅述。繼續在wechatpay.js寫發請求的邏輯。

因爲微信給咱們返回的也將是一個xml格式的字符串。因此咱們須要預先寫好解析函數，將xml解析成js對象。爲此你能夠安裝一個xml2js。安裝過程跟上面的相似，再也不贅述。

微信會給咱們返回一個諸以下面格式的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>
複製代碼

咱們的目標是轉爲以下的js對象，好讓咱們用js來操做數據：

{
  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' // 用於生成支付二維碼的連接
}
複製代碼

因而咱們寫一個函數，調用xml2js來解析xml：

// 將XML轉爲JS對象
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)
      }
    })
  })
}
複製代碼

上面的代碼返回了一個Promise對象，由於xml2js的操做是在回調函數裏返回的結果，因此爲了配合Koa2的async、await，咱們能夠將其封裝成一個Promise對象，將解析完的結果經過resolve返回回去。這樣就能用await來取數據了：

const axios = require('axios')
const url = 'https://api.mch.weixin.qq.com/pay/unifiedorder' // 微信服務端地址
const pay = async (ctx) => {
  const form = ctx.request.body // 經過前端傳來的數據

  const orderNo = 'XXXXXXXXXXXXXXXX' // 不重複的訂單號
  const fee = form.fee // 經過前端傳來的費用值

  const data = xmlBody(fee, orderNo) // fee是費用，orderNo是訂單號（惟一）
  const res = await axios.post(url, {
    data: data.xml
  }).then(async res => {
    const resJson = await parseXML(res.data)
    return resJson // 拿到返回的數據
  }).catch(err => {
    console.log(err)
  })
  if (res.return_code === 'SUCCESS') { // 若是返回的
    return ctx.body = {
      success: true,
      message: '請求成功',
      code_url: res.code_url, // code_url就是用於生成支付二維碼的連接
      order_no: orderNo // 訂單號
    }
  }
  ctx.body = {
    success: false,
    message: '請求失敗'
  }
}

router.post('/api/pay', pay)

module.exports = router
複製代碼

而後咱們要將這個router掛載到根目錄的app.js裏去。

找到以前默認的兩個路由，一個index，一個user：

const index = require('./routes/index')
const users = require('./routes/users')
const wechatpay = require('./routes/wechatpay') // 加在這裏
複製代碼

而後到頁面底下掛載這個路由：

// routes
app.use(index.routes(), index.allowedMethods())
app.use(users.routes(), users.allowedMethods())
app.use(wechatpay.routes(), users.allowedMethods()) // 加在這裏
複製代碼

因而你就能夠經過發送/api/pay來請求二維碼數據啦。（若是有跨域須要本身考慮解決跨域方案，能夠跟Koa放在同域裏，也能夠開一層proxy來轉發，也能夠開CORS頭等等）

注意， 本例裏是用前端來生成二維碼，其實也能夠經過後端生成二維碼，而後再返回給前端。不過爲了簡易演示，本例採用前端經過獲取code_url後，在前端生成二維碼。

展現支付二維碼

前端我用的是Vue，固然你能夠選擇你喜歡的前端框架。這裏關注點在於經過拿到剛纔後端傳過來的code_url來生成二維碼。

在前端，我使用的是@xkeshi/vue-qrcode這個庫來生成二維碼。它調用特別簡單：

import VueQrcode from '@xkeshi/vue-qrcode'
export default {
  components: {
    VueQrcode
  },
  // ...其餘代碼
}
複製代碼

而後就能夠在前端裏用<vue-qrcode>的組件來生成二維碼了：

<vue-qrcode :value="codeUrl" :options="{ size: 200 }">
複製代碼

放到Dialog裏就是這樣的效果：

文本是我本身添加的

付款成功自動刷新頁面

有兩種將支付成功寫入數據庫的辦法。

一種是在打開了掃碼對話框後，不停向微信服務端輪詢支付結果，若是支付成功，那麼就向後端發起請求，告訴後端支付成功，讓後端寫入數據庫。

一種是後端一直開着接口，等微信主動給後端的notify_url發起post請求，告訴後端支付結果，讓後端寫入數據庫。而後此時前端向後端輪詢的時候應該是去數據庫取輪詢該訂單的支付結果，若是支付成功就關閉Dialog。

第一種比較簡單可是不安全：試想萬一用戶支付成功的同時關閉了頁面，或者用戶支付成功了，可是網絡有問題致使前端無法日後端發支付成功的結果，那麼後端就一直沒辦法寫入支付成功的數據。

第二種雖然麻煩，可是保證了安全。全部的支付結果都必須等微信主動向後端通知，後端存完數據庫後再返回給前端消息。這樣哪怕用戶支付成功的同時關閉了頁面，下次再打開的時候，因爲數據庫已經寫入了，因此拿到的也是支付成功的結果。

因此付款成功自動刷新頁面這個部分咱們分爲兩個部分來講：

前端部分

Vue的data部分

data: {
  payStatus: false, // 未支付成功
  retryCount: 0, // 輪詢次數，從0-200
  orderNo: 'xxx', // 從後端傳來的order_no
  codeUrl: 'xxx' // 從後端傳來的code_url
}
複製代碼

在methods裏寫一個查詢訂單信息的方法：

// ...

handleCheckBill () {
  return setTimeout(() => {
    if (!this.payStatus && this.retryCount < 120) {
      this.retryCount += 1
      axios.post('/api/check-bill', { // 向後端請求訂單支付信息
        orderNo: this.orderNo
      })
        .then(res => {
          if (res.data.success) {
            this.payStatus = true
            location.reload() // 偷懶就用reload從新刷新頁面
          } else {
            this.handleCheckBill()
          }
        }).catch(err => {
          console.log(err)
        })
    } else {
      location.reload()
    }
  }, 1000)
}
複製代碼

在打開二維碼Dialog的時候，這個方法就啓用了。而後就開始輪詢。我訂了一個時間，200s後若是仍是沒有付款信息也自動刷新頁面。實際上你能夠本身根據項目的須要來定義這個時間。

後端部分

前端到後端只有一個接口，可是後端有兩個接口。一個是用來接收微信的推送，一個是用來接收前端的查詢請求。

先來寫最關鍵的微信的推送請求處理。因爲咱們接收微信的請求是在Koa的路由裏，而且是以流的形式傳輸的。須要讓Koa支持解析xml格式的body，因此須要安裝一個rawbody來獲取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表明支付成功
      // ... 這裏是寫入數據庫的相關操做

      // 開始回傳微信
      ctx.type = 'application/xml' // 指定發送的請求類型是xml
      // 回傳微信，告訴已經收到
      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的形式回傳的，會調試半天。。

接下來這個就是比較簡單的給前端回傳的了。

const checkBill = async (ctx) => {
  const form = ctx.request.body
  const orderNo = form.orderNo
  const result = await 數據庫操做

  if (result) { // 若是訂單支付成功
    return ctx.body = {
      success: true
    }
  }

  ctx.status = 400
  ctx.body = {
    success: false
  }
}

router.post('/api/check-bill', checkBill)
複製代碼

總結

至此，一整個基於Koa2的微信二維碼支付流程就簡單演示完了，因爲不是公開的項目，因此沒有實際的GitHub倉庫。不過基本上關鍵的代碼我都已經註釋出來啦。我參考了很多人的實現，曾考慮過用一些好比wechatpay的npm庫，不過最終仍是本身解決了。這裏面感謝不少前人的分享，也但願我這篇文章能給你一些幫助。

參考文章

微信支付文章

https://www.itbaby.me/blog/59e21af45d21b31fcd4e02c6

https://juejin.im/post/5a8e84faf265da4e7e10c92f

返回接口

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流處理

https://blog.csdn.net/yxz1025/article/details/52313221

https://juejin.im/post/5a6c558ef265da3e4b77030f

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程