手机连上WiFi后自动弹出页面原理探究及使用8266实现

Captive Portal for ESP

---

强制网络门户（captive portal）就是手机在连接上某个wifi的时候，自动弹出一个页面，这个页面通常是要我们输入账号密码才能连接网络。前几年wifi还没有大面积普及的时候，在商场或餐厅提供的wifi常常使用这个功能。现在wifi设备多了，这个功能逐渐被遗忘了，但是在物联网方面仍然有一定的用处，比如手机连上wifi自动后弹出配网页面。

 

原理

---

手机连上wifi后，但不能保证能连接到互联网，所以手机连上某个wifi的第一件事就是检查下这个wifi是否有网。不同品牌的手机检查网络方式略有不同，但基本上大同小异。一般是向某个固定的地址发起一个HTTP请求，如果请求到正确的数据，则证明这个wifi可以正常连接互联网，如果请求不到数据，或者请求到了错误的数据，则说明这个wifi不能正常连接互联网。

 

上述检查网络的过程可分为三种情况：

 

• 请求到正常的数据(该wifi可直接上网)

• 没有请求到数据(该wifi无法连接网络)

• 请求到错误(非手机期待)的数据(可能需要认证才能连接网络)

 

如果遇到上述第三种情况，那么手机就会打开相应的页面，就是所谓的自动弹出页面。

 

要想实现自动弹出页面，就要制造上述的第三种情况。第一步要捕获手机发起的HTTP请求，第二步向手机返回非手机期待的数据。

 

HTTP请求的过程如上图所示，首先通过DNS获取服务器的IP地址，然后再向服务器发起HTTP请求。

 

以苹果手机为例，连上某个wifi后会访问如下页面

http://captive.apple.com/hotspot-detect.html

 

访问过程如下，先向DNS服务器发起DNS请求，获得captive.apple.com对应的IP地址，然后再向刚刚获取到的地址发送HTTP请求，如果DNS请求失败，则不会（也不能）发起Http请求。

 

手机连上ESP8266模块后，默认的DNS地址就是模块的地址（一般是192.168.4.1），所以我们要在模块上建立一个DNS服务器，响应手机发来的DNS请求，将所有的域名都解析到模块本身的IP地址上，那么手机访问http://captive.apple.com/hotspot-detect.html就相当于访问http://192.168.4.1/hotspot-detect.html，我们的模组就能成功的捕获到手机发来的HTTP请求了。（这种做法通常叫做DNS拦截）。

 

捕获到HTTP请求后，还要做相应的HTTP响应，才能让手机弹出页面。所以模组还需要建立一个HTTP服务器，相应手机发来的HTTP请求。HTTP底层协议是TCP，默认使用的是80端口，我们只需要建立一个TCP服务器，监听80端口，收到数据后做相应的回复即可，关于更具体的HTTP协议的可参考另一篇文章，HTTP协议详解及实践。

 

代码实现

---

有了上面的理论指导，代码实现起来并不复杂。具体代码我已上传到GitHub（https://github.com/ospanic/Captive_Portal_ESP），可同时适用于ESP8266和ESP32。项目结构如下图所示：

由上图可以看出，程序中主要实现了一个DNS服务器和HTTP服务器，主函数核心逻辑代码代码如下：

 

逻辑很简单，初始化wifi为AP功能后，开启DNS服务及HTTP服务。

 

实际效果

---

编译后烧录到ESP8266模组，手机搜索名称为“自动弹出页面”的wifi：

连接wifi成功后将自动弹出下图所示页面：

模块运行日志如下图所示：

 

上图中的白色文字，是手机发起的DNS请求，绿色字体中包含HTTP请求的信息。通过日志可以看到不同品牌的手机在自动弹出页面的过程中都发起了那些请求。

如果您觉得有用，点击上图的二维码关注一下呗！