作者：河畔一角

转发链接：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

网站首页 > 技术文章正文

「干货」微信支付前后端流程整理(Vue+Node)

前言

支付分享整体流程

JSSDK

准备工作

授权方式解说

官方网页授权流程

实战开发代码流程

支付核心流程

推荐Vue学习资料文章：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

取消回复欢迎你发表评论:

网站首页 > 技术文章 正文

「干货」微信支付前后端流程整理(Vue+Node)

前言

支付分享整体流程

JSSDK

准备工作

授权方式解说

官方网页授权流程

实战开发代码流程

支付核心流程

推荐Vue学习资料文章：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

取消回复欢迎 你 发表评论:

网站首页 > 技术文章正文

取消回复欢迎你发表评论: