Setting Up a Captive Web Portal to Input Wi-Fi Credentials

Hello all!

I have been working on this bit of code (shown below) as part of a larger project and the end goal is to connect to an ESP-32's wi-fi network and set up my wi-fi network through a captive web portal. This seems like a simple concept but despite hours of research, I cannot get anything to work. I know that there are GitHub projects related to this idea but I could not get any of them to work either.

Please be warned that the code is made up of bits of tutorials that I have cobbled together and edited to try and get the functionality I need. It is not properly commented. I am not a professional/expert programmer or anything close to that, but I am very keen to learn.

So far I have got the ESP32 access point to appear on my phone and when I tap on it, the HTML form appears. The part which I am struggling with is getting the information from the form, once it has been submitted, and using it in my program. It seems very simple, and I can find ways to do it when the HTML page is hosted on a separate web server but not when hosted on the ESP32 itself.

I would really appreciate any help that you can offer.

Many thanks,
Sean

#include <WiFi.h>
#include <DNSServer.h>

const byte DNS_PORT = 53;
IPAddress apIP(8,8,4,4); // The default android DNS
DNSServer dnsServer;
WiFiServer server(80);

char* wifiSSID = "input1";
char* wifiPass = "input2";
char* devName = "input3";
char* emailAdd = "input4";
char* userName = "input5";

String responseHTML = R"rawliteral(
<!DOCTYPE HTML><html><head>
  <title>Device Setup</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
  body{color:white; background-color:#141414; font-family: Helvetica, Verdana, Arial, sans-serif}
  h1{text-align:center;}
  p{text-align:center;}
  div{margin: 5%; background-color:#242424; padding:10px; border-radius:8px;}
  br{display: block; margin: 10px 0; line-height:22px; content: " ";}
  label{text-align:left; padding:2%;}
  input{border-radius: 4px; border: 2px solid #0056a8; width:90%; padding:10px; display:block; margin-right:auto; margin-left:auto;}
  input[type="submit"]{font-size: 25px; background-color:#0056a8; color:white; border-radius:8px; height:50px; width:95%;}
  </style>
  </head><body>
  <div>
    <h1>Device Setup</h1>
    <p>Please enter the following details to setup your device:</p>
    <form action="/get">
      <label>Wi-Fi Details</label>
      <br>
      <input type="text" name="wifissid" id="wifissid" placeholder="Wi-Fi SSID">
      <br>
      <input type="password" name="wifipass" id="wifipass" placeholder="Wi-Fi Password">
      <br>
      <label for="devname">Device Name</label>
      <br>
      <input type="text" name="devname" id="devname">
      <br>
      <label for="emailadd">Email Address</label>
      <br>
      <input type="email" name="emailadd" id="emailadd">
      <br>
      <label for="username">Your Name</label>
      <br>
      <input type="text" name="username" id="username">
      <br>
      <input type="submit" value="Submit">
    </form><br>
  </div>
</body></html>)rawliteral";

void setup() { 
  WiFi.mode(WIFI_AP);
  WiFi.softAP("Smart System");
  WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));

  // if DNSServer is started with "*" for domain name, it will reply with
  // provided IP to all DNS request
  dnsServer.start(DNS_PORT, "*", apIP);

  server.begin();
}

void loop() {
  dnsServer.processNextRequest();
  WiFiClient client = server.available();   // listen for incoming clients

  if (client) {
    String currentLine = "";
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        if (c == '\n') {
          if (currentLine.length() == 0) {
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println();
            client.print(responseHTML);
            break;
          } else {
            currentLine = "";
          }
        }
      }
    }
    client.stop();
  }
}

Take a look at the system library WebServer of the ESP32 Arduino package, especially the examples there.

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.