纯血鸿蒙系统和IOS调用微信的invalid signature

问题描述

微信公众号上挂载的H5程序,调用wx.getLocation出现的错误–invalid signature

程序之前调用这个接口一直都没问题(IOS和安卓都没问题),但是上周五客户的公司有员工换了华为的最新的某款手机,系统为纯血鸿蒙在调用定位接口的时候就出现了invalid signature

检查问题

客户的公众号就绑定了服务器域名,没办法只能在尽量不影响客户使用的情况下去测试。

网上搜了一下关于鸿蒙系统微信的这个问题,相关内容还是比较少的。

先按照官方文档出的问题排查流程检查一遍吧,按照步骤检查下来没有问题(其他系统都没问题,文档中列出的问题之前都是解决了的)

没招了,但是想到了之前解决IOS的时候就是因为通过<font style="color:#080808;background-color:#ffffff;">window.location.href</font>获取到的url和IOS微信系统实际感知的URL不同,IOS中用于获取签名的URL应该是首次进入程序访问的页面的URL。想着是不是纯血鸿蒙也是这个问题。

马上进行验证

问题解决

1) 缓存首次进入的URL,我是在App.vue中缓存的

localStorage.setItem("homeUrl",href)

2) 判断系统类型

  1. 先打印一下navigator.userAgent中鸿蒙系统的标识是什么

  1. 根据这个标识去判断类型,使用缓存的首页url还是当前页面的url
export async function getConfigParams() {
  
 let localUrl = encodeURI(window.location.href.split('#')[0])

  //获取当前设备类型
  const ua = navigator.userAgent.toLowerCase()
  const isIOS = /iphone|ipad|ipod/gi.test(ua)
  const isHarmony = /openharmony/gi.test(ua)
  if (isIOS || isHarmony) {
    localUrl = encodeURI(localStorage.getItem('homeUrl'))
  }

  const res = await request({
    url: '/wx/config',
    method: 'get',
    params: {
      url: localUrl,
      
    }
  })
  return res.result
}

3) 进入页面就调用wx.config,我之前写的是调用getLoaction之前才去调用config。

查询这个问题的时候看到很多博客的做法都是进入程序后就先把所有要用的接口的权限都初始化了。所以改为了在mounted中执行config

export async function initConfig() {
  // 登录之后获取获取签名权限
  const configParams = await getConfigParams() // 请求后端获取签名串、随机串等参数
    wx.config({
      debug: false,
      ...configParams,
      jsApiList: ['getLocation'],
      success: () => {
        console.log('wx.config配置完成')
      },
      fail: (err) => {
        Toast(`wx.config配置失败:${JSON.stringify(err)}`)
        console.log('wx.config配置失败:', err)
      }
    })
}

问题最后就解决了!!!!

问题解决的有点笨,属于是试出来的

### 解决 `realAuthUrl` 配置无效签名错误 #### 问题原因分析 在 Vue.js 单页应用(SPA)中使用微信 JS-SDK 进行页面分享时,由于路由切换仅修改了浏览器历史记录而未实际重新加载页面,在 iOS 设备上首次访问的 URL 被视为真实的认证地址(realAuthUrl),而不是当前显示的内容URL。这种差异使得后端生成的 ticket 前端 SDK 请求中的 URL 参数不匹配,从而引发签名验证失败的问题[^4]。 #### 解决策略 为了确保每次调用 `wx.config` 接口都能获得正确的 URL 并成功通过安全校验,建议采取如下措施: 1. **动态更新 URL** 当用户导航至新页面时立即同步调整用于请求票据的服务端接口所携带的实际链接参数。可以通过监听路由变化事件来实现这一点。 2. **区分不同平台处理逻辑** 对于 Android iOS 应分别设置不同的行为模式。对于前者可以直接采用最新的完整 URL;而对于后者,则需考虑缓存机制或强制刷新策略以覆盖初始进入站点那一刻保存下来的旧址信息。 3. **利用服务端中间件辅助修正** 如果可能的话,可以在服务器一侧部署额外的功能模块负责拦截并重定向那些带有过期/错误路径的数据包,进而保证客户端接收到最新有效的资源定位符。 具体实施方法如下所示: ```javascript // JavaScript 实现方案 import { ref, onMounted } from "vue"; import router from "./router"; const entryUrl = ref(""); function updateEntryUrl() { const currentPath = encodeURIComponent(location.href.split("#")[0]); // 判断是否为iOS设备 if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) { // 存储当前url供后续比较 sessionStorage.setItem('entryUrl', currentPath); // 若存在已存储过的入口url则优先选用之 entryUrl.value = sessionStorage.getItem('entryUrl') || currentPath; } else { entryUrl.value = currentPath; } } onMounted(() => { // 初始化时设定一次 updateEntryUrl(); // 监听路由变动以便及时响应 router.afterEach((to, from) => { setTimeout(updateEntryUrl, 0); // 延迟执行确保DOM已完成渲染 }); }); ``` 此外还应确认后台API返回给前端用来初始化 WeChat JSSDK 的配置项里包含有合法的时间戳(timestamp)、随机字符串(nonceStr)以及加密后的signature字段,并且这些值均基于实时计算得出而非静态固定不变[^1]。 最后提醒开发者务必前往微信公众平台提供的专门工具处测试接入凭证(access_token)的有效性准确性,以此排除其他潜在因素干扰正常业务流程[^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值