ESP8266强制门户开发：连接用户自动跳转指定本地HTML页求助

现有代码问题 #

• 仅返回静态HTML内容，未添加自动跳转逻辑，页面中使用的[url]是论坛专用标签，浏览器无法识别触发跳转
• 未适配主流手机系统的 captive portal（强制门户）检测逻辑，可能导致连热点后不会自动弹出页面
• 未明确ESP的AP网段与目标miniweb服务器的连通性校验逻辑，可能出现跳转后无法打开页面的问题

修复后可直接使用的代码 #

#include <ESP8266WiFi.h>
#include <DNSServer.h>
#include <ESP8266WebServer.h>

const byte DNS_PORT = 53;
// 当前AP的IP和目标miniweb服务器在同一网段，配置无需修改
IPAddress apIP(192, 168, 0, 110);
DNSServer dnsServer;
ESP8266WebServer webServer(80);
const char* targetUrl = "http://192.168.0.200:8000/pombem.html";

// 如需先展示广告再跳转，使用该HTML，content="3"代表3秒后自动跳转，可自行修改数值
String adHtml = R"EOF(
<!DOCTYPE html><html lang='zh-CN'><head>
<meta name='viewport' content='width=device-width'>
<meta http-equiv="refresh" content="3; url=http://192.168.0.200:8000/pombem.html">
<title>游戏服务门户</title></head><body>
<h1>欢迎来到游戏服务门户</h1>
<p>你现在已接入专属游戏服务热点，即将跳转到服务页面...</p>
<p>如果没有自动跳转，请<a href="http://192.168.0.200:8000/pombem.html">点击这里</a></p>
<h2>服务支持</h2>
<p>如需咨询请联系：0787429007 / 0751726782</p>
<h2>我们提供以下游戏相关产品：</h2>
<ol>
<li>PS3 售价500,000乌干达先令</li>
<li>XBOX 360 售价450,000乌干达先令</li>
<li>各类掌机</li>
<li>PS4/PS3/PS2/XBOX等全系列游戏手柄</li>
</ol>
<h2>游戏资源覆盖：</h2>
<ol>
<li>PS3</li>
<li>PC</li>
<li>PS2</li>
<li>手机</li>
<li>XBOX 360</li>
</ol>
</body></html>
)EOF";

// 不需要广告页、要求直接跳转的话，取消下一行注释即可
// #define DIRECT_REDIRECT

void setup() {
  WiFi.mode(WIFI_AP);
  WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
  WiFi.softAP("JOHN POMBE"); //可自行修改热点名称

  // 劫持所有DNS请求到ESP自身
  dnsServer.start(DNS_PORT, "*", apIP);

  webServer.onNotFound([]() {
    #ifdef DIRECT_REDIRECT
      // 直接302重定向到目标页面
      webServer.sendHeader("Location", targetUrl, true);
      webServer.send(302, "text/plain", "");
    #else
      // 返回带自动跳转的广告页
      webServer.send(200, "text/html", adHtml);
    #endif
  });
  webServer.begin();
}

void loop() {
  dnsServer.processNextRequest();
  webServer.handleClient();
}

调试注意事项 #

• 烧录代码前先做连通性校验：用手机或电脑连接ESP热点，手动输入http://192.168.0.200:8000/pombem.html确认可以正常打开，排查miniweb服务器防火墙、网段配置问题
• 主流安卓、苹果设备连接热点后会自动检测强制门户，配置正确的情况下会自动弹出页面，无需用户手动打开浏览器
• 若部分设备跳转失败，可尝试把AP的IP段修改为192.168.4.1这类不常用网段，避免和用户原有保存的WiFi网段冲突

内容的提问来源于stack exchange，提问作者Bbira Johnson