微信支付前后端流程整理(Vue+Node)
2020-05-25
加入收藏
作者：河畔一角
转发链接：https://mp.weixin.qq.com/s/ANLjtieWELr39zhgRAeF1w
前言
最近有不少同学希望我能够把微信支付的前后端流程整理一下，"虽然买了课程，依然看的比较晕"。
实际上，我在2019年下半年出了一篇文章，包含微信授权登录、手机号授权、微信分享、微信支付等众多功能，前端分别基于微信公众号H5、微信小程序和微信小程序云开发，后端基于Node，整体来讲体量还是比较大。
实际上支付的所有流程在微信开发文档上面都有，我们依然是基于公司的支付需求结合开发文档，把自身的经验传授给大家。看不懂、看不明白，在我看来主要还是工作经验偏少，自学能力缺乏的表现。
今天借这个机会，把微信支付流程做汇总。
支付分享整体流程
对于微信授权分享、支付来说，大部分的功能都还是在后端，前端比较简单。
JSSDK
微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。
通俗的讲，但凡你用到微信分享、扫一扫、卡券、支付、录音、拍照、位置等等所有功能，都要基于JS-SDK进行开发。
准备工作
- 微信支付需要注册服务号
- 微信支付需要开通对公账户（注册公司）
- 公众平台需要配置域名
- 业务域名：调用的接口对应的域名
- 安全域名：前端访问的H5域名
- 授权域名：用户授权回调的域名，通常跟H5是同一个域名
- 辅助文档
- 绑定微信开发者
- 开通微信认证（每年认证费300）
授权方式解说
当我们第一次访问线上的H5页面时，由于要调用微信分享、支付等功能，就必须先获取到用户的openId，而openId就必须先做微信授权。
- 静默授权 用户访问H5自动跳转到微信那边获取到openId后，自动跳转回来，这个过程用户无感知。
- 非静默授权 用户访问H5自动跳转到微信授权页面，手动点击同意（允许微信把个人信息提供给当前H5网站），微信会拼接一个code到回调地址上，进而根据code获取到openID等信息。
官方网页授权流程
- 跳转微信授权，获取code引导用户打开https://open.weixin.qq.com/connect/oauth2/authorize?Appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect进行网页授权，点击同意后，微信会拼接code到redirect_uri里面去。
- 通过code换取网页授权access_token
- 刷新access_token（如果需要）
- 拉取用户信息(需scope为 snsapi_userinfo)
以上是微信官方的授权流程，思路很明确
实战开发代码流程
- 检查本地cookie是否有openId
App.vue公共组件中，定义check方法，新用户新进行微信授权，老用户直接获取jssdk-config配置信息。
// 检查用户是否授权过
checkUserAuth(){
let openId = this.$cookie.get('openId');
if(!openId){
// 如果第一次就需要跳转到后端进行微信授权
window.location.href = API.wechatRedirect;
}else{
// 如果已经授权，直接获取配置信息
this.getWechatConfig();
}
}
- 定义跳转链接
api/index.js中，定义wechatRedirect地址，重点关注第一个API，我们会在后台定义/api/wechat/redirect接口，同时拼接callback地址
export default {
wechatRedirect:'/api/wechat/redirect?callback=http%3A%2F%2Fm.51purse.com%2F%23%2Findex&scope=snsapi_userinfo',
wechatConfig:'/api/wechat/jssdk',//获取sdk配置
getUserInfo:'/api/wechat/getUserInfo',//获取用户信息
payWallet: '/api/wechat/pay/payWallet'//获取钱包接口，支付会用
}
这个地方很多人可能有疑问，为什么授权地址不是由前端触发，而是交给了服务端？实际上两边都可以，我这儿觉得后端处理会更合适，这样前端就少了很多逻辑判断。当授权成功后，会跳转到我们传递的callback地址来。
/api/wechat/redirect 接口里面实际上就是一个重定向https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect，用于跳转到微信做登录授权。
- Node端定义redirect接口
// 用户授权重定向
router.get('/redirect',function (req,res) {
//获取前端回调地址
let callback = req.query.callback,
//获取授权类型
scope = req.query.scope,
//授权成功后重定向地址
redirectUrl = 'http://m.51purse.com/api/wechat/getOpenId';
// 临时保存callback
cache.put('callback', callback);
// 微信网页授权地址
let authorizeUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${config.appId}&redirect_uri=${callback}&response_type=code&scope=${scope}&state=STATE#wechat_redirect`;
//重定向到该地址
res.redirect(authorizeUrl);
})
此接口接收callback地址，然后直接重定向到微信授权页面，当用户点击同意以后，会自动跳转到redirectUrl上面来。
- 根据code获取openId
// 根据code获取用户的OpenId
router.get('/getOpenId',async function(req,res){
// 获取微信传过来的code值
let code = req.query.code;
if(!code){
res.json(util.handleFail('当前未获取到授权code码'));
}else{
let result = await common.getAccessToken(code);
if(result.code == 0){
let data = result.data;
let expire_time = 1000 * 60 * 60 * 2;
cache.put('access_token', data.access_token, expire_time);
res.cookie('openId', data.openid, { maxAge: expire_time });
let openId = data.openid;
// to-do
/**
此处根据openId到数据库中进行查询，如果存在直接进行重定向，如果数据库没有，则根据token获取用户信息，插入到数据库中，最后进行重定向。
*/
}else{
res.json(result);
}
}
})
第三步用户同意授权以后，会重定向到此接口来，并且微信会在url后面拼接一个code值，我们根据code来获取网页授权access_token，根据token就可以拉取到用户信息（昵称、头像）了，最好插入到数据库中。
getToken和getUserInfo接口封装
//根据code获取token
exports.getAccessToken = function(code){
let token_url = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${config.appId}&secret=${config.appSecret}&code=${code}&grant_type=authorization_code`;
return new Promise((resolve, reject) => {
request.get(token_url, function (err, response, body) {
let result = util.handleResponse(err, response, body);
resolve(result);
})
});
}
//根据token获取用户信息
exports.getUserInfo = function (access_token,openId){
let userinfo = `https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${openId}&lang=zh_CN`;
return new Promise((resolve,reject)=>{
request.get(userinfo, function (err, response, body) {
let result = util.handleResponse(err, response, body);
resolve(result);
})
})
}
- 获取微信sdk配置
前面四步做完以后，服务端会把openId写入到cookie中，此时前端根据openId来拉取sdk配置
// 获取微信配置信息
getWechatConfig(){
this.$axIOS.get(API.wechatConfig+'?url='+location.href.split('#')[0]).then(function(response){
let res = response.data;
if(res.code == 0){
let data = res.data;
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: data.appId, // 必填，公众号的唯一标识
timestamp: data.timestamp, // 必填，生成签名的时间戳
nonceStr: data.nonceStr, // 必填，生成签名的随机串
signature: data.signature,// 必填，签名
jsApiList: data.jsApiList // 必填，需要使用的JS接口列表
})
// 封装统一的分享信息
wx.ready(()=>{
util.initShareInfo(wx);
})
}
})
}
此步骤就是调用后台接口获取配置，进行注册，同时可调用微信的分享接口进行注册，后续即可发起微信分享功能。
- Node生成jssdk配置
- 获取全局access_token（非网页token）
- 获取jsapi_ticket
- 生成noncestr（随机数）
- 生成timestamp（时间戳）
- 签名（noncestr+jsapi_ticket+timestamp+url）
生成sdk配置信息流程就是这样，我这儿不再提供所有代码，只贴一下签名代码。
let params = {
noncestr:util.createNonceStr(),
jsapi_ticket: data.ticket,
timestamp:util.createTimeStamp(),
url
}
let str = util.raw(params);
let sign = createHash('sha1').update(str).digest('hex');
res.json(util.handleSuc({
appId: config.appId, // 必填，公众号的唯一标识
timestamp: params.timestamp, // 必填，生成签名的时间戳
nonceStr: params.noncestr, // 必填，生成签名的随机串
signature: sign,// 必填，签名
jsApiList: [
'updateAppMessageShareData',
'updateTimelineShareData',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareQZone',
'chooseWXPay'
] // 必填，需要使用的JS接口列表
}))
到此，第一阶段就结束了，前端已经可以做分享、授权等功能了。
- 调用支付钱包接口
this.$axios.get(API.payWallet,{
params:{
money
}
}).then((response)=>{
let result = response.data;
if(result && result.code == 0){
// 通过微信的JS-API,拉起微信支付
let res = result.data;
wx.chooseWXPay({
timestamp: res.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: res.nonceStr, // 支付签名随机串，不长于 32 位
package: res.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
signType: res.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
paySign: res.paySign, // 支付签名
success: function (res) {
// 成功
},
cancel:function(){
// 取消
},
fail:function(res){
// 失败
}
});
}
})
}
调用钱包接口获取支付配置，拉起微信支付即可
- Node后台钱包接口
// 微信支付
router.get('/pay/payWallet',function(req,res){
let openId = req.cookies.openId;//用户的openid
let appId = config.appId;//应用的ID
let attach = "微信支付课程体验";//附加数据
let body = "欢迎学习慕课首门支付专项课程";//支付主体内容
let total_fee = req.query.money;//支付总金额
// 支付成功后，会向此接口推送成功消息通知
let notify_url = "http://m.51purse.com/api/wechat/pay/callback"
// 服务器IP
let ip = "XX.XX.XX.XX";
// 封装的下单支付接口
wxpay.order(appId, attach, body, openId, total_fee, notify_url, ip).then((result) => {
res.json(util.handleSuc(result));
}).catch((result) => {
res.json(util.handleFail(result.toString()))
});
});
以上是整个分享、支付流程，关于支付核心，下面我单独列出。
支付核心流程
- 生成随机数
createNonceStr(){
return Math.random().toString(36).substr(2,15);
}
- 生成时间戳
createTimeStamp(){
return parseInt(new Date().getTime() / 1000) + ''
}
- 生成预支付的签名
getPrePaySign: function (appid, attach, body, openid, total_fee, notify_url, ip, nonce_str, out_trade_no) {
let params = {
appid,
attach,
body,
mch_id: config.mch_id,
nonce_str,
notify_url,
openid,
out_trade_no,
spbill_create_ip: ip,
total_fee,
trade_type: 'JSAPI'
}
let string = util.raw(params) + '&key=' + config.key;
let sign = createHash('md5').update(string).digest('hex');
return sign.toUpperCase();
}
- 拼接xml下单数据
wxSendData: function (appid, attach, body, openid, total_fee, notify_url, ip, nonce_str, out_trade_no,sign) {
let data = '<xml>' +
'<appid><![CDATA[' + appid + ']]></appid>' +
'<attach><![CDATA[' + attach + ']]></attach>' +
'<body><![CDATA[' + body + ']]></body>' +
'<mch_id><![CDATA[' + config.mch_id + ']]></mch_id>' +
'<nonce_str><![CDATA[' + nonce_str + ']]></nonce_str>' +
'<notify_url><![CDATA[' + notify_url + ']]></notify_url>' +
'<openid><![CDATA[' + openid + ']]></openid>' +
'<out_trade_no><![CDATA[' + out_trade_no + ']]></out_trade_no>' +
'<spbill_create_ip><![CDATA[' + ip + ']]></spbill_create_ip>' +
'<total_fee><![CDATA[' + total_fee + ']]></total_fee>' +
'<trade_type><![CDATA[JSAPI]]></trade_type>' +
'<sign><![CDATA['+sign+']]></sign>' +
'</xml>'
return data;
}
- 调用微信统一下单接口
https://api.mch.weixin.qq.com/pay/unifiedorder
let url = 'https://api.mch.weixin.qq.com/pay/unifiedorder';
request({
url,
method: 'POST',
body: sendData
}, function (err, response, body) {
if (!err && response.statusCode == 200) {
xml.parseString(body.toString('utf-8'),(error,res)=>{
if(!error){
let data = res.xml;
if (data.return_code[0] == 'SUCCESS' && data.result_code[0] == 'SUCCESS'){
// 获取预支付的ID
let prepay_id = data.prepay_id || [];
// 此处非常重要，生成前端所需要的支付配置
let payResult = self.getPayParams(appid, prepay_id[0]);
resolve(payResult);
}
}
})
} else {
resolve(util.handleFail(err));
}
})
最后，我们会生成前端支付所需要的配置信息，前端通过微信API即可拉起微信支付。
作者：河畔一角
转发链接：https://mp.weixin.qq.com/s/ANLjtieWELr39zhgRAeF1w
