微信公众号本地开发调试 - 无公网IP,内网穿透(一)

本文涉及的产品
.cn 域名,1个 12个月
简介: 微信公众号本地开发调试 - 无公网IP,内网穿透

前言


在微信公众号开发中,微信要求开发者需要拥有自己的服务器资源来响应微信发送的token验证,这个服务器只能通过域名访问,不能使用ip地址来进行访问,如果购买服务器,再购买域名,将是一笔比较大的开销,如果能将本地服务暴露出去,再使用域名去访问,不仅能简化配置,还能减少开销,达到快速开发的效果。


幸运的是,Cpolar帮您搞定这一点。 启动Cpolar并将隧道的URL粘贴到微信公众号对接服务器的URL字段中,完成!


转载自cpolar极点云文章 微信公众号开发:对接本地开发环境【内网穿透】


1. 配置本地服务器


创建本地服务,这里以java服务为例,环境配置:


  • JDK1.8
  • maven
  • springboot
  • tomcat

根据微信开发者文档的接入指南中要求,对微信的发送的get请求参数进行加密对比


image.png


在springboot服务controller编写一个微信验证的接口,根据要求获取微信传入的参数进行处理


/**
 * 微信服务调用接口
 */
@Controller
@RequestMapping("/wechat")
public class WeChatTest {
    private static String wxToken="flzabc123";
    @GetMapping("")
    public void weChatTestV(HttpServletRequest request, HttpServletResponse response) {
        // 1、验证消息的确来自微信服务器
        String signature = request.getParameter("signature");
        String timestamp = request.getParameter("timestamp");
        String nonce = request.getParameter("nonce");
        String echostr = request.getParameter("echostr");
        //将微信echostr返回给微信服务器
        try(OutputStream os = response.getOutputStream()) {
            String sha1 = getSHA1(wxToken, timestamp, nonce, "");
            //和signature进行对比
            if (sha1.equals(signature)){
            // 返回echostr给微信
                os.write(URLEncoder.encode(echostr, "UTF-8").getBytes());
                os.flush();
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    /**
     * 用SHA1算法生成安全签名
     *
     * @param token     票据
     * @param timestamp 时间戳
     * @param nonce     随机字符串
     * @param encrypt   密文
     * @return 安全签名
     * @throws Exception
     */
    public static String getSHA1(String token, String timestamp, String nonce, String encrypt) throws Exception {
        try {
            String[] array = new String[]{token, timestamp, nonce, encrypt};
            StringBuffer sb = new StringBuffer();
            // 字符串排序
            Arrays.sort(array);
            for (int i = 0; i < 4; i++) {
                sb.append(array[i]);
            }
            String str = sb.toString();
            // SHA1签名生成
            MessageDigest md = MessageDigest.getInstance("SHA-1");
            md.update(str.getBytes());
            byte[] digest = md.digest();
            StringBuffer hexstr = new StringBuffer();
            String shaHex = "";
            for (int i = 0; i < digest.length; i++) {
                shaHex = Integer.toHexString(digest[i] & 0xFF);
                if (shaHex.length() < 2) {
                    hexstr.append(0);
                }
                hexstr.append(shaHex);
            }
            return hexstr.toString();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return "";
    }
}


编写好接口后,接着启动服务,启动springboot,这里暴露的是8080端口


image.png


2. 内网穿透


这里我们使用cpolar内网穿透,将本地服务映射到公网,无需公网ip,也不用设置路由器,操作非常简单。【cpolar.cn已备案】


2.1 下载安装cpolar内网穿透


cpolar官网:https://www.cpolar.com/


访问cpolar官网,注册一个账号,并下载安装cpolar客户端。详细可以参考文档教程进行下载安装.


image.png


2.2 创建隧道


cpolar安装成功后,我们在浏览器上访问本地9200端口,登录Cpolar的web ui界面:http://localhost:9200。


点击左侧仪表盘的隧道管理——创建隧道,我们来创建一条隧道,将在本地8080端口下的web服务映射到公网:


  • 隧道名称:可自定义,注意不要与已有隧道名称重复
  • 协议:http协议
  • 本地地址:80
  • 域名类型:免费选择随机域名
  • 地区:选择China VIP

点击创建


image.png


提示隧道创建成功后,页面自动跳转至隧道列表,可以看到刚刚创建成功的tunnel-1隧道,状态active,表示为正常在线,注意无需再次点击启动。


点击左侧仪表盘的状态——在线隧道列表,可以看到刚刚创建的隧道已经有生成了相应的公网地址,一个http协议,一个https协议(免去配置ssl证书的繁琐步骤),均可以访问到本地web服务,复制公网地址。


image.png


3. 测试公网访问


打开微信公众平台公众号页面,点击下面的基本配置,在URL框中填写复制的公网地址,


image.png


出现提交成功表示验证成功


image.png


点击启用服务器配置,出现操作成功表示启用成功

image.png


目录
相关文章
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
573 7
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
697 1
|
2月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
125 7
ly~
|
3月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
81 6
|
2月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
219 1
|
2月前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
74 5
|
2月前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【10月更文挑战第3天】微信小程序作为新兴应用形态,凭借便捷体验与社交传播能力,成为企业拓展业务的新渠道。本文探讨了微信小程序全栈开发中的PWA技术应用,包括离线访问、后台运行、桌面图标及原生体验等方面,助力开发者提升小程序性能与用户体验。PWA技术在不同平台的兼容性、性能优化及用户体验是实践中需注意的关键点。
67 5
|
2月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
699 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
2月前
|
存储 小程序 安全
微信的开发管理都需要配置什么?
【10月更文挑战第17天】微信的开发管理都需要配置什么?
32 0
|
2月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
384 0