公众号网页 JS-SDK与签名

1. JS-SDK使用步骤

1.1 域名绑定

• 公众号设置 :
  • 需要填写的域名须通过ICP备案的验证
• 使用微信测试号
  • JS接口安全域名:
  • 关注测试公众号

1.2 引入js文件

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

1.3 config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用）

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

1.4 通过ready接口处理成功验证

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

1.5 通过error接口处理失败验证

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

2. 前端生成签名

签名，一般由后端人员生成！

2.1 获取access_token

• access_token解释
  • access_token是公众号的全局唯一接口调用凭据，公众号调用各接口时都需使用access_token。
  • access_token的存储至少要保留512个字符空间。
  • access_token的有效期目前为2个小时，需定时刷新
  • 重复获取将导致上次获取的access_token失效。
• 接口调用请求说明
  • 公众号可以使用AppID和AppSecret调用本接口来获取access_token
  • 请求：https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
    • APPID
    • APPSECRET
  • 返回：{“access_token”:“获取到的凭证”,“expires_in”:7200}

2.2 jsapi_ticket令牌

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

2.3 签名算法

• 参与签名的字段包括
• noncestr（随机字符串）
• 有效的jsapi_ticket
• timestamp（时间戳）
• url（当前网页的URL，不包含#及其后面部分）
• 对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）
• 使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1：
• 对string1进行sha1算法加密 (js-sha1包提供的功能)，得到signature
• 包 ： npm i js-sha1
• 引入：
• var signature = sha1(sigStr);

代码

//1.首先要获取access_token
//2.有jsapi_ticket令牌才能调用JS-SDK
// 3.进行签名的准备工作
        var option = {
            noncestr:'denghuoan',
            jsapi_ticket:'',
            timestamp:1414587457,
            url:location.href
        }
    // 4. 将所有参与签名的字段进行ASCII排序
        var sigList = []
        for(var k in option) {
            // 将待签名的字段以 key=value的方式存入到数组中
            sigList.push(k.trim() + "=" + option[k]);
        }     
        sigList.sort()  // 给数组进行排序
    //5. 将数组转成 key=value&key=value这种字符串
        var sigStr = sigList.join("&");
           
    //6. 对sigStr字符串，进行sha1算法加密 (js-sha1包提供的功能)
        // npm i js-sha1
        // 引入：src="node_modules/js-sha1/build/sha1.min.js">
        var signature = sha1(sigStr);
   
    
        wx.config({
            debug: true, 
                // 开启调试模式,调用的所有api的返回值会在客户端alert出来，
                // 若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: 'wxb8ccc4321140f639', // 必填，公众号的唯一标识
            timestamp: option.timestamp, // 必填，生成签名的时间戳
            nonceStr: option.noncestr, // 必填，生成签名的随机串
            signature: signature,// 必填，签名，签名生成算法见附录1
            jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });