使用Natapp本地调试微信公众号H5_微信公众平台测试号接口配置信息提交没反应 natapp-CSDN博客

本文链接：https://blog.csdn.net/LilltleNiZi/article/details/122027894

使用Natapp本地调试微信公众号H5

- 首要解决内网渗透的问题

过去的周五简直就是我人生的低谷。本来要上线的一个公众号H5报名功能，结果因为我在最后交出的时候出问题了导致周末不能用，难过死了。因为第一次接触到公众号授权，可是本地无法调试这个授权功能，每次都是要盲写然后就丢给后台部署，有问题我也无法很快定位到。所以在周末决定我一定要找出优秀的解决办法，避免以后再出现这样的错误了。

首要解决内网渗透的问题

调试授权的时候，在正式的公众号里设置的回调域名是不能使用ip的，所以就需要把我们本地映射成为域名。看了下知乎是比较推荐花生壳和Natapp的。不过看到花生壳虽然免费但是需要8元巨款的认证费，我果断放弃了，选择了Natapp。Natapp有个免费的测试通道，不过只能是http,想要https是需要收费的。刚好！！！授权不需要一定是http。很棒，接下来就开搞啦。

1. 下载Natapp [link] (https://natapp.cn/)

下载后直接解压到你想要的目录里，然后并且在同级目录下新增一个config.ini 的配置文件，用来存你启动natapp的authToken

在这里插入图片描述
config.ini的配置如下

	[default]
    authtoken=xxxxxxxxx //这里就要写入你的  authtoken
    clienttoken=
    log=none                        
    loglevel=ERROR                  
    http_proxy=

2.获取 authtoken

先在Natapp官网上选择免费通道选项上的立即注册，注册完之后就可以进入到个人中心，选择购买隧道的第一个选项就是免费隧道了，然后配置你的项目内网地址以及端口号
在这里插入图片描述

在这里插入图片描述

3.启动Natapp

在natapp的目录下打开控制台，输入./natapp 就可获取映射地址

./natapp

在这里插入图片描述
但是有个问题是我的项目路由方式是hash，路径上带有#，可是在natapp上配置就只能配置ip 跟端口的，你直接从 http://hna49v.natappfree.cc 就是访问到 127.0.0.1:8080 而不能到 127.0.0.1:8080/#/，因此就只能把hash模式改为history了，这样就不会再带了个#

4 将域名配置到公众号里的回调域名

在这里插入图片描述

4.在浏览器输入你的域名能够访问到本地项目就代表已经配置完成啦

在这里插入图片描述

OK 接下来就可以测试授权啦

5.配置重定向路径redirect_uri


	url = 'http://hna49v.natappfree.cc'+ page + '?user_id=' + 
	link = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx22134d04ba63389c&redirect_uri=' + encodeURIComponent(url) + '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect';
    window.location.href = link;