9 JS SDK验证代码

<<<<<<< HEAD

JS-SDK验证代码

该验证实质上就是一个前端的JS与后台做一个ajax交互，由JS向后台ajax提交一个参数url，url即为当前的地址栏url，再将后台返回的结果异步写入微信JS-SDK的wx.config代码中。 不过也可以在跳转进入页面之前就做好验证，然后将验证的结果同时写入wx.config代码中。我这里采用的是异步验证。

完整代码如下。

后台Java算法计算

java import com.itfvck.wechatframework.api.jsapi.JsApiManager; import com.itfvck.wechatframework.api.jsapi.JsApiParam;

/**

• 微信JS-SDK权限验证
• @param url

•        JS-SDK所在的当前页面地址
  

• @return
• @author */ @RequestMapping(value = "weixin/signatureJSSDK") @ResponseBody public Map<String, Object> signatureJSSDK(String url) { Map<String, Object> map = new HashMap<>(); JsApiParam signature = null; try { signature = JsApiManager.signature(url); } catch (Exception e) { map.put("msg", "验证错误"); } map.put("result", signature); return map; }

## 前端JS

```javascript```

var url = window.location.href;
signatureJSSDK();

// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
wx.error(function(res) {
	alert(res);
	console.log(res);
});

/**
 * 微信微信JS-SDK验证
 */
function signatureJSSDK() {
	$.ajax({
		type : 'POST',
		url : 'weixin/signatureJSSDK',//注意该处的访问地址必须正确
		data : {
			"url" : url
		},
		dataType : 'json',
		success : function(data) {
			var result = data.result;
			if (result) {
				wx.config({
					debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId : result.appid, // 必填，公众号的唯一标识
					timestamp : result.timeStamp, // 必填，生成签名的时间戳
					nonceStr : result.nonceStr, // 必填，生成签名的随机串
					signature : result.signature,// 必填，签名，见附录1
					jsApiList : [// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
					'onMenuShareTimeline', 'onMenuShareAppMessage',
							'onMenuShareQQ', 'onMenuShareWeibo',
							'onMenuShareQZone', 'startRecord', 'stopRecord',
							'onVoiceRecordEnd', 'playVoice', 'pauseVoice',
							'stopVoice', 'onVoicePlayEnd', 'uploadVoice',
							'downloadVoice', 'chooseImage', 'previewImage',
							'uploadImage', 'downloadImage', 'translateVoice',
							'getNetworkType', 'openLocation', 'getLocation',
							'hideOptionMenu', 'showOptionMenu',
							'hideMenuItems', 'showMenuItems',
							'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem',
							'closeWindow', 'scanQRCode', 'chooseWXPay',
							'openProductSpecificView', 'addCard', 'chooseCard',
							'openCard' ]
				});
			}
		}
	});
}

=======

前言

众所周知，微信公众平台开发需要将应用服务器搭建在外网环境才能保证让微信服务器访问到我们的应用。然而，通常情况下，我们是在本地开发好应用，然后将应用上传到外网服务器进行调试。这必然会对我们的开发进度造成极大的影响，更何况，有一些人根本就没有外网的服务器，这就更难办了，于是如果让微信服务器能够访问到我们本地的电脑就理想了。刚好的是，这种将我们本地电脑变成一台外网电脑的技术还是有很多的。今天我们就来认识一下一种反向代理的工具ngrok，并用其来让我们本地开发微信公众平台应用。

ngrok

ngrok官网
作为一个Web开发者，我们有时候会需要临时地将一个本地的Web网站部署到外网，以供它人体验评价或协助调试等等。有了ngrok之后，我们就可以在本地就能做到如同外网一样了，让外网可以直接访问到本地。

ngrok使用入门

• 下载ngrok
• windows-->运行-->cmd，进入到ngrok.exe所在的目录，输入ngrok 80，回车后便开始运行了，这样可以将本机的127.0.0.1:80分配一个外网可以访问的域名。
• 在微信公众平台的URL接入的地方就可以直接输入该域名。
• ngrok官方所遗留的问题
  每次启动ngrok之后，分配给我们的域名就会改变，因此不得已之下，必须每次都要去微信公众平台里重新设置一遍和域名有关的东西。在早期的ngrok中，我们是可以自定义域名的，不过后来取消了。
• 解决方案
  其实花钱后，ngrok也会提供自定义域名的服务器的，不过没必要，更何况，ngrok经常被墙。由于ngrok该软件本身是开源的，因此理论上来讲，只要我们拥有一台外网的服务器，我们就可以将ngrok搭建在外网，然后其他人在内网就可以使用该ngrok服务。幸运的是，很多国内的网友已经做了很多这样的事了，也就是说现在已经有了很多国内的ngrok，我们一搜索便可以搜索到很多的国内ngrok，并且都免费使用，还提供自定义域名。我本人就是随便搜的国内ngrok，也一直使用着。

ff291fcb3659e64db8d86385d5ff8c7ba022a34d