微信 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 ...
- paypal中授权返回_微信开放平台授权登录流程详解
最近在工作中用到了一些微信开放平台授权第三方登录,来获取用户基本信息的操作.看了一下微信给出的官方文档,写的已经很详细了,这里按照自己的步骤进行了一下总结,并附带了一些示例,方便大家理解. 微信公众号 ...
- 微信开放平台授权登录流程详解
原创 Dr Hydra 码农参上 2020-09-13 11:00 收录于合集 #微信开发技术3个 #java实战34个 最近在工作中用到了一些微信开放平台授权第三方登录,来获取用户基本信息的操作.看 ...
- php解析微信接口,php微信公众平台交互与接口详解
这篇文章主要为大家详细介绍了php微信公众平台开发,交互与接口,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文分为三大部分为大家进行介绍,具体内容如下 1.微信用户.微信服务器和后台服务器的交 ...
- 猛料!盘古团队+涅槃团队大牛详解 iOS 史上最大漏洞
昨天,苹果猝不及防地发布了 iOS 9.3.5,在升级说明中,有且只有一条:提供了重要的安全性更新,推荐所有用户安装. 没想到,这次低调的升级却牵出了 iOS 历史上最大的漏洞. 先科普一下,iOS ...
- 微信Android热更新Tinker使用详解(by 星空武哥)
转载请标注原创地址:http://blog.csdn.net/lsyz0021/article/details/54694260 Tinker是什么 Tinker是微信官方的Android热补丁解决方 ...
- Android设置中“强行停止”详解
Android设置中"强行停止"详解 最近工作上遇到了广播接受不到的问题,查看了<Android 开发艺术探索>一书中关于广播的发送和接受的章节(P356-P362). ...
- Android学习笔记——Android 签名机制详解
Android 签名机制详解 近期由于工作需要在学习 Android 的签名机制,因为没有现成资料,只能通过开发者文档和阅读博客的方式对 Android 签名机制进行大致了解.过程中查阅到的资料相对零 ...
- 【Android签名机制详解】二:Android V1、V2、V3、V4签名方案
前言 书接上回[Android签名机制详解]一:密码学入门,在了解了消息摘要.非对称加密.数字签名.数字证书的基本概念后,我们趁热打铁.直奔主题,讲解签名在Android中的实际应用. 基础知识 An ...
最新文章
- oracle 批处理 执行结果,在windows下怎么在批处理文件里面执行sqlplus并得到结果?...
- 我在兰亭这三年之第一个项目
- CVPR 2022 | 室外多模态3D目标检测(DeepFusion)
- react native与webview通信跳转页面报错:Cannot read property 'setNativeProps' of undefiend
- [经典算法] 河内塔
- 路灯智能控制系统_在plc的智能路灯控制系统设计,你必须清楚
- 【Oracle的存储过程之面向对象之特性】
- ThreadLocal 从源码角度简单分析
- php+mysql_msqli简单实例
- Ubuntu打开swf文件
- 29 - Excel 图表与数据分析
- VS2003版本Jsoncpp的配置和使用
- 复旦计算机考研规划,2021年复旦大学软件工程专业考研经验全指导
- 微信会员卡实现门店信息化会员管理
- 指南:情人节表白h5源码
- 在AD中添加logo
- 信息论与编码-python实现三种编码(香农编码,费诺编码,赫夫曼编码)
- Car-eye 智能车辆管理云平台以报警为中心展开业务
- Emily Dickinson 《Not In Vain》
- 古墓里出土的那些奇怪文物,能否证明穿越的存在?
热门文章
- CVE和全球安全漏洞库(NVD, CNNVD, CNVD) 在软件安全检测和验收中的最佳分析工具
- 探寻虹膜识别背后的身份密码 | 硬创公开课
- 3d游戏场景建模设计师需要学哪些软件?
- Go语言Gin框架源码分析
- 通过淘宝商品ID和sku ID 获取到淘宝商品SKU信息接口,可获取sku价格,sku销量,sku图片及sku库存,SKU重量,SKU尺寸体积接口等参数
- hyperledger cello
- 基于对抗训练的轨迹预测半监督算法(美国西北大学和加州尔湾分校)
- Linux hook系统调用open/read/write
- [论文笔记]基于 CNN+双向LSTM 实现服饰搭配的生成
- 校园的创客实验室是做什么的?