Arduino - Servidor Web com Senha
Neste tutorial, vamos aprender a criar um servidor web seguro com Arduino que exige nome de usuário e senha para login. Antes de acessar qualquer página web hospedada no Arduino, os usuários deverão digitar seu nome de usuário e senha.
Hardware Necessário
Or you can buy the following kits:
| 1 | × | DIYables STEM V4 IoT Starter Kit (Arduino included) | |
| 1 | × | DIYables STEM V4B IoT Starter Kit (Arduino 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 Arduino e o Servidor Web
Se você não conhece o Arduino e o Servidor Web (incluindo pinagem, funcionamento e programação), pode aprender sobre eles nos seguintes tutoriais:
Código Arduino - Servidor Web com Usuário/Senha
/*
* Este código de Arduino foi desenvolvido por pt.newbiely.com
* Este código de Arduino é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/arduino/arduino-web-server-password
*/
#include <UnoR4WiFi_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 = "arduino";
// Create web server instance
UnoR4WiFi_WebServer server;
// HTML page content
const char* LOGIN_SUCCESS_PAGE = R"(
<!DOCTYPE HTML>
<html>
<head><title>Arduino Web Server</title></head>
<body>
<h1>Login Successful!</h1>
<p>You are now logged in.</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, "Arduino");
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 Arduino Uno R4, veja como configurar o ambiente para o Arduino Uno R4 na Arduino IDE.
- Conecte a placa Arduino ao seu PC por meio de um cabo USB Type-C
- Abra a Arduino IDE no seu PC.
- Selecione a placa Arduino e a porta COM corretas.
- Abra o Gerenciador de Bibliotecas clicando no ícone Library Manager no lado esquerdo da Arduino IDE.
- Pesquise por Web Server for Arduino Uno R4 WiFi e localize a biblioteca Web Server criada pela DIYables.
- Clique no botão Install para adicionar a biblioteca Web Server.
- 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 na Arduino IDE para carregar o código no Arduino
- Abra o Serial Monitor
- Confira o resultado no Serial Monitor.
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno' on 'COM15')
New Line
9600 baud
Attempting to connect to SSID: YOUR_WIFI_SSID
Connected! IP Address: 192.168.0.254
SSID: YOUR_WIFI_SSID
IP Address: 192.168.0.254
Signal strength (RSSI): -43 dBm
Basic Authentication enabled
Realm: Arduino
IP Address: 192.168.0.254
Server ready with authentication enabled
Username: admin
Password: arduino
- 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 web no seu smartphone ou PC.
- Observe que você precisa trocar o 192.168.0.3 pelo endereço IP que apareceu no Serial Monitor.
- Você verá uma página pedindo que você digite o nome de usuário/senha.
- Digite o nome de usuário/senha definidos no código do Arduino, neste caso: admin como nome de usuário e arduino como senha
- Se você digitar o nome de usuário/senha corretamente, o conteúdo web do Arduino será exibido:
※ Nota:
- Você pode ajustar 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 flexibilidade de personalizar este código adicionando seu próprio HTML, CSS e JavaScript para criar sua página web de acordo com suas preferências.
- É importante observar que, no próprio código, não existe nenhum código HTML específico para o formulário de login onde os usuários digitam o nome de usuário e a senha. Não se surpreenda com isso! Na verdade, o formulário de login é gerado dinamicamente pelo navegador web quando necessário.
Conhecimento Avançado
Esta seção traz informações detalhadas sobre como o sistema de nome de usuário/senha funciona sem HTML para o formulário de login:
- Quando você digita pela primeira vez o endereço IP do Arduino em um navegador web, o navegador envia uma requisição ao Arduino via HTTP, mas sem nenhum dado de nome de usuário/senha.
- Ao receber essa requisição, o código do Arduino verifica se há alguma credencial de nome de usuário/senha incluída. Se não encontrar nenhuma, o Arduino não responde com o conteúdo da página. Em vez disso, ele envia de volta uma mensagem HTTP com cabeçalhos que instruem o navegador a pedir ao usuário seu nome de usuário/senha. Importante: essa resposta não contém 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 Arduino está pedindo um nome de usuário/senha. Consequentemente, o navegador cria dinamicamente um formulário de login para o usuário digitar suas credenciais.
- Em seguida, o usuário digita seu nome de usuário/senha nesse formulário.
- O navegador inclui o nome de usuário/senha digitados em uma requisição HTTP e a envia de volta ao Arduino.
- O Arduino verifica o nome de usuário/senha incluídos na requisição HTTP. Se estiverem corretos, ele fornece o conteúdo da página solicitada. Se estiverem incorretos, o processo se repete, pedindo novamente ao usuário que digite as credenciais corretas.
- Depois que o usuário digita corretamente seu nome de usuário/senha pela primeira vez, as requisições seguintes não exigem que ele digite os dados novamente. Isso acontece porque o navegador salva automaticamente as credenciais e as inclui nas requisições seguintes.