Apa Itu CAPTCHA?
CAPTCHA adalah singkatan dari "Completely Automated Public Turing test to tell Computers and Humans Apart". Ini adalah sistem keamanan yang digunakan untuk membedakan antara pengguna manusia dan bot atau program komputer yang mencoba mengakses situs web. CAPTCHA biasanya terdiri dari serangkaian karakter atau gambar yang harus diidentifikasi atau diisi oleh pengguna. Tujuan utama dari CAPTCHA adalah untuk mencegah serangan spam, pencurian data, atau tindakan jahat lainnya yang dapat merugikan situs web atau pengguna.
Jenis-Jenis CAPTCHA
Ada beberapa jenis CAPTCHA yang umum digunakan, masing-masing dengan metode dan tujuan yang berbeda:
1. Text-based CAPTCHA
Text-based CAPTCHA adalah jenis CAPTCHA yang paling umum. Pengguna diminta untuk mengetik ulang deretan karakter yang terdistorsi ke dalam sebuah field sebagai syarat untuk melanjutkan aktivitas pada peramban. Jika kode CAPTCHA tidak jelas, pengguna dapat melakukan refresh untuk mendapatkan kode CAPTCHA yang baru.
2. Image-based CAPTCHA
Image-based CAPTCHA atau Picture Recognition CAPTCHA biasanya muncul pada proses autentikasi akun Google. Pengguna diminta untuk memilih gambar sesuai dengan kata kunci yang diberikan dan klik pada gambar tersebut.
3. Audio-based CAPTCHA
Audio-based CAPTCHA adalah solusi alternatif yang memberikan aksesibilitas kepada pengguna yang terganggu secara visual. CAPTCHA ini akan menghadirkan rekaman audio dari rangkaian kombinasi huruf dan angka yang harus diidentifikasi oleh pengguna.
4. Math-based CAPTCHA
Math-based CAPTCHA meminta pengguna untuk menyelesaikan masalah matematika sederhana, seperti penjumlahan atau pengurangan, untuk membuktikan bahwa mereka adalah manusia.
Langkah-Langkah Menulis Kode CAPTCHA
Menulis kode CAPTCHA melibatkan beberapa langkah penting. Berikut adalah panduan langkah demi langkah untuk membuat CAPTCHA sederhana menggunakan HTML, CSS, dan JavaScript.
1. Membuat Struktur HTML
Langkah pertama adalah membuat struktur HTML dasar untuk CAPTCHA. Berikut adalah contoh kode HTML untuk CAPTCHA sederhana:
html
<!DOCTYPE html>
2. Menambahkan Gaya dengan CSS
Selanjutnya, tambahkan gaya untuk CAPTCHA menggunakan CSS. Berikut adalah contoh kode CSS untuk mengatur tampilan CAPTCHA:
css
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.captcha-container {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
