基于koa实现的微信JS-SDK调用Demo

前置准备

• 一个测试公众号
• 一台服务器(带域名)

登录测试公众号后台添加JS安全域名

koa项目开发

微信JS-SDK权限验证的签名必须在服务器端实现，签名用的url必须是调用JS接口页面的完整URL，所以这里决定用koa来同时完成页面渲染及生成签名所需验证配置。
项目依赖库如下：

• koa-router
• request-promise
• koa-views
• koa-static
• koa2-cors
• memory-cache
• sha1

下面介绍一下核心的签名方法：
主要就是请求全局token后获取jsapi_ticket来获取签名。

const config = require('./config');
async function sign(url) {
  let sig = {},
    noncestr = config.noncestr,
    timestamp = Math.floor(Date.now() / 1000), //精确到秒
    jsapi_ticket;
  if (cache.get('ticket')) {
    jsapi_ticket = cache.get('ticket');
    sig = {
      appId: config.appid,
      noncestr: noncestr,
      timestamp: timestamp,
      url: url,
      jsapi_ticket: jsapi_ticket,
      signature: sha1(
        'jsapi_ticket=' +
          jsapi_ticket +
          '&noncestr=' +
          noncestr +
          '&timestamp=' +
          timestamp +
          '&url=' +
          url
      ),
    };
  } else {
    // 获取 token
    let tokenRes = await rp({
      uri:
        config.accessTokenUrl +
        '?grant_type=' +
        config.grant_type +
        '&appid=' +
        config.appid +
        '&secret=' +
        config.secret,
    });
    tokenRes = JSON.parse(tokenRes);

    // 获取 ticket
    let ticketRes = await rp({
      uri:
        config.ticketUrl +
        '?access_token=' +
        tokenRes.access_token +
        '&type=jsapi',
    });
    var ticketMap = JSON.parse(ticketRes);
    // 加入缓存
    cache.put('ticket', ticketMap.ticket, config.cache_duration);
    sig = {
      appId: config.appid,
      noncestr: noncestr,
      timestamp: timestamp,
      url: url,
      jsapi_ticket: ticketMap.ticket,
      signature: sha1(
        'jsapi_ticket=' +
          ticketMap.ticket +
          '&noncestr=' +
          noncestr +
          '&timestamp=' +
          timestamp +
          '&url=' +
          url
      ),
    };
  }
  return sig;
}

之后我们只要在koa的router中定义一个路由去生成签名就行了

router.get('/sig', async (ctx, next) => {
  try {
    //获取当前url
    let url =
      ctx.request.protocol + '://' + ctx.request.host + ctx.request.originalUrl;
    if (ctx.query.url) {
      url = ctx.query.url;
    }
    ctx.data = await sign(url);
  } catch (e) {
    console.log(e);
  }
  await next();
});

demo 页面我们可以使用 koa-views 及 ejs 来渲染：

• 页面放到 views 目录
• 页面需要引用的css及js可以放到 static 目录下面

参考代码如下：

const views = require('koa-views');
const static = require('koa-static');
app.use(static(path.join(__dirname, './static')));
app.use(
  views(path.join(__dirname, './views'), {
    extension: 'ejs',
  })
);

views 目录下新建页面 index.ejs，写入 sdk 调用前端 demo 页面，主要内容如下：

• 引入 jweixin-1.6.0.js 文件

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

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

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

• ready接口处理成功验证

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

• error接口处理失败验证

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

完整页面代码参考地址(过长不便展示)：
https://github.com/xuedingmiaojun/koa-demo/blob/master/wxgh-jssdk/views/index.ejs

至此我们就完成了一个简易的koa版调用Demo了，下面我们来测试一下

Demo 本地调试

一般我们有内网穿透、代理劫持等几种方法去进行本地调试，这里我们使用一个比较常用的方法内网穿透(用你自己熟练的方法就好)来测试。

1. 修改项目根目录下的 config.js，换成自己公众号的appid及secrect
2. 在项目根目录执行node app.js启动服务后浏览器打开如下地址 http://localhost:4000/ 即可看到 Demo 页面
3. 在前置准备中我们设置了一个JS接口安全域名，可以基于这个域名做穿透服务来访问我们本地koa项目，添加公网端口映射本地koa项目的端口(这里的例子是4000)，然后浏览器访问JS接口安全域名即可看到 Demo 页面
4. 使用微信打开JS接口安全域名即可测试使用

项目代码获取：极客之路公众号后台回复 koa-wx-js-sdk 即可获取

视频演示

以下是测试视频地址，仅供参考
https://www.bilibili.com/video/BV1N64y1x78m

注意事项

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

参考资料

• JS-SDK说明文档
• 官方DEMO页面
• koa2实现静态资源服务器
• 测试公众号后台