微信JS-SDK获取signature签名以及config配置

微信的JS-SDK通过config接口注入权限验证配置，官网上的文档说的很清楚：

Js代码  收藏代码
  1. wx.config({  
  2.     debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。  
  3.     appId: '', // 必填，公众号的唯一标识  
  4.     timestamp: , // 必填，生成签名的时间戳  
  5.     nonceStr: '', // 必填，生成签名的随机串  
  6.     signature: '',// 必填，签名，见附录1  
  7.     jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2  
  8. });  
 上面的几个参数，对于像我这样子的初学者而言，不简单，所以在弄这块的时候没少碰钉子，这里说一下。

 

先说那个最烦人的signature，官网附录1是这么说的：

-------------------------------------------------------------------------------------------------------------------------------------

jsapi_ticket

生成签名之前必须先了解一下jsapi_ticket，jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下，jsapi_ticket的有效期为7200秒，通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限，频繁刷新jsapi_ticket会导致api调用受限，影响自身业务，开发者必须在自己的服务全局缓存jsapi_ticket 。

1、参考以下文档获取access_token（有效期7200秒，开发者必须在自己的服务全局缓存access_token）：../15/54ce45d8d30b6bf6758f68d2e95bc627.html

2、用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

成功返回如下JSON：

Js代码  收藏代码
  1. {  
  2. "errcode":0,  
  3. "errmsg":"ok",  
  4. "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",  
  5. "expires_in":7200  
  6. }  
 获得jsapi_ticket之后，就可以生成JS-SDK权限验证的签名了。

 

签名算法

签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分） 。对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里 需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。


即signature=sha1(string1)。 示例：

  • noncestr=Wm3WZYTPz0wzccnW
  • jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
  • timestamp=1414587457
  • url=http://mp.weixin.qq.com?params=value

步骤1. 对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1：

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

 

步骤2. 对string1进行sha1签名，得到signature：

0f9de62fce790f9a083d5c99e95740ceb90c27ed

 

注意事项：

1、签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
2、签名用的url必须是调用JS接口页面的完整URL。
3、出于安全考虑，开发者必须在服务器端实现签名的逻辑。

-------------------------------------------------------------------------------------------------------------------------------------

以上的东西加起来就是四步：

1、使用APPID和APPSecret获取access_token；

2、使用access_token获取jsapi_ticket ；

3、用时间戳、随机数、jsapi_ticket和要访问的url按照签名算法拼接字符串；

4、对第三步的字符串进行SHA1加密，得到签名。

 

第一步、获取access_token

这里是官网的说法，可以看看。

以下是我的代码实现：

Java代码  收藏代码
  1. public static String getAccessToken() {  
  2.     String access_token = "";  
  3.     String grant_type = "client_credential";//获取access_token填写client_credential   
  4.     String AppId="APPID";//第三方用户唯一凭证  
  5.     String secret="APPSECRET";//第三方用户唯一凭证密钥，即appsecret   
  6.     //这个url链接地址和参数皆不能变  
  7.     String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type="+grant_type+"&appid="+AppId+"&secret="+secret;  
  8.        
  9.     try {  
  10.         URL urlGet = new URL(url);  
  11.         HttpURLConnection http = (HttpURLConnection) urlGet.openConnection();  
  12.         http.setRequestMethod("GET"); // 必须是get方式请求  
  13.         http.setRequestProperty("Content-Type","application/x-www-form-urlencoded");  
  14.         http.setDoOutput(true);  
  15.         http.setDoInput(true);  
  16.         System.setProperty("sun.net.client.defaultConnectTimeout", "30000");// 连接超时30秒  
  17.         System.setProperty("sun.net.client.defaultReadTimeout", "30000"); // 读取超时30秒  
  18.         http.connect();  
  19.         InputStream is = http.getInputStream();  
  20.         int size = is.available();  
  21.         byte[] jsonBytes = new byte[size];  
  22.         is.read(jsonBytes);  
  23.         String message = new String(jsonBytes, "UTF-8");  
  24.         JSONObject demoJson = JSONObject.fromObject(message);  
  25.         System.out.println("JSON字符串："+demoJson);  
  26.         access_token = demoJson.getString("access_token");  
  27.         is.close();  
  28.     } catch (Exception e) {  
  29.             e.printStackTrace();  
  30.     }  
  31.     return access_token;  
  32. }  

APPID和APPSECRET可以去微信公众平台---“开发----基本配置”中查找。

 

第二步、获取jsapi_ticket

Java代码  收藏代码
  1. public static String getTicket(String access_token) {  
  2.     String ticket = null;  
  3.     String url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+ access_token +"&type=jsapi";//这个url链接和参数不能变  
  4.     try {  
  5.         URL urlGet = new URL(url);  
  6.         HttpURLConnection http = (HttpURLConnection) urlGet.openConnection();  
  7.         http.setRequestMethod("GET"); // 必须是get方式请求  
  8.         http.setRequestProperty("Content-Type","application/x-www-form-urlencoded");  
  9.         http.setDoOutput(true);  
  10.         http.setDoInput(true);  
  11.         System.setProperty("sun.net.client.defaultConnectTimeout", "30000");// 连接超时30秒  
  12.         System.setProperty("sun.net.client.defaultReadTimeout", "30000"); // 读取超时30秒  
  13.         http.connect();  
  14.         InputStream is = http.getInputStream();  
  15.         int size = is.available();  
  16.         byte[] jsonBytes = new byte[size];  
  17.         is.read(jsonBytes);  
  18.         String message = new String(jsonBytes, "UTF-8");  
  19.         JSONObject demoJson = JSONObject.fromObject(message);  
  20.         System.out.println("JSON字符串："+demoJson);  
  21.         ticket = demoJson.getString("ticket");  
  22.         is.close();  
  23.     } catch (Exception e) {  
  24.             e.printStackTrace();  
  25.     }  
  26.     return ticket;  
  27. }  

 

拿到了jsapi_ticket之后就要参数名排序和拼接字符串，并加密了。以下为sha1的加密算法：

Java代码  收藏代码
  1. public static String SHA1(String decript) {  
  2.     try {  
  3.         MessageDigest digest = java.security.MessageDigest.getInstance("SHA-1");  
  4.         digest.update(decript.getBytes());  
  5.         byte messageDigest[] = digest.digest();  
  6.         // Create Hex String  
  7.         StringBuffer hexString = new StringBuffer();  
  8.         // 字节数组转换为 十六进制 数  
  9.             for (int i = 0; i < messageDigest.length; i++) {  
  10.                 String shaHex = Integer.toHexString(messageDigest[i] & 0xFF);  
  11.                 if (shaHex.length() < 2) {  
  12.                     hexString.append(0);  
  13.                 }  
  14.                 hexString.append(shaHex);  
  15.             }  
  16.             return hexString.toString();  
  17.    
  18.         } catch (NoSuchAlgorithmException e) {  
  19.             e.printStackTrace();  
  20.         }  
  21.         return "";  
  22. }  

加密算法转载自：http://www.open-open.com/lib/view/open1392185662160.html

 

获取签名：

Java代码  收藏代码
  1. public static void main(String[] args) {  
  2.     //1、获取AccessToken  
  3.     String accessToken = getAccessToken();  
  4.       
  5.     //2、获取Ticket  
  6.     String jsapi_ticket = getTicket(accessToken);  
  7.       
  8.     //3、时间戳和随机字符串  
  9.     String noncestr = UUID.randomUUID().toString().replace("-", "").substring(0, 16);//随机字符串  
  10.     String timestamp = String.valueOf(System.currentTimeMillis() / 1000);//时间戳  
  11.       
  12.     System.out.println("accessToken:"+accessToken+"\njsapi_ticket:"+jsapi_ticket+"\n时间戳："+timestamp+"\n随机字符串："+noncestr);  
  13.       
  14.     //4、获取url  
  15.     String url="http://www.luiyang.com/add.html";  
  16.     /*根据JSSDK上面的规则进行计算，这里比较简单，我就手动写啦 
  17.     String[] ArrTmp = {"jsapi_ticket","timestamp","nonce","url"}; 
  18.     Arrays.sort(ArrTmp); 
  19.     StringBuffer sf = new StringBuffer(); 
  20.     for(int i=0;i<ArrTmp.length;i++){ 
  21.         sf.append(ArrTmp[i]); 
  22.     } 
  23.     */  
  24.       
  25.     //5、将参数排序并拼接字符串  
  26.     String str = "jsapi_ticket="+jsapi_ticket+"&noncestr="+noncestr+"&timestamp="+timestamp+"&url="+url;  
  27.      
  28.     //6、将字符串进行sha1加密  
  29.     String signature =SHA1(str);  
  30.     System.out.println("参数："+str+"\n签名："+signature);  
  31. }  

 

 该要的都有了，再次回到最开始的config配置，此时应该为：

Js代码  收藏代码
  1. wx.config({  
  2.     debug: true, //调试阶段建议开启  
  3.     appId: "APPID",//APPID  
  4.     timestamp: "timestamp",//上面main方法中拿到的时间戳timestamp  
  5.     nonceStr: "nonceStr",//上面main方法中拿到的随机数nonceStr  
  6.     signature: "signature",//上面main方法中拿到的签名signature  
  7.     jsApiList: [  
  8.            //所有要调用的 API 都要加到这个列表中  
  9.           "chooseImage"//从本地的相册、图库选择图片  
  10.     ]  
  11. });  

 以上的时间戳、随机数、签名一定要跟main方法中获取到的一致，否则会报invalid signature错误。

另外，这个签名的有效时间为7200秒，也就是2个小时，因此当超过两个小时候，再访问也会报invalid signature错误。

 

另外还有一个错误：invalid url domain

这个跟生成签名时用的url有关系，官网的说法是：

invalid url domain当前页面所在域名与使用的appid没有绑定，请确认正确填写绑定的域名，如果使用了端口号，则配置的绑定域名也要加上端口号（一个appid可以绑定三个有效域名）

这个url必须是：“公众号设置---功能设置----JS接口安全域名”中绑定的三个域名之一

 

若是以上的配置没有问题，且dubug也设置为了true，那么再访问的时候，就会出现一个config:ok，这就说明配置成功了。