如何在 HTML 和 PHP 中创建自定义验证码

Question

每次提交表单和阻止垃圾邮件数据输入时，我们都会使用验证码来阻止垃圾邮件输入。有很多可用的验证码，但我正在尝试使用带有 html 和 jquery 的自定义代码创建自己的验证码。

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

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

    if(theform.CaptchaInput.value == ""){
        why += "- Please Enter CAPTCHA Code.\n";
    }
    if(theform.CaptchaInput.value != ""){
        if(ValidCaptcha(theform.CaptchaInput.value) == false){
            why += "- The CAPTCHA Code Does Not Match.\n";
        }
    }
    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('');
}

我的 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>

这是在表单提交中创建和使用自定义验证码的完整代码。这段代码很容易指出每一步。

Answer 1

正如@RiggsFolly 所说，这很容易破解 = 编写一个可以自动输入验证码的脚本。这很糟糕，因为 Captcha 的全部意义在于只允许人类继续进行..

我建议从 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);

这将生成带有验证码的图像，但这还不够，您需要以某种方式扭曲图像以使其更难破解。你可以通过各种方式做到这一点。cropping / 移动 / transforming / 缩放不同的图像部分，blurring 并以不同的方式扭曲它

请记住，您始终可以使用现有的工具，例如 google Capcha...