热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

node微信支付踩坑日记(公众号支付)

前言:花了好几天的时间搞了下微信公众号支付,期间历程无比心酸,总的来说还是理解能力不够和经验不足,现在归纳下支付中遇到的坑。先看业务流程前期猜想及准备工作首先,公众号支付采用的是,

前言:花了好几天的时间搞了下微信公众号支付,期间历程无比心酸,总的来说还是理解能力不够和经验不足,现在归纳下支付中遇到的坑。

先看业务流程
《node微信支付踩坑日记(公众号支付)》

前期猜想及准备工作

首先,公众号支付采用的是,利用微信的js-sdk调起支付的方式进行的,其中分为两种情况:微信jssdk调起和微信支付开放平台调起。但是,无论是采用什么方法首先都要先配置wx.config。

wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [] // 必填,需要使用的[JS接口列表][4],chooseWXPay 微信支付接口
});

参数分析:appId,timestamp,nonceStr 这里需要注意一下变量的大小写,这里采用的是驼峰命名法,timestamp因为本身就是一个单词,所以不要写错。signature这个需要注意一下,毕竟涉及到的 sign(签名)、token 实在太多了,极其容易混淆。同时,生成签名之前必须先了解一下jsapi_ticket,jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取,获取jsapi_ticket的api调用次数非常有限,频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket ,然而access_token的有效期也只有7200秒,所以把jsapi_ticket和access_token同时缓存(当然你可以只存jsapi_ticket) 。这里推荐参数从后台获取,代码如下:

{
const moment = require('moment'), //时间处理类 cnpm i moment
request = require("request"); //cnpm i request https://github.com/request/request
wxCOnfig= {
appid:'', //appid
appsecret:'', //appsecret
mcnsecret:'', //商户key
mcnid:'', //商户号
notify_url:'' //支付成功想要回调的后台地址,用于修改订单状态等等操作
}
// 获取 公众号的access_token和ticket ,需要存入缓存或者数据库,有效期7200s,请注意和获取用户access_token api进行区分
app.get('/accpetSubscriptionNow',async function (req,res,next) {
let task = await XXXXModel.findOne({where:where});//获取存在数据库里面的公众号的accesstoken,XXXXModel是自己的表
let cc = {};
let WXInitCOnfig= {};//创建一个空对象用以存储微信公众号配置信息
// 判断数据库里面是否存在accesstoken等信息,且存放的时间是否超过7200秒
if(JSON.stringify(task.updateBy)==='{}' || parseInt(moment(task.updateBy.updateTime).format('X')) + 7200 console.log('#1.判断accesstoken的更新时间大于7200s,重新拉取accesstoken')
request.get(
{
// 获取access_token的接口
url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${wxConfig.appid}&secret=${wxConfig.appsecret}`
},
async function (error, response, body) {
console.log('body', body)
//成功获取到access_token,这里应该有个判断
const ACCESS_TOKEN = JSON.parse(response.body).access_token;
let json = JSON.parse(response.body);
request.get({
// 获取jsapi_ticket的接口
url: `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${ACCESS_TOKEN}&type=jsapi`
},
async function (error, response, body) {
//成功获取到jsapi_ticket,这里应该有个判断
console.log('body2', body)
let updateBy = {
updateTime : new Date()
}
json.ticket = JSON.parse(body).ticket;
// 把获取到的access_token和jsapi_ticket存放到数据库,并标明更新时间
cc = await XXXXModel.findOneAndUpdate({
where:where
}, {data: data})

WXInitCOnfig= cc.content;
//console.log('WXInitConfig',WXInitConfig)
let data = await acceptsignature(WXInitConfig);
//console.log('data',data)
res.send(data);//传递微信号配置信息到前端
})
}
)
}else {
console.log('#2.判断accesstoken的更新时间小于7200s,从数据库获取access_token和ticket')
WXInitCOnfig= task.content;
let data = await acceptsignature(WXInitConfig);
res.send(data);
}
})
// 获取signature签名的方法
function acceptsignature(WXInitConfig) {
console.log('WXInitConfig2',WXInitConfig)
let appid = wxConfig.appid;
let nOnceStr= Math.random().toString(36).substr(2, 15);
let access_token = WXInitConfig.access_token;
let jsapi_ticket = WXInitConfig.ticket;
let timestamp = moment().format('X');
let url = 'http://mmobile.hwason.cn/'; // 把所需的参数ASCII序列化
let ASC = `jsapi_ticket=${jsapi_ticket}&nOncestr=${nonceStr}×tamp=${timestamp}&url=${url}`;
console.log('ASCII',ASC)
// 把序列化的数据使用 SHA1 方法加密,记住得到的是小写的加密串
let signature = SHA1(ASC).toLowerCase();
console.log('signature',signature)
let data = {
appid:appid,
nonceStr:nonceStr,
// access_token:access_token,
// jsapi_ticket:jsapi_ticket,
timestamp:timestamp,
// url:url,
signature:signature,
result:'00'
}
return data;
}
}

到此,前端调用上述的接口就可以获取到微信的配置参数了。
参数配置好了,就开始正式启动微信公众号支付了。

步骤①:设置支付目录
步骤②:设置授权域名
步骤③:前台进入微信授权页面
微信授权又分为5步:
1)进入微信授权页,用户同意授权,获取code

//进入授权页有两张方式
// 一、前端直接跳转
let return_url = ''; //授权后回调的页面,这里是前端的地址url
window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx1a1cf7c547b07420&redirect_uri=" + encodeURIComponent(return_url) + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
// 二、后端重定向
//尤其注意:由于授权操作安全等级较高,所以在发起授权请求时,微信会对授权链接做正则强匹配校验,如果链接的参数顺序不对,授权页面将无法正常访问

推荐阅读
  • 本文介绍了 Vue 开发的入门指南,重点讲解了开发环境的配置与项目的基本搭建。推荐使用 WebStorm 作为 IDE,其下载地址为 。安装时请选择适合您操作系统的版本,并通过 获取激活码。WebStorm 是前端开发者的理想选择,提供了丰富的功能和强大的代码编辑能力。 ... [详细]
  • 基于Net Core 3.0与Web API的前后端分离开发:Vue.js在前端的应用
    本文介绍了如何使用Net Core 3.0和Web API进行前后端分离开发,并重点探讨了Vue.js在前端的应用。后端采用MySQL数据库和EF Core框架进行数据操作,开发环境为Windows 10和Visual Studio 2019,MySQL服务器版本为8.0.16。文章详细描述了API项目的创建过程、启动步骤以及必要的插件安装,为开发者提供了一套完整的开发指南。 ... [详细]
  • 深入解析 Vue 中的 Axios 请求库
    本文深入探讨了 Vue 中的 Axios 请求库,详细解析了其核心功能与使用方法。Axios 是一个基于 Promise 的 HTTP 客户端,支持浏览器和 Node.js 环境。文章首先介绍了 Axios 的基本概念,随后通过具体示例展示了如何在 Vue 项目中集成和使用 Axios 进行数据请求。无论你是初学者还是有经验的开发者,本文都能为你解决 Vue.js 相关问题提供有价值的参考。 ... [详细]
  • 提升 Kubernetes 集群管理效率的七大专业工具
    Kubernetes 在云原生环境中的应用日益广泛,然而集群管理的复杂性也随之增加。为了提高管理效率,本文推荐了七款专业工具,这些工具不仅能够简化日常操作,还能提升系统的稳定性和安全性。从自动化部署到监控和故障排查,这些工具覆盖了集群管理的各个方面,帮助管理员更好地应对挑战。 ... [详细]
  • 本文详细介绍了在 Vue.js 前端框架中集成 vue-i18n 插件以实现多语言支持的方法。通过具体的配置步骤和示例代码,帮助开发者快速掌握如何在项目中实现国际化功能,提升用户体验。同时,文章还探讨了常见的多语言切换问题及解决方案,为开发人员提供了实用的参考。 ... [详细]
  • 在GitHub上克隆vue-element-admin项目时遇到依赖安装错误
    在 GitHub 上克隆 vue-element-admin 项目后,使用 `npm install` 安装依赖时遇到了未知的 Git 错误。具体错误信息为 `npm ERR! code 128`,提示命令执行失败。这可能是由于网络问题、Git 配置不正确或某些依赖包的仓库地址无效导致的。建议检查网络连接、更新 Git 版本并确保所有依赖项的 URL 正确无误。 ... [详细]
  • 掌握PHP编程必备知识与技巧——全面教程在当今的PHP开发中,了解并运用最新的技术和最佳实践至关重要。本教程将详细介绍PHP编程的核心知识与实用技巧。首先,确保你正在使用PHP 5.3或更高版本,最好是最新版本,以充分利用其性能优化和新特性。此外,我们还将探讨代码结构、安全性和性能优化等方面的内容,帮助你成为一名更高效的PHP开发者。 ... [详细]
  • 深入探索Node.js新框架:Nest.js第六篇
    在本文中,我们将深入探讨Node.js的新框架Nest.js,并通过一个完整的示例来展示其强大功能。我们将使用多个装饰器创建一个基本控制器,该控制器提供了多种方法来访问和操作内部数据,涵盖了常见的CRUD操作。此外,我们还将详细介绍Nest.js的核心概念和最佳实践,帮助读者更好地理解和应用这一现代框架。 ... [详细]
  • Linux CentOS 7 安装PostgreSQL 9.5.17 (源码编译)
    近日需要将PostgreSQL数据库从Windows中迁移到Linux中,LinuxCentOS7安装PostgreSQL9.5.17安装过程特此记录。安装环境&#x ... [详细]
  • 大家好,我是李白。本文将分享一个从零开始的全栈项目,涵盖了设计、前端、后端和服务端的全面学习过程。通过这个项目,我希望能够帮助初学者更好地理解和掌握全栈开发的技术栈。 ... [详细]
  • 本文将详细介绍如何注册码云账号、配置SSH公钥、安装必要的开发工具,并逐步讲解如何下载、编译 HarmonyOS 2.0 源码。通过本文,您将能够顺利完成 HarmonyOS 2.0 的环境搭建和源码编译。 ... [详细]
  • 【实例简介】本文详细介绍了如何在PHP中实现微信支付的退款功能,并提供了订单创建类的完整代码及调用示例。在配置过程中,需确保正确设置相关参数,特别是证书路径应根据项目实际情况进行调整。为了保证系统的安全性,存放证书的目录需要设置为可读权限。值得注意的是,普通支付操作无需证书,但在执行退款操作时必须提供证书。此外,本文还对常见的错误处理和调试技巧进行了说明,帮助开发者快速定位和解决问题。 ... [详细]
  • 深入解析:React与Webpack配置进阶指南(第二部分)
    在本篇进阶指南的第二部分中,我们将继续探讨 React 与 Webpack 的高级配置技巧。通过实际案例,我们将展示如何使用 React 和 Webpack 构建一个简单的 Todo 应用程序,具体包括 `TodoApp.js` 文件中的代码实现,如导入 React 和自定义组件 `TodoList`。此外,我们还将深入讲解 Webpack 配置文件的优化方法,以提升开发效率和应用性能。 ... [详细]
  • CentOS 7环境下Jenkins的安装与前后端应用部署详解
    CentOS 7环境下Jenkins的安装与前后端应用部署详解 ... [详细]
  • npm 安装出错,求助高手分析原因并提供解决方案 ... [详细]
author-avatar
云下拾雨
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有