IOS微信上Vue單頁面應用JSSDK簽名失敗解決方案

lixiang 發布于2019-08-23 13:12 / 1705人閱讀

摘要：路由守衛內觸發更新簽名獲取真實有效微信簽名此處需要自行處理在路由守衛內更新簽名，保證是使用當前頁面，是使用目標路由完整地址再加上域名使用簽名調用在使用的頁面通過取出緩存的微信簽名，然后進行簽名。

背景

手機型號：

型號：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

GPU云服務器云服務器單頁面應用微信上墻微信上做人臉識別微信jssdk

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99286.html

使用vue開發微信公眾號下SPA站點的填坑之旅

摘要：原文見我的博客，點擊進入使用開發微信公眾號下站點的填坑之旅本文為我創業過程中，開發項目的填坑之旅。作為一個技術宅男，我的項目是做一個微信公眾號，前后端全部自己搞定，不浪費國家一分錢。原文見我的博客，點擊進入使用vue開發微信公眾號下SPA站點的填坑之旅本文為我創業過程中，開發項目的填坑之旅。作為一個技術宅男，我的項目是做一個微信公眾號，前后端全部自己搞定，不浪費國家一分錢^_^。 ...

yeyan1996 2019-08-21 15:09 評論0 收藏0
vue+微信支付目錄+JSSDK簽名解決方案

摘要：主要是用，每當用戶第一次進來時，去獲取一次簽名驗證。注意只獲取一次，這樣簽名就解決了。 vue+微信支付目錄+JSSDK簽名解決方案遇坑如下注意：此方法僅為個人總結，并非唯一解決方案微信JSSDK簽名出錯微信支付調起支付缺少API參數微信支付目錄配置，只有5個配置，可能超過5個地方有配置，路由規劃微信授權回調處理我所使用的技術 vue路由模式 history 模...

Little_XM 2019-06-28 14:35 評論0 收藏0
微信 jssdk 簽名錯誤 invalid signature

摘要：你的頁面還是無法正常使用微信函數的。這樣似乎就解決了微信簽名失敗的問題。但是，我們又遇到了另外一種情況在微信小程序里用內嵌的網頁，在安卓下也報和錯誤。幾乎每一個開發用于微信公眾號頁面的工程師都遇到過微信jssdk報的各種錯誤，通常是permission denied，類似這樣： showImg(https://segmentfault.com/img/bVbm8YB?w=320&h=...

lei___ 2019-08-23 14:40 評論0 收藏0