ESP8266 - Senha do Servidor Web
Este tutorial ensina como fazer um servidor web ESP8266 seguro que pede nome de usuário e senha para o acesso. Antes de ver qualquer página web armazenada no ESP8266, os usuários precisarão informar o nome de usuário e a senha.
Hardware Necessário
Or you can buy the following kits:
| 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 ESP8266 e o Servidor Web
Se você não conhece o ESP8266 e o Servidor Web (incluindo pinagem, como funciona e programação), você pode aprender sobre eles nos tutoriais a seguir:
Código ESP8266 - Servidor Web com Usuário/Senha
/*
* Este código de ESP8266 NodeMCU foi desenvolvido por pt.newbiely.com
* Este código de ESP8266 NodeMCU é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/esp8266/esp8266-web-server-password
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
// Replace with your network credentials
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
ESP8266WebServer server(80);
const char* www_username = "admin";
const char* www_password = "esp8266";
void handleRoot() {
if (!server.authenticate(www_username, www_password)) {
return server.requestAuthentication();
}
// send your web content here. The below is simplest form.
server.send(200, "text/html", "<html><body><h1>Login Successful!</h1><p>You are now logged in.</p></body></html>");
}
void handleNotFound() {
server.send(404, "text/plain", "Not found");
}
void setup() {
Serial.begin(9600);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
server.on("/", HTTP_GET, handleRoot);
server.onNotFound(handleNotFound);
server.begin();
// Print the ESP8266's IP address
Serial.print("ESP8266 Web Server's IP address: ");
Serial.println(WiFi.localIP());
}
void loop() {
server.handleClient();
}
Passos Rápidos
Para começar com o ESP8266 na Arduino IDE, siga estes passos:
- Veja o tutorial como configurar o ambiente para o ESP8266 na Arduino IDE se esta for a sua primeira vez usando o ESP8266.
- Ligue os componentes como mostrado no diagrama.
- Conecte a placa ESP8266 ao seu computador usando um cabo USB.
- Abra a Arduino IDE no seu computador.
- Escolha a placa ESP8266 correta, como (por exemplo, NodeMCU 1.0 (ESP-12E Module)), e a respectiva porta COM.
- Copie o código acima e abra-o com a Arduino IDE
- Altere as informações de WiFi (SSID e senha) no código para as suas
- Clique no botão Upload da Arduino IDE para fazer upload do código para o ESP8266
- Abra o Serial Monitor
- Confira o resultado no Serial Monitor.
8
Serial.println("Hello World!");
Message (Enter to send message to 'Nodemcu 1.0 (ESP-12E Module)' on 'COM15')
New Line
9600 baud
Connecting to WiFi...
Connected to WiFi
ESP8266 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 o 192.168.0.3 pelo endereço IP que você obteve no Serial Monitor.
- Você verá uma página que pede para você informar o usuário/senha.
- Digite o usuário/senha que estão no código do ESP8266, neste caso: admin como usuário e esp8266 como senha
- Se você informar o usuário/senha corretamente, o conteúdo web do ESP8266 será exibido:
※ Nota:
- Você pode modificar o nome de usuário e a senha do seu site diretamente no código, alterando os valores atribuídos a duas variáveis: www_username e www_password.
- Você tem a liberdade de personalizar este código integrando o seu próprio HTML, CSS e JavaScript para criar a sua página web do jeito que quiser.
- Vale mencionar que não há nenhum código HTML específico dentro do próprio código para o formulário de login, onde os usuários informam o nome de usuário e a senha. Isso pode parecer inesperado, mas, em vez disso, o formulário de login é criado dinamicamente pelo navegador quando necessário.
Conhecimento Avançado
Esta seção oferece uma explicação detalhada de como o sistema de usuário/senha funciona sem HTML para o formulário de login:
- Quando você digita o endereço IP do ESP8266 em um navegador pela primeira vez, o navegador envia uma requisição ao ESP8266 via HTTP, mas sem nenhuma informação de usuário/senha.
- Ao receber essa requisição, o código do ESP8266 verifica se há credenciais de usuário/senha. Se nenhuma for detectada, o ESP8266 não responde com o conteúdo da página. Em vez disso, ele devolve uma mensagem HTTP contendo cabeçalhos que instruem o navegador a pedir o usuário/senha ao usuário. Note que essa resposta não inclui código HTML para o formulário de login.
- Quando o navegador recebe essa resposta, ele interpreta os cabeçalhos HTTP e entende que o ESP8266 está pedindo um usuário/senha. Consequentemente, o navegador gera dinamicamente um formulário de login para o usuário informar suas credenciais.
- Em seguida, o usuário digita o usuário/senha nesse formulário.
- O navegador incorpora o usuário/senha digitados em uma requisição HTTP e a encaminha de volta ao ESP8266.
- O ESP8266 verifica o usuário/senha fornecidos na requisição HTTP. Se estiverem corretos, ele fornece o conteúdo da página solicitada. Se estiverem incorretos, o processo se repete, pedindo ao usuário que informe as credenciais corretas mais uma vez.
- Depois que o usuário informa corretamente o usuário/senha pela primeira vez, as requisições seguintes não exigem que ele digite os dados novamente. Isso acontece porque o navegador armazena automaticamente as credenciais e as inclui nas requisições seguintes.