日常开发中,有时候会使用到微信的js,所以我们需要做JS-SDK开发,在这里记录一下JS-SDK开发过程
在后台配置好JS安全域名,此处域名和上面网页授权的域名一致。
配置完成后,在前端需要使用微信JS的页面上请求后台去验证签名是否正确,如果正确,后台返回签名等信息,然后前端再使用签名等信息调用wx.config,在wx.config里面jsApiList[]里面的就是我们需要用到的微信JS方法。
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<title>微信签到系统</title>
<!--[if lt IE 9]>
<meta http-equiv="refresh" content="0;ie.html"/>
<![endif]-->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="wrapper">
index.html
</div>
<script>
$(function () {
getJsSdk();
console.log(location.href.split('#')[0]);
})
function getJsSdk(){
$.ajax({
url : "/wx/getJs-SDK",
type : 'post',
dataType : 'json',
data : {
//'url' : encodeURIComponent(location.href.split('#')[0])
'url':location.href.split('#')[0]
},
success:function(data){
wx.config({
beta: true,// 必须这么写,否则wx.invoke调用形式的jsapi会有问题
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: data.appId, // 必填,企业微信的corpID
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signature,// 必填,签名,见 附录-JS-SDK使用权限签名算法
jsApiList: ['openDefaultBrowser'] // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
});
wx.ready(function(){
wx.invoke('openDefaultBrowser', {
'url': 'http://www.baidu.com' // 在默认浏览器打开redirect_uri,并附加code参数;也可以直接指定要打开的url,此时不会附带上code参数。
}, function(res){
if(res.errMsg == "openDefaultBrowser:ok"){
wx.closeWindow();
window.close();
}
});
});
wx.error(function(res){
console.log(res);
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
}
})
}
</script>
</body>
</html>
@PostMapping("/getJs-SDK")
@ResponseBody
public Map<String,Object> getJSSDKSignature(String url,HttpServletRequest request)throws Exception{
if(StringUtils.isBlank(url)) {
throw new Exception("请求路径不能为空");
}
//url = URLDecoder.decode(url, "UTF-8");
Date time = new Date();
//去redis里面获取token和Ticket
String accessTokenUrl = WxConstants.QIYE_ACCESS_TOKEN_URL.replace("ID", WxConstants.CORPID).replace("SECRET", WxConstants.SECRETID);
String tokenJson = WxUtil.loadJson(accessTokenUrl);
System.out.println(tokenJson);
//String access_token = (String) WxUtil.parseJSON2Map(tokenJson).get("access_token");
String access_token = "g8LKjbYzkcmxVf2CDNGl-Ty43JORbn6tbLxepEzoV2MNrXwRWvcFWqt44HYH8eFw6koV0N5RkKiOOzQjlARcAA4_-H2TZ8Ws-7tU0vlQPwR_vBzNg47aBuddLYJhV9fnEQl8px4dd5fQaiuJ6GLyxQX_YrzS_12de5MzTYMIMpsLblCRNj6qZs1nBcY8aVuLexiRvvDZed2-7LxPSJc5RQ";
System.out.println(access_token);
//ticket
//String ticket = WxUtil.getJsApiTicket(access_token);
String ticket = "bxLdikRXVbTPdHSM05e5u74DjS18dxtXsnW1O7AWO91EmVMctXZoI_g5slEuuBDprWzl0btNpgqKbY-GXvp5yA";
//存入Redis
Map<String,Object> resultMap = new HashMap<>();
System.out.println("ticket === "+ticket);
//随机字符串
String nonceStr = UUIDUtil.randomUUID8();
// 时间戳
long timestamp = time.getTime();
String str = "jsapi_ticket=" + ticket;
str += "&noncestr=" + nonceStr;
str += "×tamp=" + timestamp;
str += "&url=" + url;
//微信签名
String signature = DigestUtils.sha1Hex(str);
resultMap.put("nonceStr", nonceStr);
resultMap.put("signature", signature);
resultMap.put("timestamp", timestamp);
resultMap.put("appId", WxConstants.CORPID);
for(String key:resultMap.keySet()){
System.out.println("key === "+key+"value === "+ resultMap.get(key));
}
return resultMap;
}
如果是企业微信,在配置完成js-sdk域名之后,还需要下载一个文件,然后放在resources文件夹下面