您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

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

时间:2020-05-25 12:42:59  来源:  作者:

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

 

作者:河畔一角

转发链接:https://mp.weixin.qq.com/s/ANLjtieWELr39zhgRAeF1w

前言

最近有不少同学希望我能够把微信支付的前后端流程整理一下,"虽然买了课程,依然看的比较晕"。

实际上,我在2019年下半年出了一篇文章,包含微信授权登录、手机号授权、微信分享、微信支付等众多功能,前端分别基于微信公众号H5、微信小程序和微信小程序云开发,后端基于Node,整体来讲体量还是比较大。

实际上支付的所有流程在微信开发文档上面都有,我们依然是基于公司的支付需求结合开发文档,把自身的经验传授给大家。看不懂、看不明白,在我看来主要还是工作经验偏少,自学能力缺乏的表现。

今天借这个机会,把微信支付流程做汇总。

支付分享整体流程

「干货」微信支付前后端流程整理(Vue+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)

以上是微信官方的授权流程,思路很明确

实战开发代码流程

  1. 检查本地cookie是否有openId

App.vue公共组件中,定义check方法,新用户新进行微信授权,老用户直接获取jssdk-config配置信息。

  // 检查用户是否授权过
  checkUserAuth(){
    let openId = this.$cookie.get('openId');
    if(!openId){
      // 如果第一次就需要跳转到后端进行微信授权
      window.location.href = API.wechatRedirect;
    }else{
      // 如果已经授权,直接获取配置信息
      this.getWechatConfig();
    }
  }
  1. 定义跳转链接

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,用于跳转到微信做登录授权。

  1. 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上面来。

  1. 根据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);
    })
  })
}
  1. 获取微信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);
      })
    }
  })
}

此步骤就是调用后台接口获取配置,进行注册,同时可调用微信的分享接口进行注册,后续即可发起微信分享功能。

  1. 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接口列表
}))

到此,第一阶段就结束了,前端已经可以做分享、授权等功能了。

  1. 调用支付钱包接口
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){
              // 失败
            }
          });
        }
      })
    }

调用钱包接口获取支付配置,拉起微信支付即可

  1. 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()))
  });
});

以上是整个分享、支付流程,关于支付核心,下面我单独列出。

支付核心流程

  1. 生成随机数
createNonceStr(){
  return Math.random().toString(36).substr(2,15);
}
  1. 生成时间戳
createTimeStamp(){
  return parseInt(new Date().getTime() / 1000) + ''
}
  1. 生成预支付的签名
  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();
  }
  1. 拼接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;
}
  1. 调用微信统一下单接口

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



Tags:微信支付   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
如今,微信支付已经是人们再熟悉不过的日常操作了,人们无论是在网上购物,还是在日常出行买菜,亦或者是外出游玩,都需要涉及到微信支付,而现如今,微信支付已经几乎覆盖了我们很多人的...【详细内容】
2021-09-14  Tags: 微信支付  点击:(51)  评论:(0)  加入收藏
手机支付越来越便捷的今天,大部分人已经极少使用现金支付。 微信支付、支付宝支付 = 钱包。 但是,就算揣自己怀里的钱,都有可能被偷、被抢,更别说放在手机里了。 再加上现在个人...【详细内容】
2021-09-13  Tags: 微信支付  点击:(128)  评论:(0)  加入收藏
自从有了电子移动支付,我们出门基本就不带现金了,移动支付给我们的生活带来很多便利,我们使用的电子支付方式主要有两种,微信支付和支付宝支付,今天我就说说使用微信支付需要注意...【详细内容】
2021-09-01  Tags: 微信支付  点击:(81)  评论:(0)  加入收藏
微信支付对于当下的我们来说,是非常重要的一个手机功能,可以方便我们在出门购物消费时直接支付,而不再需要随身携带现金。在使用微信支付之前,是需要实名认证、绑定我们的身份证...【详细内容】
2021-08-25  Tags: 微信支付  点击:(55)  评论:(0)  加入收藏
近期小编听说有的小伙伴名下绑定了多个微信支付账户却毫不知情,这是非常危险的!下面小编为大家介绍一个小方法可以在手机上快速查询名下微信号,闲置的微信号最好还是解绑了哟需...【详细内容】
2021-08-17  Tags: 微信支付  点击:(254)  评论:(0)  加入收藏
商家想要实现微信支付宝收款码二合一,也就是聚合收款码,做法其实很简单。 一,我们首先来认识聚合收款码 1,聚合收款码是什么?聚合收款二维码,从字面来理解就是一个二维码支持多种...【详细内容】
2021-05-26  Tags: 微信支付  点击:(261)  评论:(0)  加入收藏
5月8日,数字人民币APP更新,钱包运营机构中的“网商银行(支付宝)”已呈现可用状态。同时,工、农、中、建、交、邮储六大国有银行数字人民币钱包下均增加了饿了么、盒马鲜生、天猫...【详细内容】
2021-05-11  Tags: 微信支付  点击:(116)  评论:(0)  加入收藏
手机支付最主要的就是通过支付宝和微信了,很多人也会在微信钱包里放入不少零钱,方便支付使用。我们除了可以给手机添加密码外,还可以在微信支付上添加密码,保障大家的财产安全。...【详细内容】
2021-04-30  Tags: 微信支付  点击:(75)  评论:(0)  加入收藏
现如今,微信支付十分方便,很多中老年人也能轻松上手,节省了很多找零时间,也避免了没带钱包的尴尬。可是,在这种便捷背后,信息安全问题却不容小觑!前段时间有新闻报道称,一女子发现了...【详细内容】
2020-11-09  Tags: 微信支付  点击:(171)  评论:(0)  加入收藏
很多早期注册的微信都没有实名制或者是非本人认证的,这时候就需要注销微信支付重新认证,一起看看怎么操作。微信注销更换实名制教程进入微信,点击我的后点击支付,如下图所示 点...【详细内容】
2020-10-10  Tags: 微信支付  点击:(188)  评论:(0)  加入收藏
▌简易百科推荐
本文分为三个等级自顶向下地分析了glibc中内存分配与回收的过程。本文不过度关注细节,因此只是分别从arena层次、bin层次、chunk层次进行图解,而不涉及有关指针的具体操作。前...【详细内容】
2021-12-28  linux技术栈    Tags:glibc   点击:(3)  评论:(0)  加入收藏
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(2)  评论:(0)  加入收藏
程序是如何被执行的&emsp;&emsp;程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(10)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(20)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(25)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(25)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条