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 相关文章推荐
Javascript客户端脚本的设计和应用
Aug 21 Javascript
jquery的键盘事件修改代码
Feb 24 Javascript
js写的评论分页(还不错)
Dec 23 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
Node.js 使用request模块下载文件的实例
Sep 05 Javascript
React router动态加载组件之适配器模式的应用详解
Sep 12 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
countup.js实现数字动态叠加效果
Oct 17 Javascript
JS实现导航栏楼层特效
Jan 01 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 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
php数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
Function eregi is deprecated (解决方法)
2013/06/21 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
JS实现六边形3D拖拽翻转效果的方法
2016/09/11 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
js实现表单项的全选、反选及删除操作示例
2020/06/05 Javascript
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
python利用tkinter实现屏保
2019/07/30 Python
Django 路由层URLconf的实现
2019/12/30 Python
Python列表解析操作实例总结
2020/02/26 Python
python regex库实例用法总结
2021/01/03 Python
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
2014村务公开实施方案
2014/02/25 职场文书
团日活动总结书格式
2014/05/08 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP
Python基础学习之奇异的GUI对话框
2021/05/27 Python