Koa2微信公众号开发之本地开发调试环境搭建


Posted in Javascript onMay 16, 2018

最近沉迷吃鸡不能自拔,好久没更新文章了。后续将陆续完善《Koa2微信公众号开发》。

一、简介

关于微信公众号的介绍就省略了,自行搜索。注册过程也不说了。我们会直接注册测试号来实现代码。这将会是个全面讲解微信公众号开发的系列教程。本篇是该系列的第一篇,本地开发环境搭建以及接入微信。

在开始之前最好去看看开发者文档微信公众平台技术文档

二、本地开发调试环境搭建

2.1 开发环境

  1. MacOs
  2. Node v8.9.1
  3. Koa2

2.2 微信公众平台开发的基本原理

我们先来看看微信公众平台开发的基本原理:在进行微信开发的时候,需要在我们在自己的服务器上部署服务对微信消息进行处理。微信服务器就相当于一个转发服务器。终端(手机、Pad等)发起请求至微信服务器,微信服务器然后将请求转发给自定义服务(这里就是我们的具体实现)。服务处理完毕,然后转发给微信服务器,微信服务器再将具体响应回复到终端,通信协议为:HTTP;数据格式为:XML。

Koa2微信公众号开发之本地开发调试环境搭建

我们的服务需要做的就是对请求做出响应,解析XML,进行相应的处理后再返回特定的XML。

2.3 ngrok微信本地开发

这儿我们了解到了接入微信开发需要一个自己的响应服务器,我们可以购买服务器或者新浪云百度云之类的服务。但是在我们开发阶段这样做是很麻烦的,我们需要搭建一个好用的本地调试环境,将内网映射出去,让外网能够访问的。

这儿推荐使用Ngrok服务。win、mac都能方便使用,而且稳定,外网域名是固定的。

打开它的网站www.ngrok.cc/注册登录然后开通隧道。同时你需要下载相应的客户端

在win中这是个批处理文件,运行它然后填入相应的隧道id回车即可,在Mac中命令行执行如下命令。

./sunny clientid 隧道id

运行成功会返回ngrok换发域名。

Koa2微信公众号开发之本地开发调试环境搭建

更多参见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、依据接口文档实现业务逻辑

我们登录微信公众平台接口测试帐号https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login,登录后填写接口配置信息*(你的url地址以及token)*,这时肯定不能配置成功的。我们需要验证服务器地址的有效性,开发者提交信息后,微信服务器将发送GET请求到填写的服务器地址URL上,GET请求携带参数如下表所示:

参数 描述
signature 微信加密签名,signature结合了开发者填写的token参数和请求中的timestamp参数、nonce参数。
timestamp 时间戳
nonce 随机数
echostr 随机字符串

开发者通过检验signature对请求进行校验。若确认此次GET请求来自微信服务器,原样返回echostr参数内容,则接入生效,成为开发者成功,否则接入失败。加密/校验流程如下:

  1. 将token、timestamp、nonce三个参数进行字典序排序
  2. 将三个参数字符串拼接成一个字符串进行sha1加密
  3. 开发者获得加密后的字符串可与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)

进入测试号的页面重新提交接口配置信息,你将会看见一个一闪而过的配置成功过提示框。恭喜,这标志着你正式跳进了微信开发的坑了。

本篇文章到此结束,下一节将讲解公众号的消息回复功能

参考链接

微信公众平台开发者文档
公众号测试号
Ngrok
koa
supervisor

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
javascript判断chrome浏览器的方法
Mar 26 Javascript
JQuery实现table行折叠效果以JSON做数据源
May 26 Javascript
bootstrap data与jquery .data
Jul 07 Javascript
用js传递value默认值的示例代码
Sep 11 Javascript
JavaScript常用验证函数实例汇总
Nov 25 Javascript
JS常用知识点整理
Jan 21 Javascript
JS实现复制内容到剪贴板功能
Feb 05 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
一文了解Vue中的nextTick
May 06 Javascript
浅谈vue的第一个commit分析
Jun 08 Javascript
小程序实现上下切换位置
Nov 16 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 #Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 #Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
May 16 #Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
May 16 #Javascript
解决Mac node版本升级失败的问题
May 16 #Javascript
在Mac下彻底卸载node和npm的方法
May 16 #Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 #Javascript
You might like
用php获取远程图片并把它保存到本地的代码
2008/04/07 PHP
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
php实现建立多层级目录的方法
2014/07/19 PHP
一个高效的JavaScript压缩工具下载集合
2007/03/06 Javascript
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
javascript中比较字符串是否相等的方法
2013/07/23 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
JS实现的缓冲运动效果示例
2018/04/30 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
python解析中国天气网的天气数据
2014/03/21 Python
关于python的list相关知识(推荐)
2017/08/30 Python
python 匹配url中是否存在IP地址的方法
2018/06/04 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
python实现udp传输图片功能
2020/03/20 Python
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
大学四年学习的自我评价分享
2013/12/09 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书
锅炉工岗位职责
2015/02/13 职场文书
三好学生竞选稿
2015/11/21 职场文书
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS