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

首要解决内网渗透的问题
- 1. 下载Natapp [link] (https://natapp.cn/)
- 2.获取 authtoken
- 3.启动Natapp
- 4 将域名配置到公众号里的回调域名
- 4.在浏览器输入你的域名能够访问到本地项目就代表已经配置完成啦
- 5.配置重定向路径redirect_uri

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

首要解决内网渗透的问题

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

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

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

config.ini的配置如下

 [default]authtoken=xxxxxxxxx //这里就要写入你的  authtokenclienttoken=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;

点一下，出现授权页了，Nice!（要用微信开发者工具调试哦）

同理微信支付消息推送等等其它接口权限的调试也是可以使用该方法。发现使用公众平台的测试号，其实也是可以方便地做开发调试的，