VUE解决微信签名及SPA微信invalid signature问题(完美处理)

2024-10-09 06:18:57

前端小菜鸟，因为项目要对接微信的jssdk，对接就需要签名认证，但是无奈安卓和IOS各有各的坑，本篇文章只讨论签名，和一个分享的坑，希望大家有所收获，能够解决问题，如果解决不到，请麻烦在评论区留言，本文综合了所有的回答，才调试出来坑

需求：使用微信的功能

原因：

1. 项目基于vue，在微信上的web应用

2. 要使用上传功能(不同系统的兼容真的很多BUG，最后只能使用微信方案)，支付功能，定位....

3. 签名一直存在bug和问题，那么后面的功能都会唤不起(偶尔也可以)

签名

1. 流程详细请看文档，反正能力有限，没看出什么名堂，总结一句话，要使用先签名

2. 开启填坑之路,由于微信使用会区分IOS和安卓系列，不同系列产生不一样的问题

(公司项目第一版的时候就给微信大坑过，所以本次重构的时候，就格外注意这一点)

安利一个在微信下能检测内核的判断：window.__wxjs_is_wkwebview(是否为webview内核)，如果是的情况下就变成true

因为SPA应用下，会有一定的问题，路由采用的是history模式(不带#号)。因为在页面每次进入到路由之后才去获取签名授权，所以将方法公用写在路由的模块下

router.afterEach((to, from) => {    //   伸手党福利
 // window.__wxjs_is_wkwebview
  // true 时 为 IOS 设备
  // false时 为 安卓 设备
 if (window.__wxjs_is_wkwebview) { // IOS
  if (window.entryUrl == '' || window.entryUrl == undefined) {
   var url = `${FRONT_BASE}${to.fullPath}`
   window.entryUrl = url  // 将后面的参数去除
  }
  getWxAuth(to.fullPath,"ios")
 }else {    // 安卓
  setTimeout(function () {
   getWxAuth(to.fullPath,"android")
  }, 500);
 }
})

window.entryUrl这个是什么鬼？这个是自己定义的全局属性，就是为了获取IOS第一次进入页面的时候存储起来的，如果IOS的签名的路径不是第一次进入的页面，那么就一定会失败，所以这个路由第一次进入就要储存起来
为什么要写在router.afterEach，因为页面进入了再去做申请和签名，如果在beforeEach，会导致页面申请签名的时候还是上一个页面，但是到了新页面却没有注册签名，或者因为签名的路径不同，导致invalid signature
为什么安卓的时候要增加一个延时器，因为安卓会存在一些情况，就是即便签名成功，但是还是会唤不起功能，这个貌似是一个比较稳妥的解决办法，

看完路由模式了，就来进入逻辑部门，来看看如何处理

有同学疑惑这个encodeURIComponent是干嘛用的，其实具体很简单，就是因为我们在微信分享的时候，会自动给我们带上参数(记得告诉后端的伙伴要decodeURIComponent),切记只要带参数就一定要转码！

对于IOS系统会自动增加如下参数：

朋友圈 from=timeline&isappinstalled=0
微信群 from=groupmessage&isappinstalled=0
好友分享 from=singlemessage&isappinstalled=0

对于安卓系统会自动添加如下参数：

朋友圈 from=timeline
微信群 from=groupmessage
好友分享 from=singlemessage

然后就直接去请求签名，写法就不深究，getWeChat是封装的axios，只是为了统一管理才这么写，大家可以写成正常的请求axios('xxxx.com/get-wx',obj).then()这样的写法，一样的效果

到了这一步就基本上是请求签名成功，但是有同学疑惑，那么IOS每次分享的时候会不会是进去的第一个路由，我的回答是会的(需要稍加处理)

重点关注再与这个link，需要在每次分享的时候记录当前的路由，如果直接读location.href在IOS端的时候会是第一次进入的页面。安卓则没有问题，所以我统一采用我记录的这个参数，这个参数可以直接在方法传递过来，路由afterEach的to.fullpage，然后再加上自己的域名就OK了最后写几句话，希望大家都能顺便解决一下BUG，也希望能对大家有所帮助，如果遇到一些其他的问题，欢迎评论区留言，只要有时间就会及时跟大家交流探讨！也希望大家多多支持我们。

微信开发之使用java获取签名signature

一.前言微信接口调用验证最终需要用到的三个参数noncestr.timestamp.signature: 接下来将会给出获取这三个参数的详细代码本文的环境eclipse + maven 本文使用到的技术HttpClient.Json字符串转map.sha1加密二.需要用到的jar包 maven依赖的包有: 1.HttpClient包依赖 <dependency> <groupId>org.apache.httpcomponents</groupId> <ar
微信js sdk invalid signature签名错误问题的解决方法分析

本文实例讲述了微信js sdk invalid signature签名错误问题的解决方法.分享给大家供大家参考,具体如下: /**最近在做微信js sdk 接口调用说明*/ ***相信很多人都遇见像我这样的问题,再加上自己只能算是半个程序员,所以苦苦摸索了好久终于搞懂了. ****下面就把自己所遇见的各种问题和大家分享一下,都是自己亲手实验过的********/ 一.问题说明如果出现 invalid signature,首先可以确定的是你的签名算法有问题. 建议:首先查看微信官方网站给出的解决
微信封装的调用微信签名包的类库

废话不多说了,直接给大家贴代码了,具体代码如下所示: <?php namespace Home\Model; use Think\Model; class WechatModel extends Model { private $_token = ''; //令牌 private $appid; private $appsecret; public function __construct() { $this->appid = C('APPID');//公众号的appid $this->
详解Vue开发微信H5微信分享签名失败问题解决方案

关于Vue中路由使用history模式,开发微信H5页面分享时在安卓上签名有效成功,但是在IOS设备上一直报错签名失效问题问题描述:在Vue开发过程中,路由使用History模式下,在使用微信分享时,在微信开发者工具上一切正常.在安卓上一切正常. 但是!!!在IOS上反复报签名错误. 以下是真机测试截图,划掉黑线的是我个人IOS设备分享出来一直是服务号,接着下面分享出来自定义内容是安卓分享正常,话不多说上图!!!! 我的代码: 需求描述:需要从首页进入活动详情页,然后在详情页分享详情页面内容.
C# 微信支付 wx.chooseWXPay 签名错误的解决方法

本着安全第一慎用第三方代码的原则,决定自己根据微信支付SDK写支付过程,从统一下单开始一切还算顺利,到最后JS发起支付调用时抛出"支付签名错误",下面将给出正确签名方法这里整理出的签名函数实际是通用的,在统一下单时或支付返回验证时都可以调用重点是非空参数才参与签名,参数名称区分大小写,排序要按照ASC顺序排列,key(密匙)永远放在最后一位以下是原函数说明: wx.chooseWXPay({ timestamp: 0, // 支付签名时间戳,注意微信jssdk中的所有使用time
基于微信签名signature获取(实例讲解)

微信分享的签名算法微信也写有,主要是调用接口需要使用服务器(微信官方文档是这么说的,试了下前端居然特么也可以),不过微信的access_token和jsapi_ticket是有使用次数限制的,所以还是用服务器来获取,得到以后存下来,下次使用判断超时以后再重新获取,这样就够用了,要不然就会出现接口调用次数超出限制这种尴尬的事情了. 如果需要使用自定义分享文案的时候,服务号或者订阅号一定要是已认证的(我的是个人类型的订阅号,不能认证,所以不能使用分享功能) 我这边用的是node做的后台,所以代码用的
微信 jssdk 签名错误invalid signature的解决方法

几乎每一个开发用于微信公众号页面的工程师都遇到过微信jssdk报的各种错误,通常是permission denied,类似这样: 通常他们会建议你把debug选项开开,比如这样: wechat.config({ debug: true, appId: appId, timestamp: timestamp, nonceStr: nonceStr, signature: signature, jsApiList: ['scanQRCode'], }); 结果你又遇到了invalid signatu
.NET微信小程序用户数据的签名验证和解密代码

微信小程序时下大热,抱着学习的心态了解了一下,目前没有搜到完整的.NET用户数据签名验证和解密代码,于是就写了一点. 简单使用方法: 1.客户端调用wx.getUserInfo方法,服务端创建WeChatLoginInfo类的实例接收客户端发来的数据: 2.服务端新建WeChatAppDecrypt类的实例,初始化此类时需传入appId与AppSecret用于验证: 3.调用WeChatAppDecrypt类中的Decrypt方法,传入步骤1中获取的WechatLoginInfo实例: 4.得到
Android微信支付获取二次签名Sign的方法

本文实例为大家分享了Android微信支付获取二次签名Sign的方法,供大家参考,具体内容如下 /** * 获取sign签名 * * @return */ private String genPayReq() { // 获取参数的值 PayReq request = new PayReq(); request.appId = ConstantsMember.APP_ID; request.partnerId = ConstantsMember.MCHID; request.prepayId =
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案

背景手机型号: 型号:iphone 7 / iphone xs max 版本:ios 10.3.1 / ios 12.1 微信版本:WeChat 6.7.3 问题还原: Vue应用(vue-router)上使用history模式,在某个页面内调用微信JSSDK相关API,如扫码.分享等,使用当前页面URL总会出现签名错误(invalid signature),导致API调用失败. 问题根源 Vue-Router进行路由切换的时候,总是会操作浏览器的历史记录,从而响应页面URL变化. 在JSSD

VUE解决微信签名及SPA微信invalid signature问题(完美处理)

相关推荐

随机推荐