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

Question

每次在表单提交并停止垃圾邮件数据输入时，我们都会使用captcha来阻止垃圾邮件输入。有很多captcha可用，但我尝试用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); 

这将产生与CAPCHA的图像，但这是不够的，你需要以某种方式扭曲图像，使其更难以破解。你可以以各种方式.. cropping /移动/ transforming /缩放不同图像部分，以及blurring并以不同的方式

请记住，你总是可以利用现有的工具，如谷歌CAPCHA歪曲...