uniapp微信小程序支付前端生成签名,并调起微信支付

作者 : admin 本文共3595个字,预计阅读时间需要9分钟 发布时间: 2024-01-17 共2人阅读

uniapp微信小程序支付前端生成签名,并调起微信支付

    • 一、安装npm包、引入npm包
    • 二、准备签名的数据
      • ①、登录小程序开发者平台获取appId,如图所示
      • ②、前端获取10位时间戳
      • ③、前端获取随机字符串
      • ④、prepay_id
    • 三、签名封装
      • ①、私钥如果找不到,可以在商户号平台获取
    • 四、全部代码

一、安装npm包、引入npm包

npm install jsrsasign

页面引入依赖

import jsrsasign from 'jsrsasign'

签名方式使用的是SHA256withRSA

二、准备签名的数据

let str = {
    appId: 'xxxxxxxxxxx',   //appId后端返回,可在小程序开发平台获取
    timeStamp: 'xxxxxxxxxxx', //10时间戳
    nonceStr: 'xxxxxxxxxxx',  //随机字符串
    package: 'prepay_id=' + prepay_id, //通过JSAPI下单接口获取到发起支付的必要参数prepay_id
 }

①、登录小程序开发者平台获取appId,如图所示

uniapp微信小程序支付前端生成签名,并调起微信支付插图

②、前端获取10位时间戳

const time = Math.round(new Date().getTime()/1000).toString();
console.log(time);

③、前端获取随机字符串

getRandomString(length) {
      var result = ''
      var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
      var charactersLength = characters.length
      for (var i = 0; i < length; i++) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength))
      }
      return result
},

④、prepay_id

调用后端发起支付接口返回,后端返回

三、签名封装

singH5(data) {
      let encipher = new jsrsasign.RSAKey()
      // 私钥 在微信端申请好后会有,一般由后端提供
      const key = `-----BEGIN PRIVATE KEY-----
xxxxxxxxxxxxxxxxxxxxxx
-----END PRIVATE KEY-----`
      // 把私钥转成16进制并设置秘钥
      encipher = jsrsasign.KEYUTIL.getKey(key)
      // 设置SHA256withRSA方式加密
      const sig = new jsrsasign.KJUR.crypto.Signature({
        alg: 'SHA256withRSA',
      })
      // 初始化
      sig.init(encipher)
      // 需要加密的字段,这里注意下一定要按每一个字段一行,切末位加上 

      const str = `${data.appId}
` + 
      			  `${data.timeStamp}
` + 
      			  `${data.nonceStr}
` + 
      			  `${data.package}
`
      const paySign = sig.updateString(str)
      // 加密后,转成base64
      return jsrsasign.hextob64(sig.sign())
    },

①、私钥如果找不到,可以在商户号平台获取

四、全部代码

import jsrsasign from 'jsrsasign'
//SHA256签名
singH5(data) {
let encipher = new jsrsasign.RSAKey()
// 私钥 在微信端申请好后会有,一般由后端提供
// 在商户号平台可以找到
const key = `-----BEGIN PRIVATE KEY-----
xxxxxxxxxxxxxxxxxxxxxx
-----END PRIVATE KEY-----`
// 把私钥转成16进制并设置秘钥
encipher = jsrsasign.KEYUTIL.getKey(key)
// 设置SHA256withRSA方式加密
const sig = new jsrsasign.KJUR.crypto.Signature({
alg: 'SHA256withRSA',
})
// 初始化
sig.init(encipher)
// 需要加密的字段,这里注意下一定要按每一个字段一行,切末位加上 

const str = `${data.appId}
` + 
`${data.timeStamp}
` + 
`${data.nonceStr}
` + 
`${data.package}
`
const paySign = sig.updateString(str)
// 加密后,转成base64
return jsrsasign.hextob64(sig.sign())
},
//获取随机字符串,长度可自定义
getRandomString(length) {
var result = ''
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
var charactersLength = characters.length
for (var i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() * charactersLength))
}
return result
},
// 微信支付
async setRecharge(price01, price02) {
let _this = this
let obj = {
//个人数据
//发起请求
}
let res = await setRechargeAPI(obj)
if (res.code == 200) {
let prepay_id = res.data.prepay_id
//---------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------
//从这里开始,上面为发起订单支付获取  prepay_id
//准备数据
let str = {
appId: 'xxxxxxxxx',  //你自己的appId
timeStamp: Math.round(new Date().getTime() / 1000).toString(),
nonceStr: this.getRandomString(31),
package: 'prepay_id=' + prepay_id,
}
//获取签名
let sign = this.singH5(str)
uni.requestPayment({
provider: 'wxpay', //支付类型-固定值 这里是微信支付
appId: str.appId,  //appId
timeStamp: str.timeStamp, // 时间戳(单位:秒)要和上面签名的一致
nonceStr: str.nonceStr, // 随机字符串
package: str.package, // 固定值
signType: 'RSA', //固定值
paySign: sign, //签名
success: function (res) {
console.log('支付成功')
uni.showToast({
icon: 'success',
title: '支付成功',
})
//此处为自己的刷新数据方法
//_this.getUserInfo()
},
fail: function (err) {
console.log('支付失败', err)
uni.showToast({
icon: 'none',
title: '支付失败',
})
},
})
//结束
//---------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------
}
},
本站无任何商业行为
个人在线分享 » uniapp微信小程序支付前端生成签名,并调起微信支付
E-->