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 相关文章推荐
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
May 10 Javascript
JqGrid web打印实现代码
May 31 Javascript
js实现tab切换效果实例
Sep 16 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
微信小程序 实例应用(记账)详解
Sep 28 Javascript
jQuery解析XML 详解及方法总结
Sep 28 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
JS html时钟制作代码分享
Mar 03 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
Ionic3 UI组件之autocomplete详解
Jun 08 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
Nov 20 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 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
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
php函数连续调用实例分析
2015/07/30 PHP
php intval函数用法总结
2019/04/14 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
用正则xmlHttp实现的偷(转)
2007/01/22 Javascript
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
python实现simhash算法实例
2014/04/25 Python
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
Python解析xml中dom元素的方法
2015/03/12 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
Python面向对象编程基础实例分析
2020/01/17 Python
python列表的逆序遍历实现
2020/04/20 Python
使用Python实现音频双通道分离
2020/12/25 Python
CSS3实现复选框动画特效示例代码
2016/09/27 HTML / CSS
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
应届毕业生自我鉴定范文
2013/12/27 职场文书
课改先进个人汇报材料
2014/01/26 职场文书
关于安全的演讲稿
2014/05/09 职场文书
自主招生推荐信范文
2014/05/10 职场文书
经销商年会策划方案
2014/05/29 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
三方协议书
2015/01/27 职场文书
应届生求职自荐信范文
2015/03/04 职场文书
入党介绍人考察意见
2015/06/01 职场文书