Saat ini CAPTCHA merupakan bagian integral dari keamanan situs web. Jutaan tes CAPTCHA diselesaikan online setiap hari.

Jika Anda belum menerapkan validasi CAPTCHA di situs web Anda, hal itu dapat menimbulkan masalah besar bagi Anda, menjadikan Anda sebagai target para pengirim spam.

Berikut semua yang perlu Anda ketahui tentang CAPTCHA dan bagaimana Anda dapat dengan mudah menerapkannya di situs web Anda menggunakan HTML, CSS, dan JavaScript.

Apa itu CAPTCHA?

CAPTCHA adalah singkatan dari "Completely Automated Public Turing test untuk membedakan Komputer dan Manusia." Istilah ini diciptakan pada tahun 2003 oleh Luis von Ahn, Manuel Blum, Nicholas J. Hopper, dan John Langford. Ini adalah jenis uji tantangan-respons yang digunakan untuk menentukan apakah pengguna adalah manusia atau bukan.

CAPTCHA menambahkan keamanan ke situs web dengan memberikan tantangan yang sulit dilakukan oleh bot, tetapi relatif mudah bagi manusia. Misalnya, sulit untuk mengidentifikasi semua gambar mobil dari serangkaian gambar yang banyak untuk bot, tetapi cukup sederhana untuk mata manusia.

Ide CAPTCHA berasal dari Uji Turing. Tes Turing adalah metode untuk menguji apakah sebuah mesin dapat berpikir seperti manusia atau tidak. Menariknya, tes CAPTCHA dapat disebut "Tes Turing terbalik" karena dalam kasus ini, komputer membuat tes yang menantang manusia.

Mengapa Situs Anda Membutuhkan Validasi CAPTCHA?

CAPTCHA terutama digunakan untuk mencegah bot mengirimkan formulir secara otomatis dengan spam dan konten berbahaya lainnya. Bahkan perusahaan seperti Google menggunakannya untuk mencegah sistem mereka dari serangan spam. Berikut adalah beberapa alasan mengapa situs web Anda dapat memperoleh manfaat dari validasi CAPTCHA:

• CAPTCHA membantu mencegah peretas dan bot melakukan spamming pada sistem pendaftaran dengan membuat akun palsu. Jika tidak dicegah, mereka dapat menggunakan akun tersebut untuk tujuan jahat.
• CAPTCHA dapat melarang serangan masuk paksa dari situs web Anda yang digunakan peretas untuk mencoba masuk menggunakan ribuan kata sandi.
• CAPTCHA dapat membatasi bot untuk melakukan spamming pada bagian ulasan dengan memberikan komentar palsu.
• CAPTCHA membantu mencegah inflasi tiket karena beberapa orang membeli sejumlah besar tiket untuk dijual kembali. CAPTCHA bahkan dapat mencegah pendaftaran palsu untuk acara gratis.
• CAPTCHA dapat membatasi penjahat dunia maya dari mengirim spam ke blog dengan komentar dan tautan cerdik ke situs web berbahaya.

Ada lebih banyak alasan yang mendukung pengintegrasian validasi CAPTCHA ke situs web Anda. Anda dapat melakukannya dengan kode berikut.

Kode CAPTCHA HTML

HTML, atau HyperText Markup Language, menjelaskan struktur halaman web. Gunakan Kode HTML berikut untuk menyusun Formulir Validasi CAPTCHA Anda:

Captcha Validator Menggunakan HTML, CSS dan JavaScript



teks captcha




Menyegarkan

Kode ini terutama terdiri dari 7 elemen:

• : Elemen ini digunakan untuk menampilkan judul formulir CAPTCHA.
• : Elemen ini digunakan untuk menampilkan teks CAPTCHA.
• - Elemen ini digunakan untuk membuat kotak input untuk mengetik CAPTCHA.
• : Tombol ini mengirimkan formulir dan memeriksa apakah CAPTCHA dan teks yang diketik sama atau tidak.
• : Tombol ini digunakan untuk menyegarkan CAPTCHA.
• : Elemen ini digunakan untuk menampilkan keluaran sesuai dengan teks yang dimasukkan.
• : Ini adalah elemen induk yang berisi semua elemen lainnya.

File CSS dan JavaScript ditautkan ke halaman HTML ini melalui dan elemen masing-masing. Anda harus menambahkan tautan tag di dalam kepala tag dan naskah tag di akhir tubuh.

Anda juga dapat mengintegrasikan kode ini dengan bentuk situs web Anda yang sudah ada.

Terkait: Lembar Curang Esensial HTML: Tag, Atribut, dan Lainnya

Kode CAPTCHA CSS

CSS, atau Cascading Style Sheets, digunakan untuk mengatur style elemen HTML. Gunakan kode CSS berikut untuk mengatur gaya elemen HTML di atas:

@ort url (' https://fonts.googleapis.com/css2?family=Roboto&display=swap');
tubuh {
warna-latar belakang: # 232331;
font-family: 'Roboto', sans-serif;
}
#captchaBackground {
tinggi: 200px;
lebar: 250px;
warna-latar belakang: # 2d3748;
tampilan: flex;
sejajarkan-item: tengah;
justify-content: center;
arah fleksibel: kolom;
}
#captchaHeading {
warna putih;
}
#captcha {
margin bawah: 1em;
ukuran font: 30px;
spasi huruf: 3px;
warna: # 08e5ff;
}
.center {
tampilan: flex;
arah fleksibel: kolom;
sejajarkan-item: tengah;
}
#submitButton {
margin-top: 2em;
margin bawah: 2em;
warna-latar belakang: # 08e5ff;
batas: 0px;
font-weight: bold;
}
#refreshButton {
warna-latar belakang: # 08e5ff;
batas: 0px;
font-weight: bold;
}
#kolom tulisan {
tinggi: 25px;
}
.Captcha yang salah {
warna: # FF0000;
}
.correctCaptcha {
warna: # 7FFF00;
}

Tambahkan atau hapus properti CSS dari kode ini sesuai dengan preferensi Anda. Anda juga dapat memberikan tampilan yang elegan pada wadah formulir menggunakan Properti CSS box-shadow.

Kode CAPTCHA JavaScript

JavaScript digunakan untuk menambahkan fungsionalitas ke halaman web yang statis. Gunakan kode berikut untuk menambahkan fungsionalitas lengkap ke formulir validasi CAPTCHA:

// document.querySelector () digunakan untuk memilih elemen dari dokumen menggunakan ID-nya
biarkan captchaText = document.querySelector ('# captcha');
biarkan userText = document.querySelector ('# textBox');
biarkan submitButton = document.querySelector ('# submitButton');
biarkan output = document.querySelector ('# output');
let refreshButton = document.querySelector ('# refreshButton');
// alphaNums berisi karakter yang Anda inginkan untuk membuat CAPTCHA
biarkan alphaNums = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L ',' M ',' N ',' O ',' P ',' Q ',' R ',' S ',' T ',' U ',' V ',' W ',' X ', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', ​​'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p ',' q ',' r ',' s ',' t ',' u ',' v ',' w ',' x ',' y ',' z ',' 0 ',' 1 ', '2', '3', '4', '5', '6', '7', '8', '9'];
biarkan emptyArr = [];
// Perulangan ini menghasilkan string acak yang terdiri dari 7 karakter menggunakan alphaNums
// Selanjutnya string ini ditampilkan sebagai CAPTCHA
untuk (misalkan i = 1; saya <= 7; i ++) {
emptyArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = emptyArr.join ('');
// Pendengar acara ini terstimulasi setiap kali pengguna menekan tombol "Enter"
// "Benar!" atau pesan "Salah, coba lagi"
// ditampilkan setelah memvalidasi teks input dengan CAPTCHA
userText.addEventListener ('keyup', function (e) {
// Nilai Kode Kunci Tombol "Enter" adalah 13
jika (e.keyCode 13) {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Benar!";
} lain {
output.classList.add ("kesalahanCaptcha");
output.innerHTML = "Salah, silakan coba lagi";
}
}
});
// Pemroses acara ini terstimulasi setiap kali pengguna mengklik tombol "Kirim"
// "Benar!" atau pesan "Salah, coba lagi"
// ditampilkan setelah memvalidasi teks input dengan CAPTCHA
submitButton.addEventListener ('click', function () {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Benar!";
} lain {
output.classList.add ("kesalahanCaptcha");
output.innerHTML = "Salah, silakan coba lagi";
}
});
// Pendengar acara ini terstimulasi setiap kali pengguna menekan tombol "Segarkan"
// CAPTCHA acak baru dibuat dan ditampilkan setelah pengguna mengklik tombol "Segarkan"
refreshButton.addEventListener ('click', function () {
userText.value = "";
biarkan refreshArr = [];
untuk (misalkan j = 1; j <= 7; j ++) {
refreshArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = refreshArr.join ('');
output.innerHTML = "";
});

Sekarang Anda memiliki formulir validasi CAPTCHA yang berfungsi penuh! Jika Anda ingin melihat kode lengkapnya, Anda dapat mengkloning Repositori GitHub dari Proyek CAPTCHA-Validator ini. Setelah menggandakan repositori, jalankan file HTML dan Anda akan mendapatkan output berikut:

Ketika Anda memasukkan kode CAPTCHA yang benar di kotak input, output berikut akan ditampilkan:

Ketika Anda memasukkan kode CAPTCHA yang salah di kotak input, output berikut akan ditampilkan:

Jadikan Situs Anda Aman Dengan CAPTCHA

Di masa lalu, banyak organisasi dan bisnis menderita kerugian besar seperti pelanggaran data, serangan spam, dll. sebagai akibat dari tidak adanya formulir CAPTCHA di situs web mereka. Sangat disarankan untuk menambahkan CAPTCHA ke situs web Anda, karena ini menambahkan lapisan keamanan untuk mencegah situs web dari penjahat dunia maya.

Google juga meluncurkan layanan gratis yang disebut "reCAPTCHA" yang membantu melindungi situs web dari spam dan penyalahgunaan. CAPTCHA dan reCAPTCHA tampak serupa, tetapi keduanya tidak persis sama. Terkadang CAPTCHA merasa frustasi dan sulit dipahami oleh banyak pengguna. Meskipun, ada alasan penting mengapa mereka dibuat sulit.

Bagaimana Cara Kerja CAPTCHA dan Mengapa Sangat Sulit?

CAPTCHA dan reCAPTCHA mencegah spam. Bagaimana mereka bekerja? Dan mengapa menurut Anda CAPTCHA begitu sulit untuk dipecahkan?

Baca Selanjutnya

Tentang Penulis