在调用js-sdk的第一步,我们需要引入js-sdk的js链接,然后执行wx.config,官方示例如下所示:
1 wx.config({ 2 debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 3 appId: ‘‘, // 必填,企业号的唯一标识,此处填写企业号corpid 4 timestamp: , // 必填,生成签名的时间戳 5 nonceStr: ‘‘, // 必填,生成签名的随机串 6 signature: ‘‘,// 必填,签名,见附录1 7 jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 8 });
一、分析参数:
1. appId我们可以通过后端读取配置文件读取出来传递到前端。
2. timestamp是前端生成还是后端生成都OK,我这里是用的异步获取签名等参数,所以我这个案例是使用前端生成时间戳。
3. nonceStr是一个随机串,java中采用UUID来生成这个随机串。
4. signature是一个签名,这个是需要java后端根据以上三个参数来组成一个字符串,然后再对这个字符串进行sha1加密得到的。微信官方还给出了一个用于在线校验签名的工具
二、后端接口部分:
1. 我们需要直接准备的是 appId 、secret、noncestr,appId 在企业号中为 CorpId,这两个参数可以从微信企业号后台得到。noncestr 为随机串,采用UUID生成,方法如下:
public static String create_noncestr() { return UUID.randomUUID().toString(); }
2. 因为最终需要正确地生成signature签名,而生成签名需要四个参数,即 jsapi_ticket、noncestr、timestamp、url,在这四个参数重,jsapi_ticket是需要获取到的,而获取jsapi_ticket又需要先获取到access_token,所以以下代码就依次获取这些参数来做一个展示:
1 /** 2 * 获取access_token 3 * @param request 4 * @param response 5 * @throws Exception 6 */ 7 @RequestMapping("/getAccessToken") 8 public void getAccessToken(HttpServletRequest request, HttpServletResponse response) throws Exception { 9 String urlStr = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid="+CORPID+"&corpsecret="+CORPSECRET; 10 processUrl(response, urlStr); 11 } 12 13 /** 14 * 获取jsapi_ticket 15 * @param request 16 * @param response 17 * @throws Exception 18 */ 19 @RequestMapping("/getJsapiTicket") 20 public void getJsapiTicket(HttpServletRequest request, HttpServletResponse response) throws Exception { 21 String access_token = request.getParameter("access_token"); 22 String urlStr = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token="+access_token; 23 processUrl(response, urlStr); 24 } 25 26 /** 27 * 获取签名signature 28 * @param request 29 * @param response 30 * @throws Exception 31 */ 32 @RequestMapping("/getJsSdkSign") 33 public void getJsSdkSign(HttpServletRequest request, HttpServletResponse response) throws Exception { 34 String noncestr = request.getParameter("noncestr"); 35 String tsapiTicket = request.getParameter("jsapi_ticket"); 36 String timestamp = request.getParameter("timestamp"); 37 String url = request.getParameter("url"); 38 String jsSdkSign = getJsSdkSign(noncestr, tsapiTicket, timestamp, url); 39 PrintWriter out = response.getWriter(); 40 out.print(jsSdkSign); 41 } 42 43 private void processUrl(HttpServletResponse response, String urlStr) { 44 URL url; 45 try { 46 url = new URL(urlStr); 47 URLConnection URLconnection = url.openConnection(); 48 HttpURLConnection httpConnection = (HttpURLConnection)URLconnection; 49 int responseCode = httpConnection.getResponseCode(); 50 if (responseCode == HttpURLConnection.HTTP_OK) { 51 InputStream urlStream = httpConnection.getInputStream(); 52 BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(urlStream)); 53 String sCurrentLine = ""; 54 String sTotalString = ""; 55 while ((sCurrentLine = bufferedReader.readLine()) != null) { 56 sTotalString += sCurrentLine; 57 } 58 PrintWriter out = response.getWriter(); 59 out.print(sTotalString); 60 }else{ 61 System.err.println("失败"); 62 } 63 } catch (Exception e) { 64 e.printStackTrace(); 65 } 66 } 67 68 /** 69 * 获得加密后的签名 70 * @param noncestr 71 * @param tsapiTicket 72 * @param timestamp 73 * @param url 74 * @return 75 */ 76 public static String getJsSdkSign(String noncestr,String tsapiTicket,String timestamp,String url){ 77 String content="jsapi_ticket="+tsapiTicket+"&noncestr="+noncestr+"×tamp="+timestamp+"&url="+url; 78 String ciphertext=getSha1(content); 79 80 return ciphertext; 81 } 82 83 /** 84 * 进行sha1加密 85 * @param str 86 * @return 87 */ 88 public static String getSha1(String str){ 89 if(str==null||str.length()==0){ 90 return null; 91 } 92 char hexDigits[] = {‘0‘,‘1‘,‘2‘,‘3‘,‘4‘,‘5‘,‘6‘,‘7‘,‘8‘,‘9‘, 93 ‘a‘,‘b‘,‘c‘,‘d‘,‘e‘,‘f‘}; 94 try { 95 MessageDigest mdTemp = MessageDigest.getInstance("SHA1"); 96 mdTemp.update(str.getBytes("UTF-8")); 97 98 byte[] md = mdTemp.digest(); 99 int j = md.length; 100 char buf[] = new char[j*2]; 101 int k = 0; 102 for (int i = 0; i < j; i++) { 103 byte byte0 = md[i]; 104 buf[k++] = hexDigits[byte0 >>> 4 & 0xf]; 105 buf[k++] = hexDigits[byte0 & 0xf]; 106 } 107 return new String(buf); 108 } catch (Exception e) { 109 // TODO: handle exception 110 return null; 111 } 112 } 113 114 /** 115 * 获得随机串 116 * @return 117 */ 118 public static String create_noncestr() { 119 return UUID.randomUUID().toString(); 120 }
三、前端请求部分:
1 var weixin = false; 2 $.ajax({ 3 dataType:"json", 4 url: "${ctx.contextPath}/wechat/getAccessToken", 5 success: function(data){ 6 $.getJSON("${ctx.contextPath}/wechat/getJsapiTicket", 7 { 8 access_token:data.access_token //获取的access_token 9 }, 10 function(result){ 11 var time=parseInt((new Date().getTime())/1000); 12 $.get("${ctx.contextPath}/wechat/getJsSdkSign", 13 { 14 noncestr:"${noncestr!""}", 15 jsapi_ticket:result.ticket,//获取的jsapi_ticket 16 timestamp:time, 17 url:location.href.split(‘#‘)[0] 18 }, 19 function(sign){ 20 wx.config({ 21 debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 22 appId: ‘${appId!""}‘, // 必填,企业号的唯一标识,此处填写企业号corpid 23 timestamp: time, // 必填,生成签名的时间戳 24 nonceStr: ‘${noncestr!""}‘, // 必填,生成签名的随机串 25 signature: sign,// 必填,签名,见附录1 26 jsApiList: [‘uploadImage‘, ‘chooseImage‘] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 27 }); 28 } 29 ); 30 } 31 ); 32 }, 33 error:function(XMLHttpRequest, textStatus, errorThrown){ 34 } 35 }); 36 wx.ready(function(){ 37 weixin = true; 38 });
ps:案例仅供参考,接口因人而异。谢谢大家~
fullStack.yang
2016-12-26于成都高新区天府软件园