网络穿透,实现本地开发环境测试微信公众号(1)

1,758 阅读4分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第26天,点击查看活动详情


1.写在前面

有些时候,我们需要开发一个微信公众号,可能需要用到微信的一些api(JS-SDK的能力)。

例如:微信扫一扫拍照或从手机相册中选图接口

当然啦,还有很多JS-SDK的api,详情可查看微信公众号的文档:点击查看

image.png

可以看到,在使用JS-SDK前,需要进行上面这5个步骤

可以很多人,就很纳闷了,我一个本地开发环境,哪里搞域名绑定呢?

这就导致了,很多时候,一个开发人员写好了功能代码,但是没有经过测试。只能部署到线上环境,才能进行测试。

那这个开发人员,多少心里是没有底的,毕竟谁也不能保证,自己写的代码,是不会出现bug的吧。

哈哈,反正,我也不太敢保证啦!!!T_T

那我们今天,就来分享一个工具,可以让我们在本地开发环境,也能进行微信公众号的测试。

那就是网络传统工具natapp,可以将我们本地环境的服务向外暴露,使得微信服务器能访问到我们本地电脑的服务。

来自百度百科的解析如下:

内网穿透,也即 NAT 穿透,进行 NAT 穿透是为了使具有某一个特定源 IP 地址和源端口号的数据包不被 NAT 设备屏蔽而正确路由到内网主机。

那就,开干吧!!!

2.natapp使用

natapp官网:点击查看、官方使用文档:点击查看

image.png

  • 我们先注册和登录。

image.png

  • 然后,我们可以购买一个免费隧道(白嫖,真香!!!)

image.png

  • 购买成功,记录authtoken

image.png

  • 客户端下载,选择windows版本

image.png

  • 运行natapp

image.png

image.png

image.png

这样就表示运行成功了

f67pgj.natappfree.cc就是,外网访问的域名。

这里要注意,每次重启natapp,这个域名都会变。

这里说一下,为什么我比较推荐使用这个natapp网络穿透工具?

因为这个生成的域名,在真实的手机微信中,也能访问,这就很强大了,手机也能进行测试。

其他的网络穿透工具,例如:网穿透 Ngrok路由侠

这里效果,都不怎么好,生成的域名,手机微信不能访问的。

当然,不知道还有没有其他的网络穿透工具,这里哥们已经很久没有深入研究这块。

有更好的网络穿透工具的,大家伙可以分享一下,让哥们也及时更新下工具,哈哈!!!

提到的网络穿透工具,可能说得不是很对,大家伙轻点喷!!!

image.png

3.微信公众号测试

上面已经成功启动了natapp,对本地的网络进行网络穿透了,那我们就可以进行微信公众号的测试了。

微信官方,也是有提供测试的入口:点击这里

image.png

  • 用自己的微信号,扫码登录即可

image.png

提交,校验通过即可。

  • 这个校验的接口,这里贴一下springboot的代码:
/**
 * 微信接入
 */
@RestController
@RequestMapping("/wechat/wx")
public class WeChatPortController {

    final Logger logger = LoggerFactory.getLogger(this.getClass());
    @Value("${wx.token:djys2020}")
    private String token;

    /**
     * 微信校验签名接入
     */
    @GetMapping
    public String check(String signature, String timestamp, String nonce, String echostr) {
        logger.info("微信-开始校验签名");
        logger.info("收到来自微信的 echostr 字符串:{}", echostr);

        //加密/校验流程如下:
        //1. 将token、timestamp、nonce三个参数进行字典序排序
        //2. 将三个参数字符串拼接成一个字符串进行sha1加密
        //3. 开发者获得加密后的字符串可与signature对比,标识该请求来源于微信
        // 1.排序
        if (token == null || timestamp == null || nonce == null) {
            logger.error("微信-签名校验失败");
            return "";
        }
        String sortString = sort(token, timestamp, nonce);
        // 2.sha1加密
        String myString = sha1(sortString);
        // 3.字符串校验
        if (myString != null && myString != "" && myString.equals(signature)) {
            logger.info("微信-签名校验通过");
            //如果检验成功原样返回echostr,微信服务器接收到此输出,才会确认检验完成。
            logger.info("回复给微信的 echostr 字符串:{}", echostr);
            return echostr;
        } else {
            logger.error("微信-签名校验失败");
            return "";
        }
    }

    /**
     * 排序方法
     *
     * @param token     Token
     * @param timestamp 时间戳
     * @param nonce     随机数
     * @return
     */
    public String sort(String token, String timestamp, String nonce) {
        String[] strArray = {token, timestamp, nonce};
        Arrays.sort(strArray);
        StringBuilder sb = new StringBuilder();
        for (String str : strArray) {
            sb.append(str);
        }

        return sb.toString();
    }

    /**
     * 将字符串进行sha1加密
     *
     * @param str 需要加密的字符串
     * @return 加密后的内容
     */
    public String sha1(String str) {
        try {
            MessageDigest digest = MessageDigest.getInstance("SHA-1");
            digest.update(str.getBytes());
            byte messageDigest[] = digest.digest();
            // 创建 16进制字符串
            StringBuffer hexString = new StringBuffer();
            // 字节数组转换为 十六进制 数
            for (int i = 0; i < messageDigest.length; i++) {
                String shaHex = Integer.toHexString(messageDigest[i] & 0xFF);
                if (shaHex.length() < 2) {
                    hexString.append(0);
                }
                hexString.append(shaHex);
            }
            return hexString.toString();

        } catch (NoSuchAlgorithmException e) {
            e.printStackTrace();
        }
        return "";
    }
}

image.png

校验微信signature等信息,校验通过,然后返回echostr即可

这里校验通过,就已经完成了第一步了。

image.png

剩下的,就留着下次再说了!!!^_^


好了,以上就是我个人的实操了。

个人理解,可能也不够全面,班门弄斧了。

好了,今天就先到这里了!!!^_^

如果觉得有收获的,帮忙点赞、评论、收藏一下呗!!!

image.png