devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

使用ai thinker esp32-cam制作一个局域网可登录服务器（网页控制esp32响应）----自动车之网页操控_esp32 http_server 加账户密码

作者：笔触狂放9 | 2024-04-22 23:53:19

赞

踩

esp32 http_server 加账户密码

代码更改WiFi账号密码后，写入ai thinker esp32-cam 板即可运行。登录调试串口输出的IP地址即可

  1. #include <WiFi.h>
  2. #include <WiFiClient.h>
  3. #include <WebServer.h>
  4.  
  5. const char* ssid     = "iamMT";
  6. const char* password = "meet2009";
  7.  
  8. WebServer server(80);
  9.  
  10. //Check if header is present and correct 检查收割台是否存在并正确
  11. bool is_authentified() {    //authentified 认证的
  12.   Serial.println("Enter is_authentified");
  13.   if (server.hasHeader("Cookie")) {
  14.     Serial.print("Found cookie: ");
  15.     String cookie = server.header("Cookie");
  16.     Serial.println(cookie);
  17.     if (cookie.indexOf("ESPSESSIONID=1") != -1) {
  18.       Serial.println("Authentification Successful");
  19.       return true;
  20.     }
  21.   }
  22.   Serial.println("Authentification Failed");
  23.   return false;
  24. }
  25.  
  26. //login page, also called for disconnect 登录页面，也称为断开连接
  27. void handleLogin() {  //第一个网页显示及事件响应函数
  28.   String msg = " \t\t";String msg_ = " \t\t";
  29.   if (server.hasHeader("Cookie")) {   //网页请求事件判断
  30.     Serial.print("Found cookie: ");
  31.     String cookie = server.header("Cookie");
  32.     Serial.println(cookie);
  33.   }
  34.   if (server.hasArg("DISCONNECT")) {    //点击超链接判断值
  35.     Serial.println("Disconnection");
  36.     server.sendHeader("Location", "/login");//定位到登录界面
  37.     server.sendHeader("Cache-Control", "no-cache");//清空文本框
  38.     server.sendHeader("Set-Cookie", "ESPSESSIONID=0");
  39.     server.send(301);//是用于在 Web 服务器上发送一个 HTTP 301 响应的代码。HTTP 301 响应表示页面已被永久移动到另一个位置，浏览器会自动跳转到新位置
  40.     return;
  41.   }
  42.   if(server.hasArg("SUBMIT")){ //登录按钮事件判断
  43.     if (server.hasArg("USERNAME") && server.hasArg("PASSWORD")) {
  44.       if (server.arg("USERNAME") == "admin" &&  server.arg("PASSWORD") == "admin") {    //server.arg("PASSWORD")获取文本框值
  45.         server.sendHeader("Location", "/");   //定位到主界面
  46.         server.sendHeader("Cache-Control", "no-cache");
  47.         server.sendHeader("Set-Cookie", "ESPSESSIONID=1");
  48.         server.send(301);//是用于在 Web 服务器上发送一个 HTTP 301 响应的代码。HTTP 301 响应表示页面已被永久移动到另一个位置，浏览器会自动跳转到新位置
  49.         Serial.println("Log in Successful");
  50.         return;
  51.       }
  52.       msg = "Wrong username/password! try again.";
  53.       Serial.println("Log in Failed");      //调试串口显示
  54.     }
  55.   }
  56.   if(server.hasArg("SUBMIT_test")){ //异登录按钮事件判断
  57.     if (server.hasArg("USERNAME") && server.hasArg("PASSWORD")) {
  58.       if (server.arg("USERNAME") == "admin" &&  server.arg("PASSWORD") == "admin") {    //server.arg("PASSWORD")获取文本框值
  59.         server.sendHeader("Location", "/test");   //定位到/test界面
  60.         server.sendHeader("Cache-Control", "no-cache");
  61.         server.sendHeader("Set-Cookie", "ESPSESSIONID=1");
  62.         server.send(301);//是用于在 Web 服务器上发送一个 HTTP 301 响应的代码。HTTP 301 响应表示页面已被永久移动到另一个位置，浏览器会自动跳转到新位置
  63.         Serial.println("Log in Successful");
  64.         return;
  65.       }
  66.       msg_ = "账号/密码错误，请重新输入!";
  67.       Serial.println("Log in Failed");      //调试串口显示
  68.     }
  69.   }
  70.   String content = "<html>\n<head>\n<meta  charset='UTF-8'>\n</head>\n";
  71.   content += "<body>\n<form action='/login' method='POST'><p style = 'font-size: 32px;'>To log in, please use : admin/admin<br>\n";//第一行文本
  72.   content += "User:<input type='text' name='USERNAME' placeholder='user name' style='width: 200px; height: 50px;font-size: 32px;'><br>\n";//第二行输入文本框
  73.   content += "Password:<input type='password' name='PASSWORD' placeholder='password' style='width: 200px; height: 50px;font-size: 32px;'><br>\n";//第三行文本框
  74.   content += "<input type='submit' name='SUBMIT' value='登录' style='width: 200px; height: 50px;font-size: 32px;'>" + msg + "<br>\n";//第四行按钮+第五行文本
  75.   content += "<input type='submit' name='SUBMIT_test' value='异登录' style='width: 200px; height: 50px;font-size: 32px;'>" + msg_+"</form><br>\n";   //<form action='/login_test' method='POST'>按钮事件
  76.   content += "You also can go </p><a href='/inline'>here</a>\n</body>\n</html>";//第六行文本+链接
  77.   server.send(200, "text/html", content);   //发送登录前页面配置
  78.   
  79. }
  80.  
  81. void handletest(){
  82.   String msg = " \t\t";
  83.   if (server.hasHeader("Cookie")) {   //网页请求事件判断
  84.     Serial.print("Found cookie: ");
  85.     String cookie = server.header("Cookie");
  86.     Serial.println(cookie);
  87.   }
  88.   if(server.hasArg("SUBMIT")){ //登录按钮事件判断
  89.     if (server.hasArg("PASSWORD")) {
  90.       if (server.arg("PASSWORD") == "admin") {    //server.arg("PASSWORD")获取文本框值
  91.         server.sendHeader("Location", "/login");   //定位到主界面
  92.         server.sendHeader("Cache-Control", "no-cache");
  93.         server.sendHeader("Set-Cookie", "ESPSESSIONID=1");
  94.         server.send(301);//是用于在 Web 服务器上发送一个 HTTP 301 响应的代码。HTTP 301 响应表示页面已被永久移动到另一个位置，浏览器会自动跳转到新位置
  95.         Serial.println("Log in Successful");
  96.         return;
  97.       }
  98.       msg = "密码输入错误，请重新输入！";
  99.       Serial.println("Log in Failed");      //调试串口显示
  100.     }
  101.   }
  102.   String content_test = "<html>\n<head>\n<p style'font-size: 32px;'></p>\n<meta  charset='UTF-8'>\n</head>\n";    //http-equiv='Content-Type' content='text/html'
  103.   content_test += "<body>\n<form action='/test' method='POST'><p style = 'font-size: 32px;'>To log out, please click button退出\n";  
  104.   content_test += "Password:<input type='password' name='PASSWORD' placeholder='password' style='width: 200px; height: 50px;font-size: 32px;'><br>\n";//第三行文本框
  105.   content_test += "<input type='submit' name='SUBMIT' value='退出' style='width: 200px; height: 50px;font-size: 32px;'>" + msg + "<br>\n</form></p></body>\n</html>";
  106.   server.send(200, "text/html", content_test);   //发送登录前页面配置
  107. }
  108.  
  109. //root page can be accessed only if authentification is ok 只有在身份验证正常的情况下才能访问根页面
  110. void handleRoot() {     //登录后网页
  111.   Serial.println("Enter handleRoot");
  112.   String header;
  113.   if (!is_authentified()) {
  114.     server.sendHeader("Location", "/login");
  115.     server.sendHeader("Cache-Control", "no-cache");
  116.     server.send(301);
  117.     return;
  118.   }
  119.   String content = "<html>\n<body>\n\n<H2>hello, you successfully connected to esp8266!</H2><br>\n";
  120.   if (server.hasHeader("User-Agent")) {
  121.     content += "<p style = 'font-size: 32px;'>the user agent used is : " + server.header("User-Agent") + "<br><br>\n";    //User-Agent网页头数据
  122.   }
  123.   content += "You can access this page until you <a href=\"/login?DISCONNECT=YES\">disconnect</a>\n</p></body>\n</html>";// <a 地址 >代表超链接跳转地址
  124.   server.send(200, "text/html", content);     //发送登录后页面配置
  125. }
  126.  
  127. //no need authentification 无需身份验证
  128. void handleNotFound() {
  129.   String message = "File Not Found\n\n";
  130.   message += "URI: ";
  131.   message += server.uri();
  132.   message += "\nMethod: ";
  133.   message += (server.method() == HTTP_GET) ? "GET" : "POST";
  134.   message += "\nArguments: ";
  135.   message += server.args();
  136.   message += "\n";
  137.   for (uint8_t i = 0; i < server.args(); i++) {
  138.     message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
  139.   }
  140.   server.send(404, "text/plain", message);    //发送页面配置
  141. }
  142.  
  143. void setup(void) {
  144.   Serial.begin(115200);
  145.   WiFi.mode(WIFI_STA);
  146.   WiFi.begin(ssid, password);
  147.   Serial.println("");
  148.  
  149.   // Wait for connection
  150.   while (WiFi.status() != WL_CONNECTED) {
  151.     delay(500);
  152.     Serial.print(".");
  153.   }
  154.   Serial.println("");
  155.   Serial.print("Connected to ");
  156.   Serial.println(ssid);
  157.   Serial.print("IP address: ");
  158.   Serial.println(WiFi.localIP());
  159.  
  160.  
  161.   server.on("/", handleRoot);
  162.   server.on("/login", handleLogin);
  163.   server.on("/test", handletest);  
  164.   server.on("/inline", []() {
  165.     server.send(200, "text/plain", "<p style = 'font-size: 32px;'>this works without need of authentification</p>");
  166.   });
  167.  
  168.   server.onNotFound(handleNotFound);
  169.   //here the list of headers to be recorded 这是要录制的标题列表
  170.   const char * headerkeys[] = {"User-Agent", "Cookie"} ;
  171.   size_t headerkeyssize = sizeof(headerkeys) / sizeof(char*);
  172.   //ask server to track these headers  要求服务器跟踪这些标头
  173.   server.collectHeaders(headerkeys, headerkeyssize);  //用于收集服务器响应的请求头
  174.   server.begin();
  175.   Serial.println("HTTP server started");
  176. }
  177.  
  178. void loop(void) {
  179.   // unsigned long t = millis();
  180.   server.handleClient();
  181.   // unsigned long tt = millis() - t;
  182.   // Serial.println(tt);
  183. }

//网页事件响应机制不清楚

#include <WiFi.h>

#include <WiFiClient.h>

#include <WebServer.h>

const char* ssid     = "iamMT";

const char* password = "meet2009";

WebServer server(80);

//Check if header is present and correct 检查收割台是否存在并正确

bool is_authentified() {    //authentified 认证的

  Serial.println("Enter is_authentified");

  if (server.hasHeader("Cookie")) {

    Serial.print("Found cookie: ");

    String cookie = server.header("Cookie");

    Serial.println(cookie);

    if (cookie.indexOf("ESPSESSIONID=1") != -1) {

      Serial.println("Authentification Successful");

      return true;

    }

  }

  Serial.println("Authentification Failed");

  return false;

}

//login page, also called for disconnect 登录页面，也称为断开连接

void handleLogin() {  //第一个网页显示及事件响应函数

  String msg = " \t\t";String msg_ = " \t\t";

  if (server.hasHeader("Cookie")) {   //网页请求事件判断

    Serial.print("Found cookie: ");

    String cookie = server.header("Cookie");

    Serial.println(cookie);

  }

  if (server.hasArg("DISCONNECT")) {    //点击超链接判断值

    Serial.println("Disconnection");

    server.sendHeader("Location", "/login");//定位到登录界面

    server.sendHeader("Cache-Control", "no-cache");//清空文本框

    server.sendHeader("Set-Cookie", "ESPSESSIONID=0");

    server.send(301);//是用于在 Web 服务器上发送一个 HTTP 301 响应的代码。HTTP 301 响应表示页面已被永久移动到另一个位置，浏览器会自动跳转到新位置

    return;

  }

  if(server.hasArg("SUBMIT")){ //登录按钮事件判断

    if (server.hasArg("USERNAME") && server.hasArg("PASSWORD")) {

      if (server.arg("USERNAME") == "admin" &&  server.arg("PASSWORD") == "admin") {    //server.arg("PASSWORD")获取文本框值

        server.sendHeader("Location", "/");   //定位到主界面

        server.sendHeader("Cache-Control", "no-cache");

        server.sendHeader("Set-Cookie", "ESPSESSIONID=1");

        server.send(301);//是用于在 Web 服务器上发送一个 HTTP 301 响应的代码。HTTP 301 响应表示页面已被永久移动到另一个位置，浏览器会自动跳转到新位置

        Serial.println("Log in Successful");

        return;

      }

      msg = "Wrong username/password! try again.";

      Serial.println("Log in Failed");      //调试串口显示

    }

  }

  if(server.hasArg("SUBMIT_test")){ //异登录按钮事件判断

    if (server.hasArg("USERNAME") && server.hasArg("PASSWORD")) {

      if (server.arg("USERNAME") == "admin" &&  server.arg("PASSWORD") == "admin") {    //server.arg("PASSWORD")获取文本框值

        server.sendHeader("Location", "/test");   //定位到/test界面

        server.sendHeader("Cache-Control", "no-cache");

        server.sendHeader("Set-Cookie", "ESPSESSIONID=1");

        server.send(301);//是用于在 Web 服务器上发送一个 HTTP 301 响应的代码。HTTP 301 响应表示页面已被永久移动到另一个位置，浏览器会自动跳转到新位置

        Serial.println("Log in Successful");

        return;

      }

      msg_ = "账号/密码错误，请重新输入!";

      Serial.println("Log in Failed");      //调试串口显示

    }

  }

  String content = "<html>\n<head>\n<meta  charset='UTF-8'>\n</head>\n";

  content += "<body>\n<form action='/login' method='POST'><p style = 'font-size: 32px;'>To log in, please use : admin/admin<br>\n";//第一行文本

  content += "User:<input type='text' name='USERNAME' placeholder='user name' style='width: 200px; height: 50px;font-size: 32px;'><br>\n";//第二行输入文本框

  content += "Password:<input type='password' name='PASSWORD' placeholder='password' style='width: 200px; height: 50px;font-size: 32px;'><br>\n";//第三行文本框

  content += "<input type='submit' name='SUBMIT' value='登录' style='width: 200px; height: 50px;font-size: 32px;'>" + msg + "<br>\n";//第四行按钮+第五行文本

  content += "<input type='submit' name='SUBMIT_test' value='异登录' style='width: 200px; height: 50px;font-size: 32px;'>" + msg_+"</form><br>\n";   //<form action='/login_test' method='POST'>按钮事件

  content += "You also can go </p><a href='/inline'>here</a>\n</body>\n</html>";//第六行文本+链接

  server.send(200, "text/html", content);   //发送登录前页面配置

}

void handletest(){

  String msg = " \t\t";

  if (server.hasHeader("Cookie")) {   //网页请求事件判断

    Serial.print("Found cookie: ");

    String cookie = server.header("Cookie");

    Serial.println(cookie);

  }

  if(server.hasArg("SUBMIT")){ //登录按钮事件判断

    if (server.hasArg("PASSWORD")) {

      if (server.arg("PASSWORD") == "admin") {    //server.arg("PASSWORD")获取文本框值

        server.sendHeader("Location", "/login");   //定位到主界面

        server.sendHeader("Cache-Control", "no-cache");

        server.sendHeader("Set-Cookie", "ESPSESSIONID=1");

        server.send(301);//是用于在 Web 服务器上发送一个 HTTP 301 响应的代码。HTTP 301 响应表示页面已被永久移动到另一个位置，浏览器会自动跳转到新位置

        Serial.println("Log in Successful");

        return;

      }

      msg = "密码输入错误，请重新输入！";

      Serial.println("Log in Failed");      //调试串口显示

    }

  }

  String content_test = "<html>\n<head>\n<p style'font-size: 32px;'></p>\n<meta  charset='UTF-8'>\n</head>\n";    //http-equiv='Content-Type' content='text/html'

  content_test += "<body>\n<form action='/test' method='POST'><p style = 'font-size: 32px;'>To log out, please click button退出\n";  

  content_test += "Password:<input type='password' name='PASSWORD' placeholder='password' style='width: 200px; height: 50px;font-size: 32px;'><br>\n";//第三行文本框

  content_test += "<input type='submit' name='SUBMIT' value='退出' style='width: 200px; height: 50px;font-size: 32px;'>" + msg + "<br>\n</form></p></body>\n</html>";

  server.send(200, "text/html", content_test);   //发送登录前页面配置

}

//root page can be accessed only if authentification is ok 只有在身份验证正常的情况下才能访问根页面

void handleRoot() {     //登录后网页

  Serial.println("Enter handleRoot");

  String header;

  if (!is_authentified()) {

    server.sendHeader("Location", "/login");

    server.sendHeader("Cache-Control", "no-cache");

    server.send(301);

    return;

  }

  String content = "<html>\n<body>\n\n<H2>hello, you successfully connected to esp8266!</H2><br>\n";

  if (server.hasHeader("User-Agent")) {

    content += "<p style = 'font-size: 32px;'>the user agent used is : " + server.header("User-Agent") + "<br><br>\n";    //User-Agent网页头数据

  }

  content += "You can access this page until you <a href=\"/login?DISCONNECT=YES\">disconnect</a>\n</p></body>\n</html>";// <a 地址 >代表超链接跳转地址

  server.send(200, "text/html", content);     //发送登录后页面配置

}

//no need authentification 无需身份验证

void handleNotFound() {

  String message = "File Not Found\n\n";

  message += "URI: ";

  message += server.uri();

  message += "\nMethod: ";

  message += (server.method() == HTTP_GET) ? "GET" : "POST";

  message += "\nArguments: ";

  message += server.args();

  message += "\n";

  for (uint8_t i = 0; i < server.args(); i++) {

    message += " " + server.argName(i) + ": " + server.arg(i) + "\n";

  }

  server.send(404, "text/plain", message);    //发送页面配置

}

void setup(void) {

  Serial.begin(115200);

  WiFi.mode(WIFI_STA);

  WiFi.begin(ssid, password);

  Serial.println("");

  // Wait for connection

  while (WiFi.status() != WL_CONNECTED) {

    delay(500);

    Serial.print(".");

  }

  Serial.println("");

  Serial.print("Connected to ");

  Serial.println(ssid);

  Serial.print("IP address: ");

  Serial.println(WiFi.localIP());


 

  server.on("/", handleRoot);

  server.on("/login", handleLogin);

  server.on("/test", handletest);  

  server.on("/inline", []() {

    server.send(200, "text/plain", "<p style = 'font-size: 32px;'>this works without need of authentification</p>");

  });

  server.onNotFound(handleNotFound);

  //here the list of headers to be recorded 这是要录制的标题列表

  const char * headerkeys[] = {"User-Agent", "Cookie"} ;

  size_t headerkeyssize = sizeof(headerkeys) / sizeof(char*);

  //ask server to track these headers  要求服务器跟踪这些标头

  server.collectHeaders(headerkeys, headerkeyssize);  //用于收集服务器响应的请求头

  server.begin();

  Serial.println("HTTP server started");

}

void loop(void) {

  // unsigned long t = millis();

  server.handleClient();

  // unsigned long tt = millis() - t;

  // Serial.println(tt);

}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/471109
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号