基于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教程