Vue3+Typescript+Node.js实现微信端公众号H5支付(JSAPI v3)教程-

Vue3+Typescript+Node.js实现微信端公众号H5支付(JSAPI v3)教程-

----微信支付文档,不得不说,挺乱!(吐槽截止)

功能背景

微信公众号中,点击菜单或者扫码,打开公众号中的H5页面,进行支付。

 

一、技术栈

前端:Vue:3.0.0,typescript:3.9.3,axios,vant,weixin-jsapi(微信官方wxjsdk)

后端:Koa,wxpay-3(不错的apiv3封装 https://github.com/yangfuhe/node-wxpay),axios

 

二、微信公众平台配置

1. 申请公众号。

2. 公众号设置:功能设置,JS接口安全域名(前端调用JSSDK,调用微信开放JS接口时使用),网页授权域名(用户授权,获取openID前,需要获取code,整个过程中需要一个回调页面,此页面所在域名)。

    注意:a.这两个域名可以一样,根据实际情况使用。。一般是一样;目前教程中这里是同一个域名,就是前端所在的域名,比如:wxpay.test.cn,不要有http前缀;

               b.需要把下载文件放置到域名所在文件下,保证wxpay.test.cn/MP_verify_***.txt可访问。

3. 设置与开发:基本配置--公众号开发信息,记住AppID,AppSecret(获取access_token和openID时使用),IP白名单(微信开发者工具中,获取access_token时使用)。

 

三、微信商户平台配置

1. 申请商户号。

2. 我的产品:开通JSAPI支付。

3. 开发配置:JSAPI支付,添加支付授权目录。此配置是前端支付页面URL路径。目前教程中与上面的两个域名一样(wxpay.test.cn)。

4. AppID账号管理:与公众号关联,即上面的公众号AppID绑定。申请关联后,要前往公众号:广告与服务--微信支付,商户号管理,同意关联。这样,公众号与商户号才能绑定。

5. 我的账号:账户设置--API安全,申请API证书,API证书管理--证书序列号,设置API秘钥(其实没用,因为是用的后面的v3秘钥),设置APIv3秘钥。

 

四、前端开发

1. 添加JSSDK模块,npm install weixin-jsapi -s

2. 创建PayTest.vue页面,就一个支付按钮。

<template>
  <div id="paytest">
    <van-button round block type="primary" @click="doPay">支付</van-button>
    <div v-html="msg" style="white-space: pre-wrap;"></div>
  </div>
</template>

3. 添加逻辑<script lang="ts">import { Vue } from "vue-class-component";

import { Action } from "vuex-class";
import wx from "weixin-jsapi";

export default class PayTest extends Vue {
  @Action("setOpenID") private setOpenID: any;
  private appID = "wx46adeb36e3e622ad"; //微信公众号appID,可做成配置项
  private msg = "";

  public created() {
    //判断本地是否已存openID   
    if (!this.$store.state.openID) {
      //如果未存,则要通过授权,回调页面,获取code,然后获取openID,保存本地
      this.getWxAuth();
    }

    //初始化wx的jssdk的config
    this.initWxConfig();
  }

  //用户授权,回调,获取openID
  private getWxAuth() {
    //官方参考文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
    if (!this.$route.query.code) {
      //微信授权,授权后重定向到本页面
      const localUrl = window.location.href;
      alert(localUrl);
      window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appID}&redirect_uri=${localUrl}&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect`;
    } else {
      //如果已经授权,获取code参数,通过后端获取openID,返回前端,保存本地缓存
      const url = "/public/wxPort/getWxOpenId";
      this.axios.get(url, { params: { code: this.$route.query.code } })
        .then((res: any) => {
          //openID保存本地
          if (res.status.code === 1) {
            this.setOpenID(res.data.openID);
            this.msg += `---授权成功,openID:${res.data.openID}
`;
          } else {
            //抛出错误
            this.msg += `---获取openID失败:${JSON.stringify(res)}
`;
          }
        }).catch((err: any) => {
          this.msg += `---获取openID失败err:${JSON.stringify(err)}
`;
        });
    }
  }
  //初始化wx JSSDK
  private initWxConfig() {
    //后端获取access_token和ticket,返回签名信息,初始化wx.config
    const url = "/public/wxPort/getTicket";
    this.axios.get(url).then((res: any) => {
      if (res.status.code === 1) {
        this.msg += `---获取 ticket成功,返回结果:${JSON.stringify(res.data)}
`;

        //官方参考文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1
        //初始化验证jssdk
        wx.config({
          debug: true, // 这里一般在测试阶段先用ture,等打包给后台的时候就改回false,
          appId: this.appID, // 必填,公众号的唯一标识
          timestamp: res.data.timestamp, // 必填,生成签名的时间戳
          nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
          signature: res.data.signature, // 必填,签名
          jsApiList: ["chooseWXPay"], // 必填,需要使用的JS接口列表
        });

        //通过ready接口处理成功验证
        wx.ready(() => {
          this.msg += `---初始化wx.config成功
`;
          wx.checkJsApi({
            jsApiList: ["chooseWXPay"], // 需要检测的JS接口列表,所有JS接口列表见附录2,
            success: (res: any) => {
              // 以键值对的形式返回,可用的api值true,不可用为false
              // 如:{"checkResult":{"chooseWXPay":true},"errMsg":"checkJsApi:ok"}
              this.msg += `---检查wx.checkJsApi[chooseWXPay]成功:${JSON.stringify(res)}}
`;
            }
          });
        });

        //通过error接口处理失败验证
        wx.error((err: any) => {
          this.msg += `---wx接口失败:${JSON.stringify(err)}}
`;
        });
      } else {
        //抛出错误
        this.msg += `---获取ticket失败,返回结果:${JSON.stringify(res)}
`;
      }
    }).catch((err: any) => {
      this.msg += `---获取ticket失败err,返回结果:${JSON.stringify(err)}
`;
    });
  }

  //支付按钮
  private doPay() {
    //先是后端用户下单,下完单之后,前端再调取微信支付
    const url = "/public/wxPort/prepay";
    this.axios.get(url, { params: { openID: this.$store.state.openID } })
      .then((res: any) => {
        if (res.status.code === 1) {
          this.msg += `---统一下单成功,返回结果:${JSON.stringify(res.data)}
`;
          const _that = this;
          wx.chooseWXPay({
            timestamp: res.data.timestamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
            nonceStr: res.data.nonceStr, // 支付签名随机串,不长于 32 位
            package: "prepay_id=" + res.data.prepayID, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=***)
            signType: "RSA", // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
            paySign: res.data.paySign, // 支付签名
            success: function (res: any) {
              _that.msg += `---chooseWXPay成功,返回结果:${JSON.stringify(res)}
`;
            },
            // 支付取消回调函数
            cancel: function (res: any) {
              _that.msg += `---chooseWXPay取消,返回结果:${JSON.stringify(res)}
`;
            },
            // 支付失败回调函数
            fail: function (res: any) {
              _that.msg += `---chooseWXPay失败,返回结果:${JSON.stringify(res)}
`;
            },
          });
        } else {
          //抛出错误
          this.msg += `---统一下单失败,返回结果:${JSON.stringify(res)}
`;
        }
      })
      .catch((err: any) => {
        this.msg += `---统一下单失败err,返回结果:${JSON.stringify(err)}
`;
      });
  }
}
</script>

 

四、后端开发

需要安装插件:npm install wxpay-v3 -s

//以下变量可以在config中统一配置
//公众号appID
const appID = "wx46adeb36e3e622ad";
//公众号AppSecret
const appSecret = "5229c2220748d7a3c3cfe1028fda01c7";
//商户号mchID
const mchID = "1615227157";
//商户号API证书管理--证书序列号
const serialNo = "37CED47F994ED5F8B44766290CE7B979CE2CEFD3";
//商户号API安全--APIv3密钥
const apiv3PrivateKey = "01234567890123456789012345678901";
//商户号API证书,秘钥,也可以将秘钥中的文本复制过来
const privateKey = require("fs").readFileSync(Path.join(__dirname, "apiclient_key.pem")).toString();
//微信公众号登录授权,获取用户的openID,access_token等信息
    public static async getWxOpenId(ctx: any) {
        //官方参考文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
        let code = ctx.query.code; //获取code值
        let url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=" + appID + "&secret=" + appSecret + "&code=" + code + "&grant_type=authorization_code";
        let res: any = await axios.get(url);
        //错误时{"errcode":40029,"errmsg":"invalid code"}
        //正确时
        // {
        //     "access_token":"ACCESS_TOKEN",
        //     "expires_in":7200,
        //     "refresh_token":"REFRESH_TOKEN",
        //     "openid":"OPENID",
        //     "scope":"SCOPE" 
        //   }
        if (res.status === 200) {
            if ((res.data.errcode && res.data.errcode.length > 0) || !res.data.openid) {
                ctx.body = {
                    status: StatusCode.ErrorCustome(800, "获取微信用户授权openID失败:" + JSON.stringify(res.data)),
                }
            } else {
                ctx.body = {
                    status: StatusCode.Success("获取数据成功"),
                    data: {
                        openID: res.data.openid
                    }
                }
            }
        } else {
            ctx.body = {
                status: StatusCode.ErrorCustome(800, "获取微信用户授权openID失败:" + res.data)
            }
        }
    }
//获取JSSDK的access_token和ticket
    public static async getTicket(ctx: any) {
        //官方参考文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62
        //获取access_token,强烈建议保存数据库或缓存,根据过期时间判断是否要重新获取    
        //获取jsapi_ticketn,强烈建议保存数据库或缓存,根据过期时间判断是否要重新获取
        try {
            let tempTicket = "";//此处从数据库或缓存获取,如果未保存或过期,要重新获取。此处代码省略
            if (!tempTicket) {
                //获取access_token
                let tokenUrl = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appID}&secret=${appSecret}`;
                let tokenRes: any = await axios.get(tokenUrl);
                if (!tokenRes || tokenRes.status != 200 || tokenRes.data.errcode || !tokenRes.data.access_token) {
                    ctx.body = {
                        status: StatusCode.ErrorCustome(800, "获取微信access_token失败:" + JSON.stringify(tokenRes.data))
                    }
                    return;
                }

                //获取票据
                let ticketUrl = `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${tokenRes.data.access_token}&type=jsapi`;
                let ticketRes: any = await axios.get(ticketUrl);
                if (!ticketRes || ticketRes.status != 200 || ticketRes.data.errcode != 0 || !ticketRes.data.ticket) {
                    ctx.body = {
                        status: StatusCode.ErrorCustome(800, "获取微信ticket失败:" + JSON.stringify(ticketRes))
                    }
                    return;
                }
                tempTicket = ticketRes.data.ticket;
            }

            //生成签名
            let timestamp = Math.floor(Date.now() / 1000);
            let nonceStr = WXPortController.generateNonceStr();
            let obj = {
                jsapi_ticket: tempTicket,
                noncestr: nonceStr,
                timestamp: timestamp,
                url: ctx.header.referer  //url必须是调用JS接口页面的完整URL
            }
            //按照ASCII码从小到大排序
            let signStr = WXPortController.raw(obj);

            // hash加密
            const crypto = require("crypto");
            let shasum = crypto.createHash("sha1");
            shasum.update(signStr);
            let signature = shasum.digest("hex");

            ctx.body = {
                status: StatusCode.Success("获取数据成功"),
                data: {
                    timestamp,
                    nonceStr,
                    signature
                }
            }
        }
        catch (err) {
            ctx.throw(err.message);
        }
    }
//微信统一下单
    public static async prepay(ctx: any) {
        try {
            //调用wxpay-v3的插件
            const Payment = require("wxpay-v3");
            const paymnetTemp: any = new Payment({
                appid: appID,
                mchid: mchID,
                private_key: privateKey,
                serial_no: serialNo,
                apiv3_private_key: apiv3PrivateKey,
            });
            let res = await paymnetTemp.jsapi({
                description: "测试支付",
                out_trade_no: Date.now().toString(),
                notify_url: "http://gzh.zhongguoysd.top",//异步接收微信支付结果通知的回调地址
                amount: {
                    total: 1
                },
                payer: {
                    openid: ctx.query.openID
                },

            });

            const timestamp = Math.floor(Date.now() / 1000);
            const nonceStr = WXPortController.generateNonceStr();
            if (res.status === 200 && res.data) {
                let prepayIDRes = JSON.parse(res.data);
                if (prepayIDRes) {
                    //生成支付签名
                    let str = `${appID}
${timestamp}
${nonceStr}
prepay_id=${prepayIDRes.prepay_id}
`;
                    let paySign = paymnetTemp.rsaSign(str, privateKey, "SHA256withRSA");
                    ctx.body = {
                        status: StatusCode.Success("获取数据成功"),
                        data: {
                            prepayID: prepayIDRes.prepay_id,
                            paySign,
                            timestamp,
                            nonceStr
                        }
                    }
                    return;
                }
            } else {
                ctx.body = {
                    status: StatusCode.ErrorCustome(800, "获取prepayID失败:" + JSON.stringify(res.data)),
                }
            }
        }
        catch (err) {
            ctx.throw(err.message);
        }
    }
    //生成随机字符串
    public static generateNonceStr(length = 32) {
        const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        let noceStr = "", maxPos = chars.length;
        while (length--) noceStr += chars[Math.random() * maxPos | 0];
        return noceStr;
    }

    //将对象按照asscii序列化为字符串
    public static raw(args: any) {
        var keys = Object.keys(args);
        keys = keys.sort()
        var newArgs: any = {};
        keys.forEach(function (key) {
            newArgs[key] = args[key];
        });
        var string = "";
        for (var k in newArgs) {
            string += "&" + k + "=" + newArgs[k];
        }
        string = string.substr(1);
        return string;
    };

 

五、填坑问题

1. {"errMsg":"config:fail,Error:系统错误,错误码:40048,invalid url domain"}

    解决:公众号设置:功能设置,JS接口安全域名(前端调用JSSDK,调用微信开放JS接口时使用)

2. 获取用户授权时,报错页面:redirect_uri参数错误

    解决:公众号设置:功能设置,网页授权域名(用户授权,获取openID前,需要获取code,整个过程中需要一个回调页面,此页面所在域名)。

3. {"errMsg":"config:fail,Error:系统错误,错误码:63002,invalid signature"}

    解决:商户号,开发配置:JSAPI支付,添加支付授权目录。此配置是前端支付页面URL路径。

4. {errorCode=72002, errorMsg=mchid is not bind appid}或者 "商户号与appid不匹配"

    解决:商户号, AppID账号管理:与公众号关联,即上面的公众号AppID绑定。申请关联后,要前往公众号:广告与服务--微信支付,商户号管理,同意关联。这样,公众号与商户号才能绑定。

5. 支付验证签名失败

    这里造成的原因很多:【官方详细参考:https://pay.weixin.qq.com/wiki/doc/apiv3/apis/chapter3_1_1.shtml】

    5.1 统一下单采用jsapi v3,所以wx.chooseWXPay中的signType要用RSA。官方参考链接:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#58

    5.2 wx.chooseWXPay中paySign签名生成要用SHA256withRSA。官方参考链接:https://pay.weixin.qq.com/wiki/doc/apiv3/apis/chapter3_1_4.shtml

    5.3 paySign中的签名串要完整,尤其是【prepay_id=】不能丢:`${appID} ${timestamp} ${nonceStr} prepay_id=${prepayIDRes.prepay_id} `;

    5.4 验证签名是否正确的工具(很有用!很有用!):链接:https://pan.baidu.com/s/1ixOAnYyZVW13dFr0jWVpvw    提取码:wujv

    5.5 如果用旧版v2的JSAPI,那签名方式signType就与v3版不同,主要是MD5的方式,注意要与统一下单的签名方式保持一致:

wx.chooseWXPay({
  timestamp: 0, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
  nonceStr: "", // 支付签名随机串,不长于 32 位
  package: "", // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=***)
  signType: "", // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
  paySign: "", // 支付签名
  success: function (res) {
    // 支付成功后的回调函数
  }
});

 

六、结束语

简单的微信JSAPI v3版本的教程基本完工,至于后期的退款等功能,wxpay-v3插件都已封装,直接调用即可。

整体来说,初次研究微信支付时,下手很乱,因为文档写的就很乱,新版和旧版在官网上并未很好的分割。

最终还是看这个:(按照文档的顺序,一层一层的扒皮)

1. 先看统一下单:https://pay.weixin.qq.com/wiki/doc/apiv3/apis/chapter3_1_1.shtml,里面有未知的参数openid

2. 然后看如何获取openid:https://pay.weixin.qq.com/wiki/doc/apiv3/terms_definition/chapter1_1_3.shtml#part-3

3. 统一下单获取perpay_id后,再看JSAPI调起支付:https://pay.weixin.qq.com/wiki/doc/apiv3/apis/chapter3_1_4.shtml

4. 调起支付使用JSSDK的方式,首先要初始配置JSSDK:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1  步骤1-5,保证wx.config是配置成功的

5. wx.config中的签名,要看附录1,JS-SDK使用权限签名算法:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62

6. JSSDK所有接口,要看附录2,https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#63,目前支付用chooseWXPay

7. 配置JSSDK完成后,要调用支付wx.chooseWXPay要看: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#58

8. wx.chooseWXPay里面有个paySign签名,如何生成签名,就回到JSAPI调起支付的页面下方,有【JSAPI调起支付的参数需要按照签名规则进行签名计算】,即:https://pay.weixin.qq.com/wiki/doc/apiv3/apis/chapter3_1_4.shtml

 

基本上要看的JSAPI v3的文档就上面这些,v2的旧版我也看了一部分,没有试,就不发了。大家有任何问题,请留言。

(文章为老吕原创,转载请注明出处)

原文链接:https://www.cnblogs.com/laolv4519/archive/2021/10/27/15471866.html