前置准备
- 一个测试公众号
- 一台服务器(带域名)
登录测试公众号后台添加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 +
'×tamp=' +
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 +
'×tamp=' +
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 本地调试
一般我们有内网穿透、代理劫持等几种方法去进行本地调试，这里我们使用一个比较常用的方法内网穿透(用你自己熟练的方法就好)来测试。
- 修改项目根目录下的 config.js，换成自己公众号的appid及secrect
- 在项目根目录执行
node app.js启动服务后浏览器打开如下地址 http://localhost:4000/ 即可看到 Demo 页面 - 在前置准备中我们设置了一个JS接口安全域名，可以基于这个域名做穿透服务来访问我们本地koa项目，添加公网端口映射本地koa项目的端口(这里的例子是4000)，然后浏览器访问JS接口安全域名即可看到 Demo 页面
- 使用微信打开JS接口安全域名即可测试使用
项目代码获取：极客之路公众号后台回复 koa-wx-js-sdk 即可获取
视频演示
以下是测试视频地址，仅供参考
https://www.bilibili.com/video/BV1N64y1x78m
注意事项
- 签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
- 签名用的url必须是调用JS接口页面的完整URL。
- 出于安全考虑，开发者必须在服务器端实现签名的逻辑。
