Wechat JSSDK prompt invalid signature

1. Use Wechat to open and always report invalid signature errors. The screenshot is as follows:

clipboard.png

2:
:jsapi_ticket=HoagFKDcsGMVCIY2vOjf9kbCx7fg5SWrDRQKPVygt-TLxSnB7TYLwraONW8-7PWNJUkHKVnRuqrrRjlbGjr_Lg&noncestr=ac275964-c552-419b-bb04-548ac6d0fb99×tamp=1542958777&url=http://www.baidu.com
:0e3c7963e8b2a57e76138c5505edbc198b18fec5

3:

clipboard.png

4:

clipboard.png

I have been working on it for several days, but I can"t find out the reason. Which hero has been here? under the guidance. Thank you

Dec.10,2021

take a look at the whitelist of Wechat platform added under ip.
or troubleshoot the splicing link problem.


for security reasons, developers must implement the logic of signing on the server side.

so,

wx.config({
    debug: true, // ,apialertpclogpc
    appId: '', // 
    timestamp: , // 
    nonceStr: '', // 
    signature: '',// 
    jsApiList: [] // JS
});

except for debug and jsApiList , all the fields needed for

frontend initialization are taken from the background. You wrote them dead in the foreground, so you made a mistake.

so, the usual logic is for the front end to get the above fields from the background, complete initialization at the front end, and then add callbacks for successful and failed initialization. Example:

var link = location.href
$.ajax({
  url: 'your_url', //
  type: 'GET',
  data: { url: link },
  async: true,
  dataType: 'json',
  success: function(data) {
    wx.config({
      debug: false, // ,apialert
      appId: data.configMap.appId, // 
      timestamp: data.configMap.timestamp, // 
      nonceStr: data.configMap.nonceStr, // 
      signature: data.configMap.signature, // 1
      jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // JSJS2
    })
    wx.ready(function(res) {
      wx.onMenuShareAppMessage({
        title: document.title,
        desc: document.title,
        link: link,
        imgUrl: Imgurl,
        trigger: function(res) {},
        success: function(res) {},
        cancel: function(res) {},
        fail: function(res) {}
      })
      wx.onMenuShareTimeline({
        title: document.title,
        link: link,
        imgUrl: Imgurl,
        trigger: function(res) {},
        success: function(res) {},
        cancel: function(res) {},
        fail: function(res) {}
      })
    })
    wx.error(function(res) {
      alert(res)
    })
  },
  error: function(error) {
    alert(error)
  }
})

Menu