微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)

wx.config({
 debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
 appId: '', // 必填，公众号的唯一标识
 timestamp: , // 必填，生成签名的时间戳，精确到秒
 nonceStr: '', // 必填，生成签名的随机串
 signature: '',// 必填，签名
 jsApiList: [] // 必填，需要使用的JS接口列表，例如：['chooseImage','previewImage','uploadImage']
})

{
"errcode":0,
"errmsg":"ok",
"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
"expires_in":7200
}

noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.weixin.qq.com"htmlcode">

{
	appId:appId,
	timestamp:timestamp,
	nonceStr: noncestr,
	signature: signature
}


前端拿到值后，写入到wx.config中相应字段即可
注意：
1、前端wx.config配置中的nonceStr字段名称的's'是大写。但是后台生成签名的noncestr字段的‘s'是小写，千万要注意，博主在这里浪费了不少时间。囧囧
2、时间戳(timestamp)值要记住精确到秒，不是毫秒。
3、生成签名的url(使用jssdk的页面地址，这个页面地址可以在浏览器访问)，包含“？”号后面的所有参数，不包含“#”号后面的值。
如果是静默授权或者授权页面同意授权后跳转到的页面，页面路径会添加两个参数：code和state。
即授权后跳转页面为http://redirect.page.com，则完整路径为
http://redirect.page.com"htmlcode">

$.ajax({
	url: 'http://backend.com"htmlcode">

let query = this.request.query;//获取查询字符串
let fullUrl = query.fullUrl;//获取查询字符串中的fullUrl字段


怎么样，有没有看出什么不对劲的地方？没有？
博主把所有后续的获取access_token、jsapi_ticket、计算签名、返回值到前端、前端wx.config配置好这些所有操作做完，信心满满的开始用测试号访问页面。结果直接弹出config: invalid signature(开启debug模式)。WTF ？？？
当然，搞这一行早就做好了遇到问题的心理准备。。。。开始排错呗。。
首先在后台将获取access_token、jsapi_ticket、计算签名的参数字典序排序后的字符串、sha1加密后的字符串全部console.log出来。
发现，没有错误的地方。那行，看来有可能是我代码那个地方写错了，或者签名算错了？
到微信在线接口调试把刚刚打印的计算签名的几个参数分别填好。生成。。。发现跟我的代码生成的是一样的。
结果博主是各种排错，各种百度，各种google。结果还是config: invalid signature...................................此处省略博主心里一万句话
又这样过了一个多小时，无果。。。。。。博主一脸颓废的到茶水间泡了杯咖啡。。提提神。。又回到了岗位，准备从头开始跑一遍再仔细看看。
从前端请求获取签名接口开始，博主打印了query的值。。也就是let query  = this.request.query的值。。结果发现。query值为：


{
	fullUrl: 'http://redirect.page.com"http://redirect.page.com">http://redirect.page.com"color: #ff0000">五、调用接口

wx.config配置完成后会执行wx.ready方法，所有接口必须要在config返回结果之后操作。config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。当前页面要使用的接口，要写入到config配置中的jsApiList中
1、拍照或从手机相册中选图接口


document.getElementById('chooseImage').onclick = function(){
 wx.chooseImage({
 count: 1, // 默认9
 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
 success: function (res) {
 var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
 }
 });
}


六、常见问题
1、invalid url domain:
js接口安全域名错误。可以看看第一项
2、invalid signature:
要么是jsapi_ticket错误，要么是签名算法问题，要么是算法的参数有问题，注意noncestr中的's'是小写的。如果都是对的。那就是前端传的url有问题了。。。好好检查一下，不要像博主一样啊。。。。
3、permission denied:
这个问题一般是没有接口权限的问题，有的接口是要认证之后才可以使用，当然，测试号不会有这个问题
总结

            
           
            上一篇：js中调用微信的扫描二维码功能的实现代码

            下一篇：微信分享invalid signature签名错误踩过的坑