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

前置准备

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

登录测试公众号后台添加JS安全域名
基于koa实现的微信JS-SDK调用Demo

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。
  • 出于安全考虑,开发者必须在服务器端实现签名的逻辑。

参考资料

上一篇:vue-router切换不同参数共用路由来显示页面的方法


下一篇:npm与yarn怎么选