微信网页JSSDK开发流程

1、绑定域名

• 登录微信公众后台之进入公众号设置的功能设置，填写JS接口安全域名。

2、引入JS文件

<link rel="stylesheet" type="text/css" href="front/css/weui.css"/>
<script type="text/javascript" src="front/js/jweixin-1.0.0.js"></script>

3、通过config接口注入权限验证配置

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

4、通过ready接口处理成功验证

wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确 执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

5、通过error接口处理失败验证

wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

• 这其中，最主要的部分就是config接口注入权限验证配置，后台需要进行相关操作来生成这些权限验证配置，下面就讲一下这些权限验证配置参数的生成过程：

6、获取jsapi_ticket

jsapi_ticket介绍

jsapi_ticket是公众号用于调用微信JS接口的临时票据，正常情况下，jsapi_ticket的有效期为7200秒，通过access_token获取。jsapi_ticket的api调用次数非常有限（100000次/日），因此为了不影响自身业务，开发者必须在自己服务全局缓存jsapi_ticket。通过下面这个链接可以获取到jsapi_ticket信息。

• 获取jsapi_ticket的链接：
• https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

签名算法

签名生成规则如下：参与签名的字段包括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
• imestamp=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。

下面给出Java版的权限信息获取代码：

主操作类：

//公众号用于调用微信JS接口的临时票据
String jsApiTicket = JsapiTicketService.getInstance().queryJsapiTicket();
//调用微信JSApi的当前网页URL（当前链接）   
String url = "www.baidu.com 此处是当前访问的URL全链接";
//随机字符串
String nonceStr = UUID.randomUUID().toString();
//当前时间
String timestamp = Long.toString(System.currentTimeMillis() / 1000);    

StringBuilder str = new StringBuilder();
str.append("jsapi_ticket=").append(jsApiTicket)
   .append("&noncestr=").append(nonceStr)
   .append("&timestamp=").append(timestamp)
   .append("&url=").append(url);

String signature = SignUtil.sha1(str.toString());       //获取到的数字签名  

request.setAttribute("appId", WechatConstant.app_id);
request.setAttribute("timestamp", timestamp);
request.setAttribute("nonceStr", nonceStr);
request.setAttribute("signature", signature);

SignUtil校验工具类

 /**
  * 对给定字符串内容进行sha1数字签名
  */
public static String sha1(String content) {
    MessageDigest md = null;  
    String tmpStr = null;  
    try {  
         md = MessageDigest.getInstance("SHA-1");  
         // 将三个参数字符串拼接成一个字符串进行sha1加密  
         byte[] digest = md.digest(content.getBytes());  
         tmpStr = byteToStr(digest);  
    } catch (NoSuchAlgorithmException e) {  
         e.printStackTrace();  
    }

    return tmpStr.toLowerCase();
} 

/** 
  * 将字节数组转换为十六进制字符串 
  */  
 private static String byteToStr(byte[] byteArray) {  
     String strDigest = "";  
     for (int i = 0; i < byteArray.length; i++) {  
         strDigest += byteToHexStr(byteArray[i]);  
     }  
     return strDigest;  
 }

 /** 
  * 将字节转换为十六进制字符串 
  */  
 private static String byteToHexStr(byte mByte) {  
     char[] Digit = { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F' };  
     char[] tempArr = new char[2];  
     tempArr[0] = Digit[(mByte >>> 4) & 0X0F];  
     tempArr[1] = Digit[mByte & 0X0F];  

     String s = new String(tempArr);  
     return s;  
 }