Membuat Captcha Text Generator

Istilah "CAPTCHA" (berasal dari kata bahasa Inggris "capture" atau menangkap) diciptakan pada tahun 2000 oleh Luis von Ahn, Manuel Blum, Nicholas J. Hopper (semua dari Carnegie Mellon University), dan John Langford (IBM). Istilah ini adalah akronim bahasa Inggris dari "Completely Automated Public Turing test to tell Computers and Humans Apart" (Uji Turing Publik Terotomatisasi Penuh untuk membedakan Komputer dan Manusia). Carnegie Mellon University berupaya mematenkan istilah ini, tapi aplikasi merek dagang mereka dibatalkan pada 21 April 2008. Saat ini pencipta CAPTCHA menganjurkan penggunaan reCAPTCHA sebagai penerapan resmi.[sumber]

Jenis-Jenis CAPTCHA

Sampai saat ini CAPTCHA sudah banyak mengalami perkembangan, jenis-jenisnya pun ternyata semakin bervariasi. Berikut beberapa jenis CAPTCHA yang mungkin sering kita lihat dan temui.

1. Text CAPTCHA Text CAPTCHA - merupakan salah satu jenis CAPTCHA yang sederhana dan sering ditemui. Kita mungkin sering menemuinya juga di berbagai situs di internet. Text CAPTCHA ini meminta kita untuk memasukan beberapa angka, huruf, atau kombinasi keduanya yang ditampilkan
2. Picture Recognition CAPTCHA - Picture Recognition CAPTCHA juga merupakan salah satu jenis CAPTCHA yang paling sering ditemui di internet. CAPTCHA jenis ini akan menampilkan beberapa kotak berisi foto dan kita harus memilih foto yang sesuai dengan keyword yang ada. Misalnya, CAPTCHA meminta untuk kita memilih foto crosswalk. Maka kita tinggal memilih kotak berisi foto crosswalk dan klik “next” untuk lanjut, atau klik “skip” kalau tidak ada foto crosswalk.
3. I am not a robot CAPTCHA - I am not a robot CAPTCHA merupakan jenis CAPTCHA yang sangat mudah. Jika kamu bertemu CAPTCHA jenis ini, kamu hanya perlu mengklik sebuah kotak hingga muncul sebuah ceklis untuk menyatakan kalau kamu bukan sebuah robot.

Dalam pembahasan kali ini saya akan membuat captcha text generator seperti demo dibawah ini yang dapat Anda terapkan di website ataupun blog. script yang saya bagikan ini dapat Anda rubah dan sesuaikan dengan kebutuhan blog ataupun website Anda masing-masing.

Demo

See the Pen Untitled by xhref (@xhref) on CodePen.

Code

/* xhref */
/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {

  align-items: center;
  justify-content: center;

}
.container {
  position: relative;
  max-width: 300px;
  width: 100%;
  border-radius: 12px;
  padding: 15px 25px 25px;
  background: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
header {
  color: #333;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}
.input_field {
  position: relative;
  height: 45px;
  margin-top: 15px;
  width: 100%;
}
.refresh_button {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background: orange;
  height: 30px;
  width: 30px;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}
.refresh_button:active {
  transform: translateY(-50%) scale(0.98);
}
.input_field input,
.button button {
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  border-radius: 8px;
}
.input_field input {
  padding: 0 15px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.captch_box input {
  color: #6b6b6b;
  font-size: 22px;
  pointer-events: none;
}
.captch_input input:focus {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
.message {
  font-size: 14px;
  margin: 14px 0;
  color: purple;
  display: none;
}
.message.active {
  display: block;
}
.button button {
  background: orange;
  color: #fff;
  cursor: pointer;
  user-select: none;
}
.button button:active {
  transform: scale(0.99);
}
.button.disabled {
  opacity: 0.6;
  pointer-events: none;
}
/* xhref */

 <script>
    // this code is provided by helpme_coder
// Selecting necessary DOM elements
const captchaTextBox = document.querySelector(".captch_box input");
const refreshButton = document.querySelector(".refresh_button");
const captchaInputBox = document.querySelector(".captch_input input");
const message = document.querySelector(".message");
const submitButton = document.querySelector(".button");

// Variable to store generated captcha
let captchaText = null;

// Function to generate captcha
const generateCaptcha = () => {
  const randomString = Math.random().toString(36).substring(2, 7);
  const randomStringArray = randomString.split("");
  const changeString = randomStringArray.map((char) => (Math.random() > 0.5 ? char.toUpperCase() : char));
  captchaText = changeString.join("   ");
  captchaTextBox.value = captchaText;
  console.log(captchaText);
};

const refreshBtnClick = () => {
  generateCaptcha();
  captchaInputBox.value = "";
  captchaKeyUpValidate();
};

const captchaKeyUpValidate = () => {
  //Toggle submit button disable class based on captcha input field.
  submitButton.classList.toggle("disabled", !captchaInputBox.value);

  if (!captchaInputBox.value) message.classList.remove("active");
};

// Function to validate the entered captcha
const submitBtnClick = () => {
  captchaText = captchaText
    .split("")
    .filter((char) => char !== " ")
    .join("");
  message.classList.add("active");
  // Check if the entered captcha text is correct or not
  if (captchaInputBox.value === captchaText) {
    message.innerText = "Entered captcha is correct";
    message.style.color = "#826afb";
  } else {
    message.innerText = "Entered captcha is not correct";
    message.style.color = "#FF2525";
  }
};

// Add event listeners for the refresh button, captchaInputBox, submit button
refreshButton.addEventListener("click", refreshBtnClick);
captchaInputBox.addEventListener("keyup", captchaKeyUpValidate);
submitButton.addEventListener("click", submitBtnClick);

// Generate a captcha when the page loads
generateCaptcha();

// xhref</script>

Silahkan edit CSS dan sesuaikan dengan kebutuhan web Anda. Cukup sekian pembahasan tentang Captcha Text Generator. Semoga bermanfaat.