Buat Borang Pengesahan CAPTCHA Menggunakan HTML, CSS dan JavaScript

Buat Borang Pengesahan CAPTCHA Menggunakan HTML, CSS dan JavaScript

Pada masa ini CAPTCHA adalah bahagian penting dalam keselamatan laman web. Berjuta-juta ujian CAPTCHA diselesaikan dalam talian setiap hari.





Sekiranya anda belum melaksanakan pengesahan CAPTCHA di laman web anda, ini dapat menimbulkan masalah besar bagi anda, menjadikan anda sebagai sasaran spammer.



Inilah semua yang perlu anda ketahui mengenai CAPTCHA dan bagaimana anda dapat menerapkannya dengan mudah di laman web anda menggunakan HTML, CSS, dan JavaScript.





Apa itu CAPTCHA?

CAPTCHA bermaksud 'Ujian Turing Awam Automatik Sepenuhnya untuk memberitahu Komputer dan Humans Apart.' Istilah ini diciptakan pada tahun 2003 oleh Luis von Ahn, Manuel Blum, Nicholas J. Hopper, dan John Langford. Ini adalah jenis ujian tindak balas cabaran yang digunakan untuk menentukan sama ada pengguna itu manusia atau tidak.

CAPTCHA menambah keselamatan ke laman web dengan memberikan cabaran yang sukar dilakukan oleh bot tetapi agak mudah bagi manusia. Sebagai contoh, mengenal pasti semua gambar kereta dari sekumpulan pelbagai gambar sukar untuk bot tetapi cukup mudah untuk mata manusia.



Idea CAPTCHA berasal dari Ujian Turing. Ujian Turing adalah kaedah untuk menguji sama ada mesin boleh berfikir seperti manusia atau tidak. Menariknya, ujian CAPTCHA dapat disebut sebagai 'Turing Test terbalik' kerana dalam hal ini, komputer membuat ujian yang menantang manusia.

Mengapa Laman Web Anda Memerlukan Pengesahan CAPTCHA?

CAPTCHA digunakan terutamanya untuk mengelakkan bot menghantar borang secara automatik dengan spam dan kandungan berbahaya yang lain. Malah syarikat seperti Google menggunakannya untuk mengelakkan sistem mereka daripada serangan spam. Berikut adalah beberapa sebab mengapa laman web anda mendapat manfaat daripada pengesahan CAPTCHA:



  • CAPTCHA membantu mencegah penggodam dan bot daripada menghantar spam ke sistem pendaftaran dengan membuat akaun palsu. Sekiranya tidak dicegah, mereka dapat menggunakan akaun tersebut untuk tujuan jahat.
  • CAPTCHA boleh melarang serangan masuk dengan kekerasan dari laman web anda yang digunakan oleh penggodam untuk mencuba log masuk menggunakan ribuan kata laluan.
  • CAPTCHA boleh menyekat bot daripada menghantar spam ke bahagian ulasan dengan memberikan komen palsu.
  • CAPTCHA membantu mencegah inflasi tiket kerana sebilangan orang membeli sebilangan besar tiket untuk dijual semula. CAPTCHA bahkan dapat mengelakkan pendaftaran palsu untuk acara bebas.
  • CAPTCHA boleh menyekat penjahat siber daripada menghantar spam ke blog dengan komen dan pautan yang tidak masuk akal ke laman web berbahaya.

Terdapat banyak lagi alasan yang menyokong pengintegrasian pengesahan CAPTCHA ke laman web anda. Anda boleh melakukannya dengan kod berikut.

ipad pro 11 inci vs 12.9

Kod HTML CAPTCHA

HTML, atau HyperText Markup Language, menerangkan struktur laman web. Gunakan Kod HTML berikut untuk menyusun Borang Pengesahan CAPTCHA anda:












captcha text



Refresh






Kod ini terdiri daripada 7 elemen:

  • : Elemen ini digunakan untuk menampilkan tajuk bentuk CAPTCHA.

  • : Elemen ini digunakan untuk memaparkan teks CAPTCHA.
  • - Elemen ini digunakan untuk membuat kotak input untuk menaip CAPTCHA.
  • : Butang ini menghantar borang dan periksa sama ada CAPTCHA dan teks yang ditaip sama atau tidak.
  • : Butang ini digunakan untuk menyegarkan CAPTCHA.
  • : Elemen ini digunakan untuk menampilkan output sesuai dengan teks yang dimasukkan.
  • : Ini adalah elemen induk yang mengandungi semua elemen lain.

Fail CSS dan JavaScript dihubungkan ke halaman HTML ini melalui dan unsur masing-masing. Anda mesti menambah pautan tag di dalam kepala teg dan skrip tag pada akhir badan .

Anda juga boleh mengintegrasikan kod ini dengan bentuk laman web anda yang ada.

Berkaitan: Lembaran Menipu Keperluan HTML: Teg, Atribut dan Banyak Lagi



Kod CSS CAPTCHA

CSS, atau Cascading Style Sheets, digunakan untuk menggayakan elemen HTML. Gunakan kod CSS berikut untuk menggayakan elemen HTML di atas:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
background-color: #232331;
font-family: 'Roboto', sans-serif;
}
#captchaBackground {
height: 220px;
width: 250px;
background-color: #2d3748;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#captchaHeading {
color: white;
}
#captcha {
height: 80%;
width: 80%;
font-size: 30px;
letter-spacing: 3px;
margin: auto;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.center {
display: flex;
flex-direction: column;
align-items: center;
}
#submitButton {
margin-top: 2em;
margin-bottom: 2em;
background-color: #08e5ff;
border: 0px;
font-weight: bold;
}
#refreshButton {
background-color: #08e5ff;
border: 0px;
font-weight: bold;
}
#textBox {
height: 25px;
}
.incorrectCaptcha {
color: #FF0000;
}
.correctCaptcha {
color: #7FFF00;
}

Tambahkan atau hapus sifat CSS dari kod ini mengikut pilihan anda. Anda juga dapat memberikan penampilan yang elegan pada bekas bentuk menggunakan Harta kotak bayangan CSS .

Kod CAPTCHA JavaScript

JavaScript digunakan untuk menambahkan fungsi ke laman web yang tidak statik. Gunakan kod berikut untuk menambahkan fungsi lengkap ke borang pengesahan CAPTCHA:

// document.querySelector() is used to select an element from the document using its ID
let captchaText = document.querySelector('#captcha');
var ctx = captchaText.getContext('2d');
ctx.font = '30px Roboto';
ctx.fillStyle = '#08e5ff';

let userText = document.querySelector('#textBox');
let submitButton = document.querySelector('#submitButton');
let output = document.querySelector('#output');
let refreshButton = document.querySelector('#refreshButton');

// alphaNums contains the characters with which you want to create the CAPTCHA
let 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'];
let emptyArr = [];
// This loop generates a random string of 7 characters using alphaNums
// Further this string is displayed as a CAPTCHA
for (let i = 1; i <= 7; i++) {
emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
}
var c = emptyArr.join('');
ctx.fillText(emptyArr.join(''),captchaText.width/4, captchaText.height/2);

// This event listener is stimulated whenever the user press the 'Enter' button
// 'Correct!' or 'Incorrect, please try again' message is
// displayed after validating the input text with CAPTCHA
userText.addEventListener('keyup', function(e) {
// Key Code Value of 'Enter' Button is 13
if (e.keyCode === 13) {
if (userText.value === c) {
output.classList.add('correctCaptcha');
output.innerHTML = 'Correct!';
} else {
output.classList.add('incorrectCaptcha');
output.innerHTML = 'Incorrect, please try again';
}
}
});
// This event listener is stimulated whenever the user clicks the 'Submit' button
// 'Correct!' or 'Incorrect, please try again' message is
// displayed after validating the input text with CAPTCHA
submitButton.addEventListener('click', function() {
if (userText.value === c) {
output.classList.add('correctCaptcha');
output.innerHTML = 'Correct!';
} else {
output.classList.add('incorrectCaptcha');
output.innerHTML = 'Incorrect, please try again';
}
});
// This event listener is stimulated whenever the user press the 'Refresh' button
// A new random CAPTCHA is generated and displayed after the user clicks the 'Refresh' button
refreshButton.addEventListener('click', function() {
userText.value = '';
let refreshArr = [];
for (let j = 1; j <= 7; j++) {
refreshArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
}
ctx.clearRect(0, 0, captchaText.width, captchaText.height);
c = refreshArr.join('');
ctx.fillText(refreshArr.join(''),captchaText.width/4, captchaText.height/2);
output.innerHTML = '';
});

Kini anda mempunyai borang pengesahan CAPTCHA yang berfungsi sepenuhnya! Sekiranya anda ingin melihat kod yang lengkap, anda boleh mengklonnya GitHub repositori CAPTCHA-Validator Project ini . Setelah mengklon repositori, jalankan fail HTML dan anda akan mendapat output berikut:

bagaimana untuk memeriksa temp gpu anda

Apabila anda memasukkan kod CAPTCHA yang betul di kotak input, output berikut akan dipaparkan:

Apabila anda memasukkan kod CAPTCHA yang salah di kotak input, output berikut akan dipaparkan:

Jadikan Laman Web Anda Selamat Dengan CAPTCHA

Pada masa lalu, banyak organisasi dan perniagaan telah mengalami kerugian besar seperti pelanggaran data, serangan spam, dll. Kerana tidak mempunyai borang CAPTCHA di laman web mereka. Sangat disyorkan untuk menambahkan CAPTCHA ke laman web anda, kerana ia menambahkan lapisan keselamatan untuk mengelakkan laman web dari penjenayah siber.

Google juga melancarkan perkhidmatan percuma yang disebut 'reCAPTCHA' yang membantu melindungi laman web dari spam dan penyalahgunaan. CAPTCHA dan reCAPTCHA kelihatan serupa, tetapi mereka tidak sama. Kadang-kadang CAPTCHA merasa kecewa dan sukar difahami oleh banyak pengguna. Walaupun, ada sebab penting mengapa mereka dibuat sukar.

Berkongsi Berkongsi Tweet E-mel Bagaimana CAPTCHA Berfungsi dan Mengapa Mereka Sukar?

CAPTCHA dan reCAPTCHA mencegah spam. Bagaimana mereka berfungsi? Dan mengapa anda menganggap CAPTCHA sangat sukar untuk diselesaikan?

Baca Seterusnya Topik-topik yang berkaitan
  • Pengaturcaraan
  • HTML
  • JavaScript
  • CSS
Mengenai Pengarang Yuvraj Chandra(60 Artikel Diterbitkan)

Yuvraj adalah pelajar sarjana Sains Komputer di University of Delhi, India. Dia meminati Pembangunan Web Stack Penuh. Ketika dia tidak menulis, dia meneroka kedalaman teknologi yang berbeza.

Lagi Dari Yuvraj Chandra

Langgan buletin kami

Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!

Klik di sini untuk melanggan