ESP32 - Senha do Servidor Web
Neste tutorial, vamos descobrir como criar um servidor web no ESP32 protegido por login com usuário e senha. Antes de acessar a página web no ESP32, o usuário será solicitado a digitar o usuário/senha
Hardware Necessário
Or you can buy the following kits:
| 1 | × | DIYables ESP32 Starter Kit (ESP32 included) | |
| 1 | × | DIYables ESP32 S3 Starter Kit (ESP32 S3 included) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgação: Alguns dos links desta seção são links de afiliado da Amazon. Podemos receber uma comissão pelas compras feitas por meio desses links, sem custo adicional para você. Agradecemos o seu apoio.
Sobre o ESP32 e o Servidor Web
Se você não está familiarizado com o ESP32 e o Servidor Web (incluindo pinagem, como funciona e programação), pode aprender sobre eles nos tutoriais a seguir:
Código ESP32 - Servidor Web com Usuário/Senha
/*
* Este código de ESP32 foi desenvolvido por pt.newbiely.com
* Este código de ESP32 é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/esp32/esp32-web-server-password
*/
#include <DIYables_ESP32_WebServer.h>
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Authentication credentials
const char* www_username = "admin";
const char* www_password = "esp32";
// Create web server instance
DIYables_ESP32_WebServer server;
// Main page handler
void handleRoot(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, "<html><body><h1>Login Successful!</h1><p>You are now logged in.</p></body></html>");
}
void setup() {
Serial.begin(9600);
delay(1000);
// Configure the main route
server.addRoute("/", handleRoot);
// Start server with WiFi connection (handles connection automatically)
server.begin(WIFI_SSID, WIFI_PASSWORD);
// Enable basic authentication
server.enableAuthentication(www_username, www_password, "Esp32");
Serial.print("IP Address: ");
Serial.println(WiFi.localIP());
Serial.println("Server ready with authentication enabled");
Serial.print("Username: ");
Serial.println(www_username);
Serial.print("Password: ");
Serial.println(www_password);
}
void loop() {
// Handle all client requests (including authentication)
server.handleClient();
}
Passos Rápidos
- Se esta é a primeira vez que você usa o ESP32, veja como configurar o ambiente para ESP32 no Arduino IDE.
- Conecte a placa ESP32 ao seu PC por um cabo micro USB
- Abra o Arduino IDE no seu PC.
- Selecione a placa ESP32 correta (por exemplo, ESP32 Dev Module) e a porta COM.
- Abra o Library Manager clicando no ícone Library Manager na barra de navegação à esquerda do Arduino IDE.
- Pesquise por “DIYables ESP32 WebServer” e encontre a biblioteca Web Server criada pela DIYables.
- Clique no botão Install para instalar a biblioteca Web Server.
- Copie o código acima e abra no Arduino IDE
- Altere as informações de WiFi (SSID e senha) no código para as suas
- Clique no botão Upload no Arduino IDE para fazer o upload do código para o ESP32
- Abra o Serial Monitor
- Veja o resultado no Serial Monitor.
8
Serial.println("Hello World!");
Message (Enter to send message to 'ESP32 Dev Module' on 'COM15')
New Line
9600 baud
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.3
- Você verá um endereço IP no Serial Monitor, por exemplo: 192.168.0.3
- Digite o endereço IP na barra de endereços de um navegador no seu celular ou PC.
- Observe que você precisa trocar 192.168.0.3 pelo endereço IP que você obteve no Serial Monitor.
- Você verá uma página que pede para você digitar usuário/senha.
- Digite o usuário/senha que estão no código do ESP32, neste caso: admin como usuário e esp32 como senha
- Se você digitar o usuário/senha corretamente, o conteúdo web do ESP32 será exibido:
※ Nota:
- Você pode mudar o usuário/senha da web no código alterando os valores de duas variáveis: www_username e www_password
- Você pode modificar este código para adicionar o código HTML/CSS/JavaScript da sua página web
- No código, não há código HTML para o formulário de login (usuário/senha). Não estranhe! O formulário de login é criado pelo navegador.
Conhecimento Avançado
Esta seção apresenta um conhecimento avançado sobre como o sistema de usuário/senha funciona sem HTML para o formulário de login.
- Inicialmente, quando você digita o endereço IP do ESP32 em um navegador, o navegador envia uma requisição HTTP ao ESP32 sem nenhuma credencial de usuário/senha.
- Ao receber essa requisição, o código do ESP32 verifica se o usuário/senha foi incluído ou não. Se não foi, o ESP32 não responde à requisição com o conteúdo da página. Em vez disso, ele responde com uma mensagem HTTP contendo cabeçalhos que instruem o navegador a pedir ao usuário o usuário/senha. Note que essa resposta não contém código HTML para o formulário de login.
- Ao receber essa resposta, o navegador interpreta os cabeçalhos HTTP e reconhece o pedido de usuário/senha do ESP32. Em seguida, o navegador gera dinamicamente um formulário de login que permite ao usuário digitar suas credenciais.
- O usuário então digita o usuário/senha no formulário.
- O navegador inclui o usuário/senha digitado em uma requisição HTTP e a envia ao ESP32.
- O ESP32 verifica o usuário/senha incluído na requisição HTTP. Se estiver correto, ele retorna o conteúdo da página solicitada. Se estiver incorreto, ele repete o processo, pedindo ao usuário que digite as credenciais corretas novamente.
- Depois que o usuário digita o usuário/senha corretos pela primeira vez, as requisições seguintes não precisam do usuário/senha. Isso acontece porque o navegador salva as credenciais automaticamente e as inclui nas requisições seguintes.