基於Java spring框架的微信企業號開發中關於js-sdk的配置

　　在調用js-sdk的第一步，我們需要引入js-sdk的js鏈接，然后執行wx.config，官方示例如下所示：

wx.config({
    debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
    appId: '', // 必填，企業號的唯一標識，此處填寫企業號corpid
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名，見附錄1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});

一、分析參數：

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，所以以下代碼就依次獲取這些參數來做一個展示：

        /**
     * 獲取access_token
     * @param request
     * @param response
     * @throws Exception
     */
    @RequestMapping("/getAccessToken")  
    public void getAccessToken(HttpServletRequest request, HttpServletResponse response) throws Exception {  
        String urlStr = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid="+CORPID+"&corpsecret="+CORPSECRET;    
        processUrl(response, urlStr);    
    }  
      
    /**
     * 獲取jsapi_ticket
     * @param request
     * @param response
     * @throws Exception
     */
    @RequestMapping("/getJsapiTicket")  
    public void getJsapiTicket(HttpServletRequest request, HttpServletResponse response) throws Exception {  
        String access_token = request.getParameter("access_token");  
        String urlStr = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token="+access_token;    
        processUrl(response, urlStr);    
    }  
    
    /**
     * 獲取簽名signature
     * @param request
     * @param response
     * @throws Exception
     */
    @RequestMapping("/getJsSdkSign")  
    public void getJsSdkSign(HttpServletRequest request, HttpServletResponse response) throws Exception {  
        String noncestr = request.getParameter("noncestr");  
        String tsapiTicket = request.getParameter("jsapi_ticket");  
        String timestamp = request.getParameter("timestamp");  
        String url = request.getParameter("url");  
        String jsSdkSign = getJsSdkSign(noncestr, tsapiTicket, timestamp, url);  
        PrintWriter out = response.getWriter();  
        out.print(jsSdkSign);  
    }  
      
    private void processUrl(HttpServletResponse response, String urlStr) {  
        URL url;  
        try {  
            url = new URL(urlStr);  
            URLConnection URLconnection = url.openConnection();    
            HttpURLConnection httpConnection = (HttpURLConnection)URLconnection;    
            int responseCode = httpConnection.getResponseCode();    
            if (responseCode == HttpURLConnection.HTTP_OK) {    
                InputStream urlStream = httpConnection.getInputStream();    
                BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(urlStream));    
                String sCurrentLine = "";    
                String sTotalString = "";    
                while ((sCurrentLine = bufferedReader.readLine()) != null) {    
                    sTotalString += sCurrentLine;    
                }    
                PrintWriter out = response.getWriter();  
                out.print(sTotalString);  
            }else{  
                System.err.println("失敗");  
            }  
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
    }         

        /**
     * 獲得加密后的簽名
     * @param noncestr
     * @param tsapiTicket
     * @param timestamp
     * @param url
     * @return
     */
    public static String getJsSdkSign(String noncestr,String tsapiTicket,String timestamp,String url){  
        String content="jsapi_ticket="+tsapiTicket+"&noncestr="+noncestr+"&timestamp="+timestamp+"&url="+url;  
        String ciphertext=getSha1(content);  
        
        return ciphertext;  
    }  
    
    /**
     * 進行sha1加密
     * @param str
     * @return
     */
    public static String getSha1(String str){
        if(str==null||str.length()==0){
            return null;
        }
        char hexDigits[] = {'0','1','2','3','4','5','6','7','8','9',
                'a','b','c','d','e','f'};
        try {
            MessageDigest mdTemp = MessageDigest.getInstance("SHA1");
            mdTemp.update(str.getBytes("UTF-8"));

            byte[] md = mdTemp.digest();
            int j = md.length;
            char buf[] = new char[j*2];
            int k = 0;
            for (int i = 0; i < j; i++) {
                byte byte0 = md[i];
                buf[k++] = hexDigits[byte0 >>> 4 & 0xf];
                buf[k++] = hexDigits[byte0 & 0xf];      
            }
            return new String(buf);
        } catch (Exception e) {
            // TODO: handle exception
            return null;
        }
    }
    
    /**
     * 獲得隨機串
     * @return
     */
    public static String create_noncestr() {
        return UUID.randomUUID().toString();
    }

三、前端請求部分：

var weixin = false;
$.ajax({  
        dataType:"json",  
        url: "${ctx.contextPath}/wechat/getAccessToken",  
        success: function(data){  
             $.getJSON("${ctx.contextPath}/wechat/getJsapiTicket",  
                  {  
                    access_token:data.access_token  //獲取的access_token  
                  },  
                  function(result){  
                      var time=parseInt((new Date().getTime())/1000);  
                      $.get("${ctx.contextPath}/wechat/getJsSdkSign",  
                        {  
                            noncestr:"${noncestr!""}",  
                            jsapi_ticket:result.ticket,//獲取的jsapi_ticket  
                            timestamp:time,  
                            url:location.href.split('#')[0]  
                        },  
                        function(sign){  
                            wx.config({
                    　　　　　　debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
                   　　　　　　 appId: '${appId!""}', // 必填，企業號的唯一標識，此處填寫企業號corpid
                   　　　　　　 timestamp: time, // 必填，生成簽名的時間戳
                   　　　　　　 nonceStr: '${noncestr!""}', // 必填，生成簽名的隨機串
                   　　　　　　 signature: sign,// 必填，簽名，見附錄1
                   　　　　　　 jsApiList: ['uploadImage', 'chooseImage'] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
                　　　　　　});
                        }  
                      );  
                  }  
               );  
            },  
        error:function(XMLHttpRequest, textStatus, errorThrown){  
        }  
    });  
 wx.ready(function(){
     weixin = true;
 });

ps：案例僅供參考，接口因人而異。謝謝大家～

fullStack.yang

2016-12-26於成都高新區天府軟件園