Exemplo de Servidor Web com Autenticação no ESP32
ESP32 - Servidor Web com Autenticação Básica
Este exemplo mostra como criar um servidor web seguro com Autenticação Básica HTTP no ESP32 usando a biblioteca DIYables_ESP32_WebServer.
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.
Recursos Demonstrados
- ✅ Autenticação Básica HTTP
- ✅ Proteção por nome de usuário e senha
- ✅ Caixas de diálogo de login nativas do navegador
- ✅ Controle de acesso seguro
- ✅ Configuração simples de autenticação
- ✅ Compatibilidade com versões anteriores (autenticação opcional)
Diagrama do Circuito
Não é necessária nenhuma ligação adicional - este exemplo usa apenas o LED integrado e a funcionalidade WiFi do ESP32.
Exemplo de Código
/*
* ESP32 - Simple Web Server with Basic Authentication
*
* This example demonstrates basic authentication using the DIYables_ESP32_WebServer library.
* Adapted from the simple WiFi authentication example structure.
*
* Hardware: ESP32
* Library: DIYables_ESP32_WebServer (with Basic Authentication support)
*/
#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;
// HTML page content
const char* LOGIN_SUCCESS_PAGE = R"(
<!DOCTYPE HTML>
<html>
<head><title>ESP32 Web Server</title></head>
<body>
<h1>Login Successful!</h1>
<p>You are now logged in.</p>
<p>Server running with DIYables_ESP32_WebServer library</p>
</body>
</html>
)";
// Main page handler
void handleRoot(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, LOGIN_SUCCESS_PAGE);
}
void setup() {
Serial.begin(9600);
delay(1000);
String fv = WiFi.firmwareVersion();
if (fv < WIFI_FIRMWARE_LATEST_VERSION)
Serial.println("Please upgrade the firmware");
Serial.print("Attempting to connect to SSID: ");
Serial.println(WIFI_SSID);
// 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();
}
Como Funciona
1. Configuração da Autenticação
O exemplo habilita a Autenticação Básica HTTP com:
server.enableAuthentication(www_username, www_password, "ESP32");
2. Proteção Automática
Depois que a autenticação é habilitada, todas as rotas ficam protegidas automaticamente. Os usuários precisam fornecer credenciais válidas para acessar qualquer página.
3. Integração com o Navegador
Quando os usuários acessam o servidor web:
- O navegador exibe uma caixa de diálogo de login
- O usuário digita o nome de usuário e a senha
- Em caso de sucesso: a página carrega normalmente
- Em caso de falha: é exibida a página 401 Unauthorized
4. Armazenamento das Credenciais
Os navegadores guardam as credenciais em cache durante a sessão, então os usuários não precisam fazer login repetidamente.
Considerações de Segurança
✅ Adequado Para:
- Redes domésticas e ambientes confiáveis
- Dispositivos IoT internos
- Desenvolvimento e prototipagem
- Projetos educacionais
⚠️ Limitações:
- As credenciais são codificadas em Base64, não criptografadas
- Sem suporte a HTTPS (limitação da plataforma ESP32)
- Apenas uma combinação de nome de usuário/senha
- Não é adequado para uso em produção em redes públicas
🔒 Boas Práticas:
- Altere as credenciais padrão imediatamente
- Use somente em redes confiáveis
- Considere uma segurança de rede adicional (VPN, firewall)
- Para aplicações de alta segurança, adicione camadas extras de autenticação
Testando a Autenticação
- Faça o upload do código para o seu ESP32
- Abra o Serial Monitor para ver o endereço IP
- Acesse o endereço IP no seu navegador
- A caixa de login aparece - digite as credenciais:
- Nome de usuário: admin
- Senha: esp32
- A página de sucesso carrega após a autenticação
Opções de Personalização
Alterar as Credenciais
const char* www_username = "myuser";
const char* www_password = "mysecretpass";
Realm Personalizado
server.enableAuthentication(www_username, www_password, "My Custom Device");
Desabilitar a Autenticação
server.disableAuthentication(); // Make all routes public
Verificar o Status da Autenticação
if (server.isAuthenticationEnabled()) {
Serial.println("Authentication active");
}
Compatibilidade com Versões Anteriores
A autenticação vem desabilitada por padrão, então o código existente continua funcionando sem modificações. Habilite a autenticação somente quando necessário:
// This works exactly as before (no authentication)
DIYables_ESP32_WebServer server;
server.addRoute("/", handleRoot);
server.begin("WiFi", "Password");
// Add this line to enable authentication
server.enableAuthentication("admin", "password123");
Solução de Problemas
O Navegador Continua Pedindo as Credenciais
- Verifique se há erros de digitação no nome de usuário/senha
- Limpe o cache/cookies do navegador
- Confirme que as credenciais coincidem exatamente
Não Consigo Acessar Nenhuma Página
- A autenticação protege TODAS as rotas quando está habilitada
- Use server.disableAuthentication() para testar
- Verifique na saída Serial as mensagens de autenticação
A Autenticação Não Funciona
- Confirme que enableAuthentication() é chamada depois de server.begin()
- Verifique se as credenciais estão dentro dos limites de tamanho (máximo de 31 caracteres)
- Verifique se há caracteres especiais nas senhas
Exemplos Relacionados
- Exemplo de Web Server - Servidor web básico com várias páginas
- Web Server com Query Strings - Conteúdo dinâmico com parâmetros
- Web Server com WebSocket - Comunicação em tempo real
Referências
- Documentação de Autenticação - Referência completa de autenticação
- Referência da Biblioteca DIYables_ESP32_WebServer - Documentação completa da API