微信公众号开发配置和本地调试打通任杜二线

terry 2年前 (2023-09-22) 阅读数 97 #移动小程序

帮助打通微信公众号任杜二线开发工作。？下面的真实情况，我们可以有很多公众号，也可以有很多服务，所以我们可以把文件放在一个目录下，比如：/data/wechat_verify

我用了宝塔这个可视化界面功能，下载完成

微信公众号开发配置和本地调试打通任督二脉

然后编辑nginx配置。例如，如果我想通过 helloai.wiki/MP_verify_x... 使用此验证文件，我需要在原始 bash 复制代码下方添加此文件的路径定义。

微信公众号开发配置和本地调试打通任督二脉

后台设置公众号【JS接口安全域名】、【公司域名】、【网站授权域名】

微信公众号开发配置和本地调试打通任督二脉

2.开发信息配置

入口后台：设置与开发- 基础设置 - 公众号开发信息

复制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，也就是我们要使用的服务器地址

微信公众号开发配置和本地调试打通任督二脉

注1：如果输入命令没有响应，一定要科学上网
注2：这是一个临时网址。如果发现无法使用，请再次运行launch命令并获取新的URL。

有了UI和渗透现在设置好URL和Token就成功了

微信公众号开发配置和本地调试打通任督二脉

这意味着我们的本地服务和微信测试号已经打通了，我们可以开始开发业务接口了。

注意：建立本地连接后，将代码更新到服务器，然后按照相同步骤配置公众号正式后端环境信息。如果你无法配置公众号后台环境，那么问题肯定不在你的服务代码上。检查nginx、服务器等环境。

4。调试微信消息推送

上一步我们写了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);
    }
}

拿起手机，在设置页面关注测试账号

微信公众号开发配置和本地调试打通任督二脉