今天是2020.5.22 周五 湖北 晴 30°C
最近有不少同学希望我能够把微信支付的前后端流程整理一下,"虽然买了课程,依然看的比较晕"。
实际上,我再2019年下半年出了一门微信支付的专项课程,包含微信授权登录、手机号授权、微信分享、微信支付等众多功能,前端分别基于微信公众号H5、微信小程序和微信小程序云开发,后端基于Node,整体来讲体量还是比较大。
![fdb723512c719b623cbf1d92f6befec7.png](https://i-blog.csdnimg.cn/blog_migrate/21b930569f5ef5697a16588a9c38da30.png)
课程链接:慕课支付专项课程
实际上支付的所有流程再微信开发文档上面都有,我们依然是基于公司的支付需求结合开发文档,把自身的经验传授给大家。看不懂、看不明白,再我看来主要还是工作经验偏少,自学能力缺乏的表现。
今天借这个机会,把微信支付流程做汇总。
支付分享整体流程
![686b5da97813a722f84db2a6ad9a8855.png](https://i-blog.csdnimg.cn/blog_migrate/86380d036a28cd8c2dc2201527a48f88.png)
对于微信授权分享、支付来说,大部分的功能都还是再后端,前端比较简单。
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)<