内容简介
本文章简单介绍了如何用 node.JS 开发微信公众号. 主要内容包括 signature 的验证, access_token 的生成, 微信事件的接收, 还有各种 API 的调用.
准备工作
开发前需要安装好 node.JS, 因为我是基于 express 框架开发的, 所以装了 express(框架按自己的需求选择), 需要有一个微信公众号, 不管是订阅号还是服务号都可以 (没有的话可以用测试公众号), 还需要一个公网能访问的服务器. 基本的配置就这些, 后面有需要的再补充. 接下来, 开始讲如何开发.
一, 微信公众平台配置
登录微信公众平台, 没有公众号的话注册一个测试公众号 (不会的点这里, 扫码登录即可). 进入到公众平台, 你会看到如下界面:
基本配置
进入到公众平台首页, 首先会有一个测试号信息的 appID,appsecret; 并且 appID 和 appsecret 是不可以修改的 (自己注册公众号的 appsecret 是可以重置的, 操作很简单, 这里不做说明);
接口配置
接口配置信息这个模块, 首次进来的是空的, 需要自己配置; 这里需要配置两个参数, 一个是 URL, 还有一个是 Token; 如果不知道怎么配置, 具体的可以看微信的 wiki 文档, 我这里也给大家说一下我配置的时候遇到的一些坑吧!
首先, 点击修改的时候, 会变成如下界面:
注意点:
URL 参数说明: url 填的是一个公网上部署好的接口地址 (是真实存在已经部署好能够请求的接口), 接口必须以 http:// 或 https:// 开头, 仅支持
80
端口和
443
端口.
Token 参数说明: token 填的是自己定义的一个标识, 需要注意的一点就是这边配置好了以后, 在上面那个 url 的接口里面设置的 token 需要和这个保持一致, 不然配置是不会成功的.
具体的配置指南戳这里
当你点击提交的时候, 会发送一个 get 请求到你刚刚填写的 URL 地址, 并且会带上 4 个参数, 分别是: signature,timestamp,echostr,nonce, 然后在服务端验证配置是否通过;
如果配置成功, 则会有如下成功提示:
如果配置失败, 则会有如下失败提示:
接口配置到这里就完成了.
JS 接口安全域名
这个配置主要是为了能够调 JS-sdk 接口配置的, 只有在该域名下, 开发才能调用微信 JS 接口 (像调用二维码, 上传预览文件等功能), 文档也写的比较详细, 这里不做过多说明.
微信官方 JS-SDK 文档戳这里
到这里, 微信公众平台的配置就差不多了, 接下来就可以开始服务端的开发了.
二, node 服务端开发配置
还记得微信公众平台配置的时候填写的 url 和 token 值吗? 这里就用到了, 来看下面一段代码:
- const bodyParser = require('body-parser'); // 处理请求参数
- server.get("/", function (req, res) {
- var token = "xxxx";
- var signature = req.query.signature;
- var timestamp = req.query.timestamp;
- var echostr = req.query.echostr;
- var nonce = req.query.nonce;
- var oriArray = new Array();
- oriArray[0] = nonce;
- oriArray[1] = timestamp;
- oriArray[2] = token;
- oriArray.sort();
- var original = oriArray.join('');
- var sha = sha1(original)
- if (signature === sha) {
- // 验证成功
- res.send(echostr)
- } else {
- // 验证失败
- res.send({ "message": "error" })
- }
- });
还记得上面说点击提交的时候会发一个 get 请求吗? 还说会带 signature,timestamp,echostr,nonce 四个参数. 就是在这个接口中, 判断配置是否成功的, 来看下这个 get 请求具体做了什么事情.
定义一个 token 值, 需要和公众平台配置的 token 保持一致.
通过 req.query.xxx 获取请求传过来的 4 个参数.
把
nonce,timestamp,token
添加到一个数组中, 并用 sort() 排序, 然后把这个数组用 join("") 拼接成一个字符串.
用 sha1 加密生成一个密匙, 最后判断通过 sha1 生成的 signature 和参数带过来的 signature 是否一致, 一致则配置成功, 不一致则配置失败.
具体可以看官方文档 (文档示例是 PHP 的), 文档地址 戳这里;
到这里微信开发的公众号配置和 node 服务端配置就完成了, 接下来可以开始愉快的开发啦!
三, 用户信息处理
首先问一个问题, 当用户关注公众号, 发送消息的时候, 开发者在哪里能接收到这些消息, 并做相应的回复呢?
答案是微信公众平台配置的 URL 的 post 请求, 如果说该 URL 的 get 请求是为了配置用的, 那么 post 请求就是为了处理用户信息.
来看下面一段代码
- var parseString = require('xml2js').parseString;
- server.post("/", function (req, res) {
- try {
- var buffer = [];
- // 监听 data 事件 用于接收数据
- req.on('data', function (data) {
- buffer.push(data);
- });
- // 监听 end 事件 用于处理接收完成的数据
- req.on('end', function () {
- // 输出接收完成的数据
- parseString(Buffer.concat(buffer).toString('utf-8'), { explicitArray: false }, function (err, result) {
- if (err) {
- // 打印错误信息
- console.log(err);
- } else {
- // 打印解析结果
- result = result.xml;
- var toUser = result.ToUserName; // 接收方微信
- var fromUser = result.FromUserName;// 发送仿微信
- // 判断是否是事件类型
- if (result.Event) {
- // 处理事件类型
- switch (result.Event) {
- case "subscribe":
- // 关注公众号
- break;
- default:
- }
- } else {
- // 处理消息类型
- switch (result.MsgType) {
- case "text":
- // 处理文本消息
- break;
- case "image":
- // 处理图片消息
- break;
- case "voice":
- // 处理语音消息
- break;
- case "video":
- // 处理视频消息
- break;
- case "shortvideo":
- // 处理小视频消息
- break;
- case "location":
- // 处理发送地理位置
- break;
- case "link":
- // 处理点击链接消息
- break;
- default:
- }
- }
- }
- })
- });
- } catch (err) {
- res.send(err);
- }
- });
通过上面这段代码, 可以看出, 所有的消息处理都是在一个 post 中处理, 大致的流程是服务端会接收一段固定格式 xml 的字符串, 具体格式如下:
- <xml>
- <ToUserName><![CDATA[${toUser}]]></ToUserName> // 接收方
- <FromUserName><![CDATA[${fromUser}]]></FromUserName> // 发送方
- <CreateTime>${new Date().getTime()}</CreateTime> // 发送时间
- <Event><![CDATA[VIEW] ]></Event> // 事件类型
- <MsgType><![CDATA[text]]></MsgType> // 消息类型
- <Content><![CDATA[${content}]]></Content> // 内容
- </xml>;
当接收消息处理完成后, res.send(xml) 发送数据的时候也是要一个 xml 格式的数据, 要注意的一点是, ToUserName 和 FromUserName 不要弄错就可以了! 具体的文档有详细的解释, 文档戳这里哦;
好了, 今天的内容就讲到这里了, 剩下还有一些关于生成 access_token, 还有如何调用 JS-sdk 的内容过两天更新吧!
小弟这里有一份 react 后台管理脚手架模版, 有需要的自取 戳我, 戳我, 戳我, GitHub https://github.com/LemonTree-shine/manage
来源: https://juejin.im/post/5be3af8ae51d4554b54b0a0d