JavaScript를 사용하여 Captcha 코드 생성기를 빌드합니다.

The better way to learn any programming language or framework is by building projects. Get out of the tutorial hell and build projects on your own.

소개

기본적으로 CAPTCHA 도구는 실제 사용자와 봇을 구별하는 데 사용됩니다. 그들이 어떻게 작동하는지 궁금한 적이 있습니까?
자체적으로 보안 문자 생성기를 구축하고 후드 아래에서 정확히 어떤 일이 발생하는지 이해해 봅시다. 자바스크립트 초보자라면 이 작은 프로젝트가 많은 도움이 될 것입니다.

애플리케이션 데모

코드를 작성해 봅시다 😎

보안문자 생성기는 일반적으로 확인 버튼, 새 버튼 생성, 코드를 입력하는 입력 필드, 이미지 형식의 보안문자 코드 4개 요소로 구성됩니다.

HTML, CSS는 여기에서 매우 간단합니다. 이제 JavaScript 부분을 이해해 봅시다.
주로 보안 문자 코드는 알파벳과 숫자로 구성됩니다.

// declaring and initializing some variables
let alphabets = "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz";
let status = document.getElementById('status');
// we'll use this status dom element to display the response while verifing the code
status.innerText = "Captcha Generator";
let captcha;

다음으로 두 개의 함수인 generate()와 check()를 만들어 봅시다. generate() 함수를 사용하여 새 캡차 코드를 생성합니다. 그리고 check() 함수를 사용하여 사용자가 입력한 코드와 생성된 캡차 코드를 검증합니다.

generate = () => {
let first = alphabets[Math.floor(Math.random() * alphabets.length)];
let second = Math.floor(Math.random() * 10);
let third = Math.floor(Math.random() * 10);
let fourth = alphabets[Math.floor(Math.random() * alphabets.length)];
let fifth = alphabets[Math.floor(Math.random() * alphabets.length)];
let sixth = Math.floor(Math.random() * 10);
captcha = first.toString()+second.toString()+third.toString()+fourth.toString()+fifth.toString()+sixth.toString();
// console.log(captcha);
// . . . . . 
}

Math.random() 내장 함수를 사용하여 난수를 생성했습니다. Math.random()here.에 대해 자세히 알아보십시오.
이제 captcha 변수는 6자리 captcha 코드를 보유합니다.
이제 아래 스니펫을 사용하여 보안문자 코드를 사용자에게 표시합니다.

generate = () => {
// . . . . 
document.getElementById('generated-captcha').value = captcha;
document.getElementById("entered-captcha").value = '';
status.innerText = "Captcha Generator"
}

다음 작업은 생성된 captcha 코드로 사용자가 입력한 코드를 확인하는 것입니다. 따라서 check() 함수를 사용하여 그렇게 하겠습니다.

check = () => {
    let userValue = document.getElementById("entered-captcha").value;
    if(userValue == captcha){
    // navigate him to next page or do anything
    status.innerText = "Correct!!"
}else{
    // tell user to enter the code again
    status.innerText = "Try Again!!"
    document.getElementById("entered-captcha").value = '';
}
}

간단합니다. 이제 이 간단한 프로젝트에 다음과 같은 몇 가지 기능을 더 추가합니다.

captcha 코드에 특수 문자(%, $, &...) 사용

다른 글꼴 사용

보안문자 코드의 길이를 동적으로 변경함

추가 정보

PHP 언어를 사용하여 이 captcha 확인을 구현할 수도 있습니다.
자신의 웹사이트에서 캡차 코드 확인을 구현하려는 경우 처음부터 구현하지 않고도 모든 API 서비스를 사용할 수 있습니다. 나머지는 API가 처리합니다.
여기에서 API에 대해 자세히 알아보세요.