Saat ESP32 digunakan sebagai web server, sering kali diperlukan mekanisme keamanan agar halaman web tidak dapat diakses oleh sembarang orang. Salah satu metode yang paling sederhana adalah menerapkan HTTP Authentication menggunakan username dan password. Pada tutorial ini, Anda akan mempelajari cara membuat Web Server ESP32 yang dilindungi dengan autentikasi login. Sebelum halaman web ditampilkan, browser akan meminta pengguna memasukkan username dan password. Hanya pengguna yang memiliki kredensial yang benar yang dapat mengakses halaman web yang disediakan oleh ESP32. Metode ini sangat cocok digunakan pada berbagai proyek Internet of Things (IoT), seperti sistem monitoring, kontrol perangkat elektronik, smart home, maupun aplikasi industri sederhana yang membutuhkan pembatasan akses.
Perangkat Keras yang Dibutuhkan
- ESP32 Dev Module ESP-WROOM-32 (38 Pin)
- Kabel USB (Micro USB)
Baca juga: ESP32 Modbus - Pengertian, Fungsi, dan Cara Kerja Protokol Modbus
Kode Program ESP32 Web Server dengan Username dan Password
Kode program berikut akan membuat ESP32 berfungsi sebagai web server yang menggunakan HTTP Basic Authentication. Saat pengguna mengakses alamat IP ESP32 melalui browser, sistem akan meminta proses login terlebih dahulu sebelum halaman web dapat ditampilkan.
#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();
}
Cara Mengunggah Program ke ESP32
Ikuti langkah-langkah berikut untuk menjalankan program pada ESP32:
1. Hubungkan ESP32 ke Komputer
Hubungkan papan ESP32 ke komputer menggunakan kabel Micro USB.
2. Buka Arduino IDE
Jalankan aplikasi Arduino IDE yang telah terpasang pada komputer.
3. Pilih Board dan Port
Pilih jenis board yang digunakan melalui menu:
Tools → Board → ESP32 Arduino → ESP32 Dev Module
Selanjutnya, pilih COM Port yang sesuai melalui menu:
Tools → Port
Pastikan port yang dipilih merupakan port tempat ESP32 terhubung.
4. Instal Library yang Dibutuhkan
Program ini menggunakan library DIYables ESP32 WebServer.
Untuk menginstalnya, lakukan langkah berikut.
- Buka Library Manager pada Arduino IDE.
- Ketik DIYables ESP32 WebServer pada kolom pencarian.
- Pilih library DIYables ESP32 WebServer yang dikembangkan oleh DIYables.
- Klik tombol Install.
5. Salin dan Buka Kode Program
Salin kode program yang telah disediakan, kemudian buka menggunakan Arduino IDE.
6. Ubah Konfigurasi WiFi
Sesuaikan parameter jaringan WiFi pada program dengan jaringan yang akan digunakan.
const char* ssid = "Nama_WiFi";
const char* password = "Password_WiFi";
Ganti nilai SSID dan password sesuai dengan jaringan WiFi Anda.
7. Upload Program
Klik tombol Upload pada Arduino IDE, kemudian tunggu hingga proses kompilasi dan pengunggahan selesai.
8. Buka Serial Monitor
Setelah proses upload berhasil, buka Serial Monitor. Pastikan baud rate yang digunakan sama dengan nilai yang terdapat pada fungsi:
Serial.begin(...);
9. Catat Alamat IP ESP32
Setelah ESP32 berhasil terhubung ke jaringan WiFi, alamat IP akan ditampilkan pada Serial Monitor. Contohnya seperti berikut: IP Address: 10.195.113.32
Alamat IP tersebut nantinya digunakan untuk mengakses web server melalui browser.
10. Akses Web Server
Buka browser pada komputer atau smartphone yang masih berada dalam jaringan WiFi yang sama dengan ESP32. Masukkan alamat IP yang muncul pada Serial Monitor ke bilah alamat browser. Sebagai contoh: http://10.195.113.32
Catatan: Jangan menggunakan alamat IP contoh di atas jika alamat IP ESP32 Anda berbeda. Selalu gunakan alamat IP yang ditampilkan oleh Serial Monitor.
11. Masukkan Username dan Password
Saat halaman diakses, browser akan menampilkan jendela autentikasi.
Masukkan username dan password yang telah ditentukan di dalam kode program. Pada contoh tutorial ini digunakan konfigurasi berikut:
- Username: admin
- Password: esp32
Jika data login benar, browser akan menampilkan halaman web yang dikirimkan oleh ESP32.
Cara Kerja HTTP Authentication pada ESP32
Fitur keamanan yang digunakan pada tutorial ini adalah HTTP Basic Authentication. Mekanisme ini memanfaatkan protokol HTTP untuk melakukan proses autentikasi sebelum browser memperoleh akses ke halaman web. Meskipun metode ini tergolong sederhana, HTTP Basic Authentication sudah cukup untuk banyak aplikasi IoT yang berjalan pada jaringan lokal (Local Area Network/LAN). Secara umum, proses autentikasi berlangsung sebagai berikut:
1. Browser Mengirim HTTP Request
Ketika pengguna pertama kali membuka alamat IP ESP32, browser akan mengirimkan HTTP Request tanpa menyertakan informasi username maupun password. Pada tahap ini, browser belum mengetahui bahwa halaman tersebut memerlukan autentikasi.
2. ESP32 Meminta Autentikasi
ESP32 menerima permintaan dari browser dan memeriksa apakah terdapat informasi autentikasi. Karena belum ada data login, ESP32 tidak langsung mengirimkan halaman web, melainkan mengembalikan respons HTTP 401 Unauthorized yang berisi informasi bahwa halaman membutuhkan autentikasi. Respons inilah yang memicu browser untuk meminta pengguna melakukan login.
3. Browser Menampilkan Kotak Login
Setelah menerima respons 401 Unauthorized, browser secara otomatis menampilkan dialog login yang berisi kolom:
- Username
- Password
Pengguna kemudian memasukkan kredensial yang dimiliki.
4. Browser Mengirim Kredensial ke ESP32
Setelah tombol OK atau Sign In ditekan, browser akan mengirimkan kembali HTTP Request. Perbedaannya, permintaan kali ini telah dilengkapi dengan informasi Authorization Header yang berisi username dan password.
5. ESP32 Memverifikasi Data Login
ESP32 membandingkan data autentikasi yang diterima dengan data yang telah ditentukan pada program.
Terdapat dua kemungkinan hasil.
- Jika username dan password benar, ESP32 mengirimkan halaman web yang diminta sehingga pengguna dapat mengakses isi web server.
- Jika username atau password salah, ESP32 kembali mengirimkan respons 401 Unauthorized, sehingga browser akan meminta pengguna memasukkan kredensial yang benar.
6. Browser Menyimpan Status Login Selama Sesi Berlangsung
Setelah autentikasi berhasil, sebagian besar browser akan menyimpan informasi login selama sesi browser masih aktif.
Akibatnya, pengguna tidak perlu memasukkan username dan password setiap kali membuka halaman yang sama. Permintaan login biasanya akan muncul kembali apabila:
- Browser ditutup.
- Sesi autentikasi berakhir.
- Cache autentikasi dihapus.
- Browser dimulai kembali (tergantung implementasi browser).
Keunggulan Menggunakan HTTP Authentication pada ESP32
Penerapan HTTP Basic Authentication pada ESP32 memiliki beberapa keuntungan, antara lain:
- Mudah diimplementasikan tanpa memerlukan sistem login yang kompleks.
- Mengurangi risiko akses oleh pengguna yang tidak berwenang pada web server ESP32.
- Didukung oleh hampir semua web browser modern tanpa memerlukan JavaScript atau halaman login tambahan.
- Sangat ringan, sehingga cocok dijalankan pada mikrokontroler seperti ESP32 yang memiliki sumber daya terbatas.
- Ideal untuk aplikasi IoT pada jaringan lokal, seperti sistem monitoring sensor, kontrol relay, smart home, maupun dashboard perangkat.
Catatan: HTTP Basic Authentication hanya memberikan autentikasi pengguna. Jika web server diakses melalui jaringan publik (internet), sebaiknya gunakan HTTPS (SSL/TLS) agar username dan password tidak dikirim dalam bentuk yang mudah disadap selama proses komunikasi.
Baca juga: ESP32 Web Server Multiple Pages - Membuat Web Server ESP32 dengan Banyak Halaman Web
Dalam praktik, hasil dan kendala yang ditemui bisa berbeda tergantung perangkat, konfigurasi, versi library, dan sistem yang digunakan.
- Diskusi umum dan tanya jawab praktik: https://t.me/edukasielektronika
- Kendala spesifik dan kasus tertentu: http://bit.ly/Chatarduino
0 on: "ESP32 Web Server dengan Login Username dan Password (HTTP Authentication)"