【胎教级】微信公众号开发配置

🧑‍💻
推荐全栈学习资源:
  • Next.js 中文文档:样式和官网一样的中文文档,创造沉浸式Next.js中文学习体验。
  • 《Chrome插件全栈开发》:真实出海项目的实战教学课,讲解Chrome插件和Next.js端的全栈开发,帮助你半个月内成为全栈出海工程师。
  • 这篇文章可以帮你打通微信公众号开发任督二脉。

    一、JS域名验证

    入口在公众号后台:设置与开发 - 公众号设置 - 功能设置 - JS接口安全域名

    界面会提示需把一个校验文件上传到域名目录下

    01.png

    实际场景中,我们可能有很多个公众号和很多个服务,所以我们可以把文件统一放到一个目录下,如:/data/wechat_verify

    我使用了宝塔,可视化界面操作,上传完成

    02.png

    然后修改nginx配置,比如我想要通过 https://weijunext.com/MP_verify_xxxxxxx.txt 访问这个校验文件,我就需要在原有的配置下添加这个文件的路径配置

    server {
        listen 443 ssl http2;
        server_name weijunext.com;
        ……
     
        # nginx是就近原则,匹配到即执行,所以这个配置要写在txt后缀配置前面才可以
        location = /MP_verify_xxxxxxxxxxxxxx.txt {
            root /data/wechat_verify;
        }
     
        # 如果你把校验文件放到下面这个配置的路径,那就不用加上面的配置了
        # 至于我为什么不放在这里,因为我怕public被我更新了
        location ~* \\.(txt|xml)$ {
            root /data/xxxxx/public;
        }
        ……
    }
     

    修改完nginx配置,重启一下才会生效

    03.png

    在公众号后台,把【JS接口安全域名】、【业务域名】和【网页授权域名】都配置上

    04.png

    二、开发信息配置

    入口在公众号后台:设置与开发 - 基本配置 - 公众号开发信息

    复制appid、appsecret并妥善保存;设置IP白名单,就是我们要部署服务的那台服务器的IP

    三、服务器配置

    在实际业务开发中,我们可能需要接受微信的消息推送(如:用户关注、用户取消关注等),这就需要我们配置自己服务器、并且提供对应接口给微信。入口在公众号后台:设置与开发 - 基本配置 - 服务器配置。

    这一步一定要写好接口部署后再提交配置,否则微信调我们服务出现错误,就会当作校验错误了。

    为了以防万一,我们需要用测试账号在本地调试。测试账号入口:设置与开发 - 开发者工具 - 公众平台测试账号。

    根据微信开放文档:我们知道验证服务器需要先给微信提供一个 Get 接口,直接上代码

    第一步:写一个 Get 接口

    // 这是midwayjs框架的代码
     
    @Get('/verify_server')
      async verifyServer(@Query() query: any) {
        // 微信调用时会传入以下几个参数
        const signature = query.signature;
        const timestamp = query.timestamp;
        const nonce = query.nonce;
        const echostr = query.echostr;
        const apiToken = this.WX_API_TOKEN; // 你将在测试账号页面填写的Token
     
        // 解密信息
        if (checkSignature(signature, timestamp, nonce, apiToken)) {
          // 如果签名正确,原样返回echostr参数内容
          return echostr;
        } else {
          // 如果签名错误,返回错误信息
          throw new Error('');
        }
      }
     

    第二步:解密方法

    const crypto = require('crypto');
     
    export function checkSignature(signature: string, timestamp, nonce, token) {
      // 将token、timestamp、nonce三个参数按照字典序排序
      const arr = [token, timestamp, nonce].sort();
      // 将排序后的参数拼接起来
      const str = arr.join('');
      // 对拼接后的字符串进行sha1加密
      const sha1 = crypto.createHash('sha1');
      sha1.update(str);
      const result = sha1.digest('hex');
      return result === signature;
    }
     

    接口准备好了之后,就可以去填写配置了。但是,现在是在本地开发,我们得想办法让微信调用到本地的服务,这时候就需要内网穿透工具来帮助我们了。

    我使用的穿透工具是localtunnel,使用方法很简单:

    # 全局安装:
    npm install –g localtunnel
     
    # 启动服务,3000替换成你的服务的端口,
    lt --port 3000
     

    代理成功后就会看到代理的url,这就是我们要使用的服务器地址了

    05.png

    注1:如果输入命令没有反应,那么就是需要科学上网

    注2:这是一个临时url,如果发现无法使用了,重新执行启动命令,获取一个新的url就可以

    有了接口和穿透,现在配置一下 URL 和 Token,就能成功了

    06.png

    这样就说明我们本地服务和微信测试账号打通了,可以开始开发业务接口了。

    注:本地打通后,把代码更新到服务器上,再按相同的步骤去配置公众号后台正式环境的信息就可以。如果公众号后台正式环境无法配置成功,问题肯定不在你的服务代码中,请排查nginx、服务器等环境。

    四、调试微信消息推送

    上一步我们写一个 Get 接口,后台也配置了一个 URL,但是根据文档,我们可以知道,微信消息推送也是往我们配置的 URL 发送,但是是 Post 方法,所以我们只需要提供一个同名的 Post 方法来接收就可以了。

    // utils/xml2json.ts
    // 服务器和微信交互的信息要用xml格式,这可不是JSer的菜,所以我们先来写一下xml和json的转换方法
     
    import { parseString, Builder } from 'xml2js';
     
    export function xml2json(xml: string): any {
      let result: any;
      parseString(xml, { mergeAttrs: true }, (err, res) => {
        console.log(xml, res);
        result = res.xml;
      });
      return result;
    }
     
    export function json2xml(json: any): any {
      const builder = new Builder();
      const xml = builder.buildObject({ xml: json });
      return xml;
    }
     
    @Post('/verify_server')
      async wxMessage(@Body() body: any) {
        try {
          const json = await xml2json(body);
          const gzhId = json.ToUserName[0];
          const wxOpenId = json.FromUserName[0];
          // const time = json.CreateTime[0]; // 10位时间戳
          // const msgId = json.MsgId[0];
     
          const msgType = json.MsgType[0];
          let replyMessage = {};
     
          console.log(json, gzhId, wxOpenId, msgType);
     
          // 可以根据推送事件类型去做处理,下面代码只演示文字消息
          if (msgType === 'text') {
            replyMessage = {
                FromUserName: gzhId,
                ToUserName: wxOpenId,
                MsgType: 'text',
                Content: '你好,测试账号回复成功了',
                CreateTime: new Date().valueOf(),
            };
          }
          const xmlMessage = await json2xml(replyMessage);
          return xmlMessage;
        } catch (e) {
          console.log(e);
        }
    }
     

    拿起你的手机,关注配置页的测试账号

    07.png

    然后给账号发一条消息,就可以收到代码里写的回复了

    08.png

    至此配置和本地调试打通,可以开始开发正式的业务逻辑了。

    结语

    要做微信开发,繁琐的配置和本地调试总是会耗费很多时间精力,特此写一篇文章记录配置和调试步骤,我称之为“打通微信公众号开发任督二脉”,打通后就是大家熟悉的业务开发了,希望这篇文章对大家有用。