如何在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歪曲...