微信 android 平台 应用签名错误,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变化。
在JSSDK文档页面有这么一句话:
同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复
但根据多次测试情况来看,情况恰好相反,在Android下直接使用 window.location.href 得出的URL进行签名是完全没问题(可能已升级至Android6.2以上版本),在IOS上就不行了。
这是因为在IOS上,无论路由切换到哪个页面,实际真正有效的的签名URL是【第一次进入应用时的URL】。
比如进入应用首页是: https://m.app.com,需要使用JSSDK的页面A是:https://m.app.com/product1/123,无论从首页进入到A页面之前,中间跳转过多少次路由,最终签名有效的URL还是首页URL。
解决方案
方案一
直接粗暴处理方式:
在进入需要使用JSSDK页面(B)的前一个页面(A),即 A > B,直接使用 window.location.href 或 window.open 打开B页面,此时因为B页面是直接刷新方式进入,所以当前B页面URL无论IOS或Android都是可以直接拿来签名的。
这种方式处理缺点也很明显,如页面刷新抖动太厉害不够平滑过渡,再比如B页面需要从vuex中取出缓存信息,如果这些缓存信息不是通过vuex保存在localstorage的话,取出来的肯定都是空的。
方案二
思路:既然IOS仅可使用第一次进入应用的URL来签名,那么在vuex上缓存一个微信签名URL,IOS保存第一次进入应用的URL,Android则缓存为每个页面的URL。签名时,直接从缓存拿出签名URL来处理。
// 全局判断是否IOS方法
function isIos(){
const u = navigator.userAgent;
return u.indexOf("iPhone") > -1 || u.indexOf("Mac OS") > -1;
}
1. 定义vuex缓存
...
{
state: {
wechatSignUrl: ""
},
mutations: {
setWechatSignUrl(state, wxSignUrl) {
// 关键点
// IOS仅记录第一次进入页面时的URL
// IOS微信切换路由实际URL不变,只能使用第一进入页面的URL进行签名
if (isIos() && state.wxSignUrl !== '') {
return;
}
state.wxSignUrl = wxSignUrl;
}
},
getters: {
getWechatSignUrl: (state) => state.wxSignUrl
}
}
...
关键点在于设置更新微信签名URL判断的地方:首次进入应用页面的时候肯定会触发更新,若是IOS且签名URL已经设置过了,那么就不需要更新设置了,只要不退出或刷新应用,缓存永远都会是首次进入页面URL。
2. 路由守卫内触发更新签名URL
import store form "@/stores"
// 获取真实有效微信签名URL
function getWechatSignUrl(to){
if(isIos()) {
return window.location.href;
} else {
// 此处$appHost需要自行处理
return $appHost + to.fullPath
}
}
...
$router.beforeEach((to, from, next) => {
store.commit("setWechatSignUrl", getWechatSignUrl(to));
})
...
在路由守卫内更新签名URL,保证IOS是使用当前页面URL,Android是使用目标路由完整地址再加上域名
3. 使用签名URL调用JSSDK API
在使用JSSDK API的页面通过vuex取出缓存的微信签名URL,然后进行签名。
比如:
import store form "@/stores"
...
{
methods: {
initWechatShareConfig() {
const that = this;
const wxSignUrl = store.getters['getWechatSignUrl'];
const wxShareConfigs = {
// 微信分享配置
}
// 初始化微信分享
$wechat.share(wxSignUrl, wxShareConfigs);
}
}
}
...
$wechat.share 是根据JSSDK文档二次封装的分享方法,内部是根据wxSignUrl先进行签名,然后再调用分享API
微信 android 平台 应用签名错误,IOS微信上Vue单页面应用JSSDK签名失败解决方案相关推荐
- 微信 android 平台 应用签名错误,详解IOS微信上Vue单页面应用JSSDK签名失败解决方案...
背景 手机型号: 型号:iphone 7 / iphone xs max 版本:ios 10.3.1 / ios 12.1 微信版本:WeChat 6.7.3 问题还原: Vue应用(vue-rout ...
- 微信开放平台开发常见错误(长期更新)
微信开放平台开发常见错误 在开发微信第三方平台的时候,会常见一下错误码 42001: 获取access token超时,一般都是第三方平台的access Token失效导致的 47001: data ...
- 微信开放平台开发(3) 移动应用微信登录
原文:http://www.cnblogs.com/txw1958/p/weixin-applogin.html 在这篇微信公众平台开发教程中,我们将介绍如何使用微信开放平台接口实现移动应用微信登录的 ...
- 视频教程-微信公众平台开发实战PHP版-微信开发
微信公众平台开发实战PHP版 互联商通创始人/架构师, 在IT领域摸爬滚打20年的全栈老程序员(架构师.培训讲师).熟悉iOS.Android及LNMP的架构下快速开发互联网相关项目.精通微信和支付宝 ...
- vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 “invalid signature“错误解决方案
vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 "invalid signature"错误解决方案 参考文章: (1)vue 单页面(SPA) hist ...
- 微信公众平台开发(二) 微信公众平台示例代码分析
http://www.cnblogs.com/mchina/archive/2013/06/07/3120592.html 微信公众平台开发(二) 微信公众平台示例代码分析 一.摘要 微信公众平台提供 ...
- 微信分享的链接,手机打开白屏,单页面应用(Hash模式下),实现微信分享
前言:现在将相关的产品分享至朋友圈,进行宣传,成为一种很常见的方式.本文,主要想分享一下,微信分享所遇到的坑,微信分享的链接,手机打开白屏,以及产生的原因. 前端微信分享的基本步骤: 一.绑定域名 先 ...
- 记录微信获取平台证书支付错误 错误的签名,验签失败
错误的签名,验签失败 前言 解决方案 前言 我这里使用的是 微信支付 v3 sdk,sdk会帮我拼接签名,所以我初步判断是公司给我证书序列号错误 // 加载平台证书(mchId:商户号,mchSeri ...
- 微信小程序使用云开发实现微信支付功能 报错Error: 签名错误,史上最全解决办法,不服留言骂我
报错背景 微信小程序使用云开发实现微信支付功能,但是报错了 报错信息 报错原因 小程序想要使用微信支付,必须满足下面几个条件的 1,必须是非个人小程序(个人小程序用不了支付) 企业小程序需要认证! 2 ...
最新文章
- 面试官:不使用synchronized和lock,如何实现一个线程安全的单例?
- ML之二分类预测:以岩石水雷数据集(RockMine)为例从0到1深入理解科学预测之分类问题的思路框架(特征工程详细步骤(特征分析与特征处理)+分类模型设计)
- 3/14课程 第三章 结构化的项目前期和面向对象的项目前期实例
- 抽象类必须要有抽象方法吗?
- Android 四大组件 —— 活动(活动的隐式跳转)
- 常用的stm32库函数
- ls命令具有一个-r选项,可以递归的列出子目录中的内容。请编写一个具有同样功能的程序。...
- 移动端报表JS开发演示样例
- redis-cli 命令总结
- android 声卡音频策略小记
- socket长连接和短连接(一)
- 澳洲那个大学计算机专业好,澳洲哪个大学计算机专业比较好
- Optimizing the Transition Waste in Coded Elastic Computing(实现0浪费弹性编码计算)
- arcgis api for javascript 3.33 清空、删除图层
- GUI学习笔记——04更改背景板颜色,鼠标进入事件
- [SSL_CHX][2021-08-20]幸运数字们
- 如何定制allure报告的logo
- 【微信H5】分享出去是链接,不是卡片的原因及解决方案
- 利用C#写一个模拟的摇号系统
- OpenOffice源文件中的文件扩展
热门文章
- 【Mysql-字符集】软件开发没看上去那么简单,从utf8mb4_0900_ai_ci说起
- springBoot上传文件大小受限制的解决方案
- ssh 免密登录失败
- 毕业年薪20万起步!24届江南大学自动化考研最新三年院校分析
- 南邮的计算机学院地址,南京邮电大学校区有几个 地址是什么
- iPhone11基带增强!天线重新设计,室内信号都能轻松满格
- 清华/浙大/交大/蚂蚁/阿里讲师「隐私计算系列课程」
- python未知数的矩阵运算_python – Numpy矩阵运算
- 腐蚀rust研究台抽奖_KUYH | Rust腐蚀7月5日更新内容
- 【板栗糖GIS】Edge浏览器的收藏夹如何多列显示?