最近沉迷吃鸡不能自拔,好久没更新文章了.后续将陆续完善《Koa2 微信公众号开发》.
一,简介
关于微信公众号的介绍就省略了,自行搜索.注册过程也不说了.我们会直接注册测试号来实现代码.这将会是个全面讲解微信公众号开发的系列教程.本篇是该系列的第一篇,本地开发环境搭建以及接入微信. 在开始之前最好去看看开发者文档 微信公众平台技术文档
二,本地开发调试环境搭建
2.1 开发环境
- MacOs
- Node v8.9.1
- Koa2
2.2 微信公众平台开发的基本原理
我们先来看看微信公众平台开发的基本原理:在进行微信开发的时候, 需要在我们在自己的服务器上部署服务对微信消息进行处理.微信服务器就相当于一个转发服务器.终端(手机,Pad 等)发起请求至微信服务器,微信服务器然后将请求转发给自定义服务(这里就是我们的具体实现).服务处理完毕,然后转发给微信服务器,微信服务器再将具体响应回复到终端,通信协议为:HTTP;数据格式为:XML.
我们的服务需要做的就是对请求做出响应,解析 XML, 进行相应的处理后再返回特定的 XML.
2.3 ngrok 微信本地开发
这儿我们了解到了接入微信开发需要一个自己的响应服务器,我们可以购买服务器或者新浪云百度云之类的服务.但是在我们开发阶段这样做是很麻烦的,我们需要搭建一个好用的本地调试环境,将内网映射出去,让外网能够访问的. 这儿推荐使用 Ngrok 服务.win,mac 都能方便使用,而且稳定,外网域名是固定的.
打开它的网站 www.ngrok.cc/ 注册登录然后开通隧道.同时你需要下载相应的客户端 在 win 中这是个批处理文件,运行它然后填入相应的隧道 id 回车即可,在 Mac 中命令行执行如下命令.
./sunny clientid 隧道id
运行成功会返回 ngrok 换发域名.
更多参见 ngrok 官网教程
到此,我们来让 node 服务跑起来,并通过 ngrok 的域名外网访问
mkdir koa2-wechat && cd koa2-wechat
npm install koa --save
新建 app.js
const Koa = require('koa')
const app = new Koa()
app.use(async ctx => {
ctx.body = 'JavaScript之禅'
});
app.listen(7001);
我们运行 app.js,将服务跑起来,浏览器打开 localhost:7001 我们将能够看见返回了 JavaScript 之禅.这儿推荐使用 supervisor,它会监视你对代码的改动, 并自动重动 Node
npm install -g supervisor
supervisor app.js
接下来就是用前面讲的 ngrok 进行内网转发了
./sunny clientid 隧道id
如果不出问题,你打开你的转发域名 http://**.free.ngrok.cc 也将看见 JavaScript 之禅
三,接入微信公众平台开发
3.1 接入流程
接入微信公众平台开发,开发者需要按照如下步骤完成:
1,填写服务器配置
2,验证服务器地址的有效性
3,依据接口文档实现业务逻辑
我们登录微信公众平台接口测试帐号 mp.weixin.qq.com/debug/cgi-b... ,登录后填写接口配置信息 *(你的 url 地址以及 token)*,这时肯定不能配置成功的.我们需要验证服务器地址的有效性,开发者提交信息后,微信服务器将发送 GET 请求到填写的服务器地址 URL 上,GET 请求携带参数如下表所示:
参数 | 描述 |
---|---|
signature | 微信加密签名,signature 结合了开发者填写的 token 参数和请求中的 timestamp 参数、nonce 参数。 |
timestamp | 时间戳 |
nonce | 随机数 |
echostr | 随机字符串 |
开发者通过检验 signature 对请求进行校验.若确认此次 GET 请求来自微信服务器,原样返回 echostr 参数内容,则接入生效,成为开发者成功,否则接入失败.加密 / 校验流程如下:
将 token,timestamp,nonce 三个参数进行字典序排序
将三个参数字符串拼接成一个字符串进行 sha1 加密
开发者获得加密后的字符串可与 signature 对比,标识该请求来源于微信
Talk is cheap. Show me the code
3.2 koa2 验证服务器地址的有效性
修改 app.js
const Koa = require('koa')
const app = new Koa()
// 引入node加密模块进行sha1加密
const crypto = require('crypto')
const config = {
wechat: {
appID: 'appID',
appsecret: 'appsecret',
token: 'zenofjavascript',
}
}
app.use(async ctx => {
const { signature, timestamp, nonce, echostr } = ctx.query
const token = config.wechat.token
let hash = crypto.createHash('sha1')
const arr = [token, timestamp, nonce].sort()
hash.update(arr.join(''))
const shasum = hash.digest('hex')
if(shasum === signature){
return ctx.body = echostr
}
ctx.status = 401
ctx.body = 'Invalid signature'
})
app.listen(7001)
进入测试号的页面重新提交接口配置信息,你将会看见一个一闪而过的配置成功过提示框.恭喜,这标志着你正式跳进了微信开发的坑了.
本篇文章到此结束,下一节将讲解公众号的消息回复功能
来源: https://juejin.im/post/5a686d6ef265da3e484bfe8d