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

介绍使用koa框架实现的一个微信 JS-SDK 调用示例

前置准备

koa项目开发

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 + '×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 文件

通过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可以在这里更新签名。 });

完整页面代码如下：

至此我们就完成了一个简易的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。

出于安全考虑，开发者必须在服务器端实现签名的逻辑。

参考资料

JS-SDK说明文档(https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html)

官方DEMO页面(https://www.weixinsxy.com/jssdk/)

koa2实现静态资源服务器(http://xuedingmiao.com/blog/koa_static_server.html)

测试公众号后台(https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index)

API/SDK Koa

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。