Pelajari cara menambahkan otentikasi HTTP dengan nama pengguna dan kata sandi ke proyek server web ESP32 dan ESP8266 NodeMCU Anda menggunakan Arduino IDE. Anda hanya dapat mengakses server web Anda jika Anda mengetikkan pengguna dan pass yang benar. Jika Anda keluar, Anda hanya dapat mengakses kembali jika Anda memasukkan kredensial yang benar.
Metode yang akan kita gunakan dapat diterapkan ke server web yang dibangun menggunakan perpustakaan ESPAsyncWebServer.
Papan ESP32/ESP8266 akan diprogram menggunakan Arduino IDE. Jadi, pastikan Anda memasang papan ini:
• Memasang Board ESP32 di Arduino IDE(Windows, Mac OS X, dan Linux)
• Memasang Papan ESP8266 di Arduino IDE(Windows, Mac OS X, Linux)
Perhatian pada keamanan
Proyek ini dimaksudkan untuk digunakan di jaringan lokal Anda untuk melindungi dari siapa pun yang hanya mengetik alamat IP ESP dan mengakses server web (seperti anggota keluarga atau teman yang tidak sah).
Jika jaringan Anda diamankan dengan benar, menjalankan server HTTP dengan otentikasi dasar sudah cukup untuk sebagian besar aplikasi. Jika seseorang telah berhasil meretas jaringan Anda, tidak masalah apakah Anda menggunakan HTTP atau HTTPS. Peretas dapat melewati HTTPS dan mendapatkan pengguna/pass Anda.
Ulasan Proyek
Mari kita lihat sekilas fitur dari proyek yang akan kita bangun.
• Dalam tutorial ini Anda akan belajar bagaimana melindungi server web Anda dengan kata sandi;
• Saat Anda mencoba mengakses halaman server web pada alamat IP ESP, sebuah jendela muncul meminta nama pengguna dan kata sandi;
• Untuk mendapatkan akses ke halaman server web, Anda harus memasukkan nama pengguna dan kata sandi yang benar (didefinisikan dalam sketsa ESP32/ESP8266);
• Ada tombol logout di server web. Jika Anda mengklik tombol logout, Anda akan diarahkan ke halaman logout. Kemudian, tutup semua tab browser web untuk menyelesaikan proses logout;
• Anda hanya dapat mengakses server web lagi jika Anda login dengan kredensial yang tepat;
• Jika Anda mencoba mengakses server web dari perangkat yang berbeda (di jaringan lokal), Anda juga harus masuk dengan kredensial yang tepat (bahkan jika Anda berhasil masuk di perangkat lain);
• Otentikasi tidak dienkripsi.
Catatan: proyek ini telah diuji pada browser web Google Chrome dan Firefox serta perangkat Android.
Memasang Pustaka – Server Web Async
Untuk membangun server web, Anda perlu menginstal pustaka berikut:
• ESP32: instal ESPAsyncWebServer dan perpustakaan AsyncTCP.
• ESP8266: instal pustaka ESPAsyncWebServer dan ESPAsyncTCP.
Library ini tidak tersedia untuk diinstal melalui Arduino Library Manager, jadi Anda perlu menyalin file library ke folder Library Instalasi Arduino. Atau, di Arduino IDE Anda, Anda bisa pergi ke Sketch > Include Library > Add .zip Library dan pilih library yang baru saja Anda unduh.
Kode Server Web dengan Otentikasi
Salin kode berikut ke Arduino IDE Anda.
Anda hanya perlu memasukkan kredensial jaringan Anda (SSID dan kata sandi) dan server web akan langsung bekerja. Kode ini kompatibel dengan papan ESP32 dan ESP8266 .
Sebagai contoh, kami sedang membangun server web yang mengontrolGPIO 2. Anda dapat menggunakan otentikasi HTTP dengan server web apa pun yang dibuat dengan perpustakaan ESPAsyncWebServer .
Cara Kerja Kode
Kami telah menjelaskan dengan sangat rinci bagaimana server web seperti ini bekerja di tutorial sebelumnya ( Server Web Suhu DHT atau Server Web Relay ), jadi kami hanya akan melihat bagian yang relevan untuk menambahkan otentikasi nama pengguna dan kata sandi ke server web .
Kredensial Jaringan
Seperti disebutkan sebelumnya, Anda perlu memasukkan kredensial jaringan Anda di baris berikut:
Mengatur Nama Pengguna dan Kata Sandi Anda
Dalam variabel berikut, atur nama pengguna dan kata sandi untuk server web Anda. Secara default, nama pengguna adalah admin dan kata sandinya juga admin . Kami merekomendasikan untuk mengubahnya.
Tombol Keluar
Dalamindex_htmlvariabel Anda harus menambahkan beberapa teks HTML untuk menambahkan tombol logout. Dalam contoh ini, ini adalah tombol logout sederhana tanpa gaya untuk membuat segalanya lebih sederhana.
Ketika diklik, tombol memanggiltombol keluar()fungsi JavaScript. Fungsi ini membuat permintaan HTTP GET ke ESP32/ESP8266 Anda di URL /logout . Kemudian, dalam kode ESP, Anda harus menangani apa yang terjadi setelah menerima permintaan ini.
Satu detik setelah Anda mengklik tombol logout, Anda akan diarahkan ke halaman logout pada URL /logout .
Menangani Permintaan dengan Otentikasi
Setiap kali Anda membuat permintaan ke ESP32 atau ESP8266 untuk mengakses server web, itu akan memeriksa apakah Anda telah memasukkan nama pengguna dan kata sandi yang benar untuk otentikasi.
Pada dasarnya, untuk menambahkan otentikasi ke server web Anda, Anda hanya perlu menambahkan baris berikut setelah setiap permintaan:
Baris-baris ini terus memunculkan jendela otentikasi hingga Anda memasukkan kredensial yang tepat.
Anda perlu melakukan ini untuk semua permintaan. Dengan cara ini, Anda memastikan bahwa Anda hanya akan mendapatkan tanggapan jika Anda masuk.
Misalnya, ketika Anda mencoba mengakses URL root (alamat IP ESP), Anda menambahkan dua baris sebelumnya sebelum mengirim halaman. Jika Anda memasukkan kredensial yang salah, browser akan terus memintanya.
Berikut contoh lain ketika ESP menerima permintaan di /state URL.
Menangani Tombol Keluar
Saat Anda mengklik tombol logout, ESP menerima permintaan di URL /logout . Ketika itu terjadi, kirim kode respons 401.
Kode respons 401 adalah kode status respons HTTP kesalahan tidak sah yang menunjukkan bahwa permintaan yang dikirim oleh klien tidak dapat diautentikasi. Jadi, ini akan memiliki efek yang sama seperti logout – itu akan meminta nama pengguna dan kata sandi dan tidak akan membiarkan Anda mengakses server web lagi sampai Anda login.
Saat Anda mengklik tombol logout server web, setelah satu detik, ESP menerima permintaan lain pada /logout URL. Ketika itu terjadi, kirim teks HTML untuk membuat halaman logout (logout_htmlvariabel).
Demonstrasi
Unggah kode ke papan ESP32 atau ESP8266 Anda. Kemudian, buka Serial Monitor dan tekan tombol RST/EN on-board untuk mendapatkan alamat IP.
Buka browser di jaringan lokal Anda dan ketik alamat IP ESP.
Halaman berikut akan memuat meminta nama pengguna dan kata sandi. Masukkan nama pengguna dan kata sandi dan Anda akan mendapatkan akses ke server web. Jika Anda belum mengubah kode, nama pengguna adalah admin dan kata sandi adalah admin .
Setelah mengetik nama pengguna dan kata sandi yang benar, Anda harus mendapatkan akses ke server web.
Anda dapat bermain dengan server web dan melihat bahwa itu benar-benar mengontrol LED on-board ESP32 atau ESP8266.
Di halaman server web, ada tombol logout. Jika Anda mengklik tombol itu, Anda akan diarahkan ke halaman logout seperti yang ditunjukkan di bawah ini.
Jika Anda mengklik tautan "kembali ke beranda", Anda akan diarahkan ke halaman server web utama.
Jika Anda menggunakan Google Chrome, Anda harus memasukkan nama pengguna dan sandi untuk mengakses server web lagi.
Jika Anda menggunakan Firefox, Anda harus menutup semua tab browser web untuk keluar sepenuhnya. Jika tidak, jika Anda kembali ke halaman server web utama, Anda masih memiliki akses.
Jadi, kami menyarankan Anda untuk menutup semua tab browser web setelah mengklik tombol logout.
Anda juga perlu memasukkan nama pengguna dan kata sandi jika Anda mencoba untuk mendapatkan akses menggunakan perangkat lain di jaringan lokal, meskipun Anda memiliki akses di perangkat lain.
Membungkus
Dalam tutorial ini Anda telah mempelajari cara menambahkan otentikasi ke server web ESP32 dan ESP8266 Anda (server web yang dilindungi kata sandi). Anda dapat menerapkan apa yang Anda pelajari dalam tutorial ini ke server web apa pun yang dibuat dengan pustaka ESPAsyncWebServer.
Kami harap tutorial ini bermanfaat bagi Anda. Proyek server web lain yang mungkin Anda sukai:
• ESP32/ESP8266: Mengontrol Output denganServer Web dan Tombol Fisik Secara Bersamaan
• Server Web ESP32/ESP8266: Kontrol Outputdengan Sakelar Sesaat
• ESP32/ESP8266 Modul Relay Web Servermenggunakan Arduino IDE
Pelajari lebih lanjut tentang papan ESP32 dan ESP8266 dengan sumber daya kami:
• Belajar ESP32 dengan Arduino IDE
• Otomatisasi Rumah menggunakan ESP8266
• Proyek, Tutorial, dan Panduan ESP32Gratis
• Proyek, Tutorial, dan Panduan NodeMCUESP8266 Gratis
Sumber : randomnerdtutorials.com
){kind=link}
0 Komentar