如何在HTML和PHP中创建自定义Captcha

Question

Every time in form submission and to stop spam data entry, we use captcha for stop spam enteries. There are lot of captcha available but I am try to create my own captcha with custom code with html and jquery.

jQuery( document ).ready(function() {
    refresh_captcha();
});
// Captcha Script

function checkform(theform){
    var why = "";

    if(theform.CaptchaInput.value == ""){
        why += "- Please Enter CAPTCHA Code.
";
    }
    if(theform.CaptchaInput.value != ""){
        if(ValidCaptcha(theform.CaptchaInput.value) == false){
            why += "- The CAPTCHA Code Does Not Match.
";
        }
    }
    if(why != ""){
        alert(why);
        refresh_captcha();
        return false;
    }
}

function refresh_captcha(){
    var a = Math.ceil(Math.random() * 9)+ '';
    var b = Math.ceil(Math.random() * 9)+ '';
    var c = Math.ceil(Math.random() * 9)+ '';
    var d = Math.ceil(Math.random() * 9)+ '';
    var e = Math.ceil(Math.random() * 9)+ '';
    var f = Math.ceil(Math.random() * 9)+ '';
    var g = Math.ceil(Math.random() * 9)+ '';

    var code = a + b + c + d + e + f + g;
    jQuery("#CaptchaDiv").html(code);
    jQuery("#txtCaptcha").val(code);
    //document.getElementById("txtCaptcha").value = code;
    //document.getElementById("CaptchaDiv").innerHTML = code;
}

// Validate input against the generated number
function ValidCaptcha(){
    var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
    var str2 = removeSpaces(document.getElementById('CaptchaInput').value);
    if (str1 == str2){
        alert("Congratulation, Captcha Successfully Match.");
        return true;
    }else{
        return false;
    }
}

// Remove the spaces from the entered and generated code
function removeSpaces(string){
    return string.split(' ').join('');
}

My CSS

 .capbox {
         background-color: #92D433;
         border: #B3E272 0px solid;
         border-width: 0px 12px 0px 0px;
         display: inline-block;
         *display: inline; zoom: 1; /* FOR IE7-8 */
         padding: 8px 40px 8px 8px;
         }
         .capbox-inner {
         font: bold 11px arial, sans-serif;
         color: #000000;
         background-color: #DBF3BA;
         margin: 5px auto 0px auto;
         padding: 3px;
         -moz-border-radius: 4px;
         -webkit-border-radius: 4px;
         border-radius: 4px;
         }
         #CaptchaDiv {
         font: bold 17px verdana, arial, sans-serif;
         font-style: italic;
         color: #000000;
         background-color: #FFFFFF;
         padding: 4px;
         -moz-border-radius: 4px;
         -webkit-border-radius: 4px;
         border-radius: 4px;
         }
         #CaptchaInput { margin: 1px 0px 1px 0px; width: 135px; }
         button.refresh_captcha {
            padding: 0;
            border: none;
            background: transparent;
            /* width: 20px; */
            cursor: pointer;
        }
        button.refresh_captcha img {
            width: 30px;
            height: 30px;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="http://astro-global.blogspot.in/" onsubmit="return checkform(this);">
         <!-- START CAPTCHA -->
         <br>
         <div class="capbox">
            <div id="CaptchaDiv"></div>
            <div class="capbox-inner">
               Type the above number:<br>
               <input type="hidden" id="txtCaptcha">
               <input type="text" name="CaptchaInput" id="CaptchaInput" size="15"><br>
            </div>
         </div>
         <br><br>
         <!-- END CAPTCHA -->
         <button type="button" class="refresh_captcha" onclick="refresh_captcha();" title="Refresh Captcha Code"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/sync-01-128.png"></button>
         <input type="submit" value="Test Captcha">
      </form>

Here is the full code to create and use custom captcha in form submission. This code is very easy to point out every step.

Answer 1

As mentioned by @RiggsFolly, This is very easy to hack = write a script that can enter the Captcha automatically. This is bad because the whole point of Captcha is to allow only human to proceed..

I would suggest to start with that script, from here:

header('Content-Type: image/png');

// Create the image
$im = imagecreatetruecolor(400, 30);

// Create some colors
$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 128, 128, 128);
$black = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 399, 29, $white);

// The text to draw
$text = 'Testing...';
// Replace path by your own font path
$font = 'OpenSans-Regular.ttf';

// Add some shadow to the text
imagettftext($im, 20, 0, 11, 21, $grey, $font, $text);

// Add the text
imagettftext($im, 20, 0, 10, 20, $black, $font, $text);

// Using imagepng() results in clearer text compared with imagejpeg()
imagepng($im);
imagedestroy($im);

This will produce an image with the Capcha but this is not enough afterwards you need to distort the image somehow to make it harder to hack. you can to that in various ways.. cropping / moving / transforming / scaling different image parts, and blurring and distorting it in different ways

And remember that you can always use existing tools like google Capcha...