Password Protected Login ESP8266 Web Server Tutorial

Description: When an ESP8266 (Wemos Lolin D1 Mini Pro V2) is powered ON and has successfully connected to the internet, the built-in LED turns blue and the Web Server is started.

Password Protected Login ESP8266 Web Server

Notes: Make sure that the baud rate is set to 115200 in the Serial Monitor of the Arduino IDE. Once the server has started it will display the IP address, which can then be typed into a browser to access the password protected html website.

Serial Monitor ESP8266 Web Server

ESP8266 Password Protected Web Server Login Pop-up

ESP8266 Web Server HTML Webpage

Supplies:

1 – Breadboard 400 Points   >> Link <<
1 – Wemos Lolin D1 Mini Pro V2   >> Link <<

Arduino Code:

#include “ESP8266WiFi.h”

// Replace with your network credentials
const char* ssid = “Network Name”;
const char* password = “wifi password”;

// Set web server port number to 80
WiFiServer server(80);
String header;

void setup() {

Serial.begin(115200);

pinMode(LED_BUILTIN, OUTPUT);

digitalWrite(LED_BUILTIN, HIGH);

// Connect to Wi-Fi network with SSID and password
Serial.println(“”);
Serial.println(“”);
Serial.println(“Connecting to: “);
Serial.println(ssid);
WiFi.begin(ssid,password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(“.”);

}

// Print local IP address and start web server
Serial.println(“”);
Serial.println(“WiFi Connected Successfully:”);
Serial.println(“IP address: “);
Serial.print(WiFi.localIP());
server.begin();

}

void loop() {

digitalWrite(LED_BUILTIN, LOW);

WiFiClient client = server.available(); // Listen for incoming clients

if (client) { // If a new client connects,
Serial.println(“New Client.”); // print a message out in the serial port
String currentLine = “”; // make a String to hold incoming data from the client

while (client.connected()) { // loop while the client’s connected
if (client.available()) { // if there’s bytes to read from the client,
char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
header += c;
if (c == ‘\n’) { // if the byte is a newline character

// if the current line is blank, you got two newline characters in a row.
// that’s the end of the client HTTP request, so send a response:
if (currentLine.length() == 0) {
// checking if header is valid
// dXNlcjpwYXNz = ‘user:pass’ (user:pass) base64 encode
// Finding the right credential string, then loads web page
if(header.indexOf(“dXNlcjpwYXNz”) >= 0) {
client.println(“HTTP/1.1 200 OK”);
client.println(“Content-type:text/html”);
client.println(“Connection: close”);
client.println();
client.println(“<!DOCTYPE html>\n”);
client.println(“<html>\n”);
client.println(“<body>\n”);
client.println(“<center>\n”);
client.println(“<h1 style=\”color:blue;\”>Welcome to the ESP8266 Webserver</h1>\n”);
client.println(“<h2 style=\”color:green;\”>Password Protected</h2>\n”);
client.println(“<h3 style=\”color:orange;\”>This is text</h3>\n”);

client.println(“</center>\n”);
client.println(“</body>\n”);
client.println(“</html>”);

break;
}

// Wrong user or password, so HTTP request fails…
else {

client.println(“HTTP/1.1 401 Unauthorized”);
client.println(“WWW-Authenticate: Basic realm=\”Secure\””);
client.println(“Content-Type: text/html”);
client.println();
client.println(“<html>Authentication failed</html>”);
break;
}

} else { // if you got a newline, then clear currentLine
currentLine = “”;
}
} else if (c != ‘\r’) { // if you got anything else but a carriage return character,
currentLine += c; // add it to the end of the currentLine
}
}
}

// Clear the header variable
header = “”;
// Close the connection
client.stop();
Serial.println(“Client disconnected.”);
Serial.println(“”);

}
}

 

Leave a Comment

66 − 60 =