江苏龙网

  1. 主页 > 生活百科 > >

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

微信支付


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


推荐阅读


上一篇：从一个详细的实例来知道单片机编程，你照着做就行了

下一篇：茶叶咖啡因含量,孕妇能喝含咖啡因的茶吗