零知WIFI教程 - Portal 认证 示例

我们在一些公共场所经常会看到有很多开发WIFI热点，连接以后出现号码收集、广告页面等信息，这里很多就用到了Portal认证，在Portal认证页面进行拓展显示广告、联系方式等是很常用的。下面我们零知平台实现一个Portal认证页面显示零知官网信息的页面。

一、软件和硬件

硬件我们本次使用零知-ESP8266;

软件使用零知开发工具，自带示例：

二、方法步骤

（1）先在零知开发工具中打开CaptivePortal示例，或者复制下面的代码到零知开发工具中：


							
	/**********************************************************
	*    文件: x.ino      by 零知实验室([url]www.lingzhilab.com[/url])
	*    -^^- 零知开源，让电子制作变得更简单！ -^^-
	*    时间: 2019/05/28 12:22
	*    说明: 
	************************************************************/
	  
	#include <ESP8266WiFi.h>
	#include <DNSServer.h>
	#include <ESP8266WebServer.h>
	  
	const byte DNS_PORT = 53;
	IPAddress apIP(192, 168, 1, 1);
	DNSServer dnsServer;
	ESP8266WebServer webServer(80);
	  
	String responseHTML = ""
	                      "<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01//EN\">\
	<html>\
	  <head>\
	    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\
	    <style type=\"text/css\">\
	    ...\
	    </style>\
	    <body>\
	<div class=\"oc\">\
	  <div class=\"ic\">\
	    <form action=\"/\" method=\"post\">\
	      <input type=\"hidden\" name=\"testing\" value= \"www.lingzhilab.com\">\
	      <input type=\"hidden\" name=\"haha\" value=\"12291a0aff04200a\">\
	      <input type=\"hidden\" name=\"answer\" value=\"0\">\
	      <h1 class=\"logo\">\
	        欢迎访问零知实验室\
	      </h1>\
	      <p>\
	      零知开源是一个国内软硬件开源......\
	      </p>\
	      <h2>\
	        是否前往零知实验室官网\
	      </h2>\
	      <div class=\"fec\">\
	        <input type=\"submit\" value= \"是\" onclick=\"sb('1')\">\
	        <input type=\"submit\" value= \"否\" onclick=\"sb('0')\">\
	      </div>\
	    </form>\
	   </div>\
	   </div>\
	   <script>\
	     function sb(val) {\
	       document.forms[0].answer.value = val;\
	       document.forms[0].submit();\
	      }\
	    </script>\
	  </body>\
	</html>";
	  
	void setup() {
	  WiFi.mode(WIFI_AP);
	  WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
	  WiFi.softAP("DNSServer CaptivePortal example");
	  
	  // if DNSServer is started with "*" for domain name, it will reply with
	  // provided IP to all DNS request
	  dnsServer.start(DNS_PORT, "*", apIP);
	  
	  // replay to all requests with same HTML
	  webServer.onNotFound([]() {
	    webServer.send(200, "text/html", responseHTML);
	  });
	  webServer.begin();
	}
	  
	void loop() {
	  dnsServer.processNextRequest();
	  webServer.handleClient();
	}

（2）验证后上传代码到零知-ESP8266开发板；

（3）在上传后，我们可以看到电脑的wifi网络出现如下热点：

（4）我们连接上它以后，浏览器就会弹出如下窗口：

同时我们访问192.168.1.1，同样是该页面，这个程序中设置的是一致的。