vue支付宝异步签名不对问题

最新推荐文章于 2025-02-13 14:19:35 发布

南方菜好吃

最新推荐文章于 2025-02-13 14:19:35 发布

阅读量281

点赞数

本文链接：https://blog.youkuaiyun.com/web932/article/details/90770453

版权

在使用Vue进行支付宝支付时，遇到了支付完成后参数返回和签名验证的问题。关键步骤包括在`zhifubao.vue`中提交表单，然后在`backPay.vue`解析URL获取参数，使用`decodeURIComponent`解决乱码。签名对比失败源于参数顺序敏感，必须与后台保持一致。通过将获取的参数以特定顺序构造对象并发送axios请求来完成验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue支付宝支付遇到的坑

  遇到其他参数都对的情况下异步调用支付宝错误
   
  调用支付宝分两种方式：异步和同步 （自己去百度）
  我们要处理异步，就是后台给的接口，来检查是否支付成功。
   
  1.接受后台给你的一串支付宝html代码 
  2.展示到vue页面上
  3.要做好一个vue页面来让后台指定到你的页面  **（*后台是 .Net*）**然后在调异步接口，把参数返回后台
  代码：
    axios.post('url').then(res=>{
     this.$router.resolve({path:'/zhifubao',query:{htmls:res.data.html}})    res.data.html 是支付宝的一串html代码，传到zhifubao这个页面参数
     //打开新页面
       window.open(routerData.href,'_ blank')
        const div = document.createElement('div');
         div.innerHTML = res.data.html;
         document.body.appendChild(div)
        document.forms[0].submit();
        }

zhifubao.vue 页面

mounted(){
let form = this. $r o u t e . q u e r y . h t m l s t h i s . h t m l = f o r m; t h i s .$ nextTick(()=> {
document.forms[0].submit()
})
}
}

这样支付宝二维码就出来了

最关键的一步，扫码完了要把参数返回到后台，就需要跳到一个页面才能调接口，对吧。
这时后台会帮你指定到你写的一个新页面，比如 backPay.vue页面
parseUrl(){
var url=location.href; //这时获取扫完支付码调到你的页面传过来的参数
var i=url.indexOf(’?’);
if(i==-1)return;
var querystr=url.substr(i+1);
var arr1=querystr.split(’&’);
var arr2=new Object();
for (i in arr1){
var ta=arr1[i].split(’=’);
arr2[ta[0]]= decodeURIComponent(ta[1]);
}
return arr2;
},
decodeURIComponent这个方法可以解决获取的参数乱码问题
调用方法
methods: {
parseUrl(){
var url=location.href;
var i=url.indexOf(’?’);
if(i==-1)return;
var querystr=url.substr(i+1);
var arr1=querystr.split(’&’);
var arr2=new Object();
for (i in arr1){
var ta=arr1[i].split(’=’);
arr2[ta[0]]= decodeURIComponent(ta[1]);
}
return arr2;
},
VueAlipay(data){
记住了参数顺利不能变，也不能少，记住了记住了，如果后台是用字典的方式的话，后台的获取参数也不能乱，这就是坑，支付宝的坑，顺序乱的话签名对比就不对
let list = {
body: data.body,
buyer_email: data.buyer_email,
buyer_id: data.buyer_id,
exterface: data.exterface,
extra_common_param: data.extra_common_param,
is_success:data.is_success,
notify_id: data.notify_id,
notify_time: data.notify_time,
notify_type: data.notify_type,
out_trade_no: data.out_trade_no,
payment_type: data.payment_type,
seller_email: data.seller_email,
seller_id: data.seller_id,
subject: data.subject,
total_fee: data.total_fee,
trade_no:data.trade_no,
trade_status: data.trade_status,
sign:data.sign,
sign_type: data.sign_type,
}
axios.post(list)
.then((result) => {

    }).catch((err) => {
      
    });
  },
  Alipay(){
    Alipayreturnurl(da)
     .then(res=>{
       console.log(res)
    }).catch(error=>{

    })
    
  }
    
},
mounted(){
   var v = this.parseUrl();//解析所有参数
   this.VueAlipay(v)
},
这样异步就可以啦