微信公衆號wx.config權限通不過config:invalid signature,顯示無效簽名

一、vue引入weixin-js-sdk(yarn或npm)

代碼的寫法都是一樣的(網上隨便找一個,例如https://www.jb51.net/article/159960.htm)
jsApiList裏必須要寫上自己要調用的接口名,例如

wx.config({
    debug: true, // 開啓調試模式
    appId: '.......',
    timestamp: response.data.timestamp, // 必填,生成簽名的時間戳
    nonceStr: response.data.nonceStr, // 必填,生成簽名的隨機串
    signature: response.data.signature, // 必填,簽名
    jsApiList: ['scanQRCode']
    // jsApiList: ['getLocation', 'chooseImage', 'hideOptionMenu', 'checkJsApi', 'chooseWXPay', 'closeWindow', 'scanQRCode']
    // 必填,需要使用的JS接口列表
  })
  
1、有說url參數出的問題,事實上location.href.split('#')[0]是不會騙人的
    要在公衆號調試,參數會多code和state,state是空值的
2、還有說後端簽名錯誤,要是後端代碼寫錯了那都太好排查了,可以在這裏驗證
    http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
    結果我們後端的簽名的算法驗證沒有問題    
3、最後懷疑是服務器域名配置的問題,運維查了一下是https的證書錯了
   想必這個問題大家一般不會遇到,證書未及時替換掉

二、大家可以嘗試下官方的案例http://demo.open.weixin.qq.co...,把這個地址的代碼扒下來嘗試一下

出現config:invalid signature分析:
1、jq和sdk的引入最好放到頁面加載比較早的位置,如head標籤裏
2、ajax異步改爲同步就可以了(async: false)

$.ajax({
    type: "get",
    url: basePath + config,  //後端接口
    async: false,
    dataType: "json",
    data: {
        page: location.href.split('#')[0]
    },
    success: function (datas) {
        var datas=JSON.parse(datas);
        if (datas.status == 100) {
            var req = datas.data;
            var signature = req.signature;
            var timestamp = req.timestamp;
            var nonceStr = req.nonceStr;
              wx.config({
                  debug: true,
                  appId: 'wxa9f902f87a88c0df',
                  timestamp: timestamp,
                  nonceStr: nonceStr,
                  signature: signature,
                  jsApiList: [
                    'checkJsApi',
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage',
                    'onMenuShareQQ',
                    'onMenuShareWeibo',
                    'onMenuShareQZone',
                    'hideMenuItems',
                    'showMenuItems',
                    'hideAllNonBaseMenuItem',
                    'showAllNonBaseMenuItem',
                    'translateVoice',
                    'startRecord',
                    'stopRecord',
                    'onVoiceRecordEnd',
                    'playVoice',
                    'onVoicePlayEnd',
                    'pauseVoice',
                    'stopVoice',
                    'uploadVoice',
                    'downloadVoice',
                    'chooseImage',
                    'previewImage',
                    'uploadImage',
                    'downloadImage',
                    'getNetworkType',
                    'openLocation',
                    'getLocation',
                    'hideOptionMenu',
                    'showOptionMenu',
                    'closeWindow',
                    'scanQRCode',
                    'chooseWXPay',
                    'openProductSpecificView',
                    'addCard',
                    'chooseCard',
                    'openCard'
                  ]
              });
            // 通過ready接口處理成功驗證
            wx.ready(function () {
                 alert("初始化成功!");
            });
            wx.error(function () {
                alert("初始化失敗!");
            });

        }
    }
});
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章