今天聊一下微信公众号开发在授权网页中的支付流程。
开发步骤
微型公众号开发有以下几个步骤：
1
2
3
4
5
| 1.获取全局access_token
2.获取网页授权的access_token和refresh_token
3.获取网页授权的签名(前端用于获取调用JSSDK的权限)
4.公众号支付-调用统一下单接口获取prepay_id
5.公众号支付-将签名返回给前端用于请求微信公众号支付
|
其中步骤1、2根据微信开发文档很容易完成；第3步就开始用到签名了，这一步的签名相对来说比较好做；第4、5步微信支付中的签名对第一次做微信支付开发的小伙伴来说就有点麻烦了。
详细介绍
下面从第3步开始详细介绍下每个步骤。
获取网页授权签名
获取网页授权的签名，前端调用JSSDK时，需要使用这个签名。这一步骤中，我们需要给前端返回如下数据（除jsApiList）：
1
2
3
4
5
6
7
8
| wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: [] // 必填，需要使用的JS接口列表
});
|
其中，signature是一个关键的参数。生成签名的规则可以去这里 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 的 附录1-JS-SDK使用权限签名算法 中查看
生成签名的代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| def post(self, request):
url = request.data["url"]
logger.debug("url:%s", url)
platform_info = {"appId": WXConfig.APPID, "timestamp": 0, "nonceStr": '', "signature": ''}
timestamp = int(time.time())
noncestr = ToolToken.generate_noncestr()
ticket = cache.get("jsapi_ticket")
if not ticket:
wx = WXToken()
wx.get_jsapi_ticket()
logger.debug("ticket:%s", ticket)
info_string = "jsapi_ticket=" + ticket + "&noncestr=" + noncestr + "&timestamp=" + str(timestamp) + "&url=" + url
signature = hashlib.sha1(info_string.encode("utf-8")).hexdigest()
platform_info["signature"] = signature
platform_info["timestamp"] = timestamp
platform_info["nonceStr"] = noncestr
return Response(platform_info, status=status.HTTP_200_OK)
|
调用支付相关接口
从这一步就开始调用微信支付的相关接口了。这里一定要注意，调用微信支付接口时，一定要看最新的说明文档，不要看旧的，不然会出现错误，并且不容易找到原因。
调用统一下单接口的代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
| async def unify_order(self):
"""
请求微信统一下单接口
:return:
"""
url = "https://api.mch.weixin.qq.com/pay/unifiedorder"
headers = {'Content-Type': 'application/xml'}
async with ClientSession() as session:
async with session.post(url=url, data=self.xml_data, headers=headers) as res:
ret = await res.text()
logger.debug("ret:%s", ret)
self.unify_order_data = self.xml_to_dict(ret)
logger.debug("self.unify_order_data:%s", self.unify_order_data)
|
其中，self.xml_data内容如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <xml>
<appid>你的appid</appid>
<attach>pay</attach>
<body>paytest</body>
<mch_id>商户号</mch_id>
<detail>apple</detail>
<nonce_str>你生成的随机字符串</nonce_str>
<notify_url>通知地址</notify_url>
<openid>你的openid</openid>
<out_trade_no>订单号</out_trade_no>
<spbill_create_ip>外网可访问ip地址</spbill_create_ip>
<total_fee>订单金额</total_fee>
<trade_type>JSAPI</trade_type>
<sign_type>MD5</sign_type>
<sign>签名</sign>
</xml>
|
其中最后一个参数sign的值是需要通过其他参数加密得到的，签名生成规则可以参考微信官方文档。这里需要说明一下，一定要加上sign_type这个参数(虽然官网说明文档中把这个参数标记为不是必须的)，显式指定加密方法，不然可能得到签名错误的结果。
上面xml中的参数可以根据需求添加。
请求成功后，会返回prepay_id这个值，在下一步中会用到。返回结果可能如下：
1
| {'return_code': 'SUCCESS', 'return_msg': 'OK', 'appid': appid, 'mch_id': 商户号, 'nonce_str': 随机字符串, 'sign': 签名, 'result_code': 'SUCCESS', 'prepay_id': prepay_id, 'trade_type': 'JSAPI'}
|
将信息返回给前端
这一步中需要将以下信息返回个前端：
1
2
3
4
5
6
7
8
9
10
| wx.chooseWXPay({
timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: '', // 支付签名随机串，不长于 32 位
package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
paySign: '', // 支付签名
success: function (res) {
// 支付成功后的回调函数
}
});
|
除了success，其他参数都需要返回给前端。从 timestamp到paySign这几个参数中，最难处理的又是签名paySign。当你看到上面那段js代码时，可能你看到的文档已经过时了，有可能误导你。生成签名给前端时可能只使用了timestamp,nonceStr,package,signType这几个参数，但是你将这样生成的名返回前端时，前端请求后可能得到签名认证错误的提示。
正确的签名生成方式是timestamp,nonceStr,package,signType和key(微信商户平台配置的key)都需要参与签名；并且package的值不是第4步中返回的prepay_id的值，而是”prepay_id=”+prepay_id这样一个字符串。具体如下：
1
| appId=${appid}&nonceStr=${nonceStr}&package=prepay_id=${prepay_id}&signType=MD5&timeStamp=${timeStamp}&key=${key}
|
将上面的字符串加密即可获得paySign的值。
前端获得签名后，再请求微信服务器，下面的支付流程就可以继续下去了。