基于Java spring框架的微信企业号开发中关于js-sdk的配置

Posted 2020-08-25 fullStack-yang

　　在调用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+"&timestamp="+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于成都高新区天府软件园