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

作者：河畔一角

轉發(fā)鏈接：https://mp.weixin.qq.com/s/ANLjtieWELr39zhgRAeF1w

前言

最近有不少同學希望我能夠把微信支付的前后端流程整理一下，"雖然買了課程，依然看的比較暈"。

實際上，我在2019年下半年出了一篇文章，包含微信授權登錄、手機號授權、微信分享、微信支付等眾多功能，前端分別基于微信公眾號H5、微信小程序和微信小程序云開發(fā)，后端基于Node，整體來講體量還是比較大。

實際上支付的所有流程在微信開發(fā)文檔上面都有，我們依然是基于公司的支付需求結合開發(fā)文檔，把自身的經驗傳授給大家。看不懂、看不明白，在我看來主要還是工作經驗偏少，自學能力缺乏的表現。

今天借這個機會，把微信支付流程做匯總。

支付分享整體流程

對于微信授權分享、支付來說，大部分的功能都還是在后端，前端比較簡單。

JSSDK

微信JS-SDK是微信公眾平臺面向網頁開發(fā)者提供的基于微信內的網頁開發(fā)工具包。

通俗的講，但凡你用到微信分享、掃一掃、卡券、支付、錄音、拍照、位置等等所有功能，都要基于JS-SDK進行開發(fā)。

準備工作

微信支付需要注冊服務號
微信支付需要開通對公賬戶（注冊公司）
公眾平臺需要配置域名
- 業(yè)務域名：調用的接口對應的域名
- 安全域名：前端訪問的H5域名
- 授權域名：用戶授權回調的域名，通常跟H5是同一個域名
輔助文檔
綁定微信開發(fā)者
開通微信認證（每年認證費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)

以上是微信官方的授權流程，思路很明確

實戰(zhàn)開發(fā)代碼流程

檢查本地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'//獲取錢包接口，支付會用
}

這個地方很多人可能有疑問，為什么授權地址不是由前端觸發(fā)，而是交給了服務端？實際上兩邊都可以，我這兒覺得后端處理會更合適，這樣前端就少了很多邏輯判斷。當授權成功后，會跳轉到我們傳遞的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);
      })
    }
  })
}

此步驟就是調用后臺接口獲取配置，進行注冊，同時可調用微信的分享接口進行注冊，后續(xù)即可發(fā)起微信分享功能。

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));
        }
      })