Captcha圖形驗證 - 手工寫code篇

為防範有心人士利用網路機器人程式來猜測帳號與密碼，現在各大網站的會員登入系統，大多會多加一道 「圖型驗證碼」 的檢查，用以驗明正身，若今天我們也想為我們自己的網站也新增一個圖型驗證碼功能會很困難嗎？其實不會，之前YOGO以在 「 Captcha圖型驗證 - Dreamweaver外掛篇 」 提到使用DW外掛的解決方法及 「Captcha 圖形驗證 - Free API 篇(1)」及「Captcha 圖形驗證 - Free API 篇(2)」提到使用第三方免費API的解決方法，但並不是每個人的電腦內都有DW這套軟體，也不是每個人都會想使用第三方API，所以YOGO再補上「 Captcha圖型驗證 - 手工寫code篇 」讓不是使用DW及不想使用第三方API的朋友也能有解決的方法 。


因為 「圖型驗證」中的程式會用到PHP中的 「GD函式」 ，所以要先確定 「GD函式是否開啟」 ； 開啟一個新的php檔案 ，並輸入下方程式碼：

   1: <?php 

   2: phpinfo(); 

   3: ?> 

然後存檔命命名為index.php ，接著開啟瀏覽器，然後在網址列的地方輸入 「http://localhost/」 。








再來我們找到PHP資訊中的「Loaded Configuration File」欄位，它所指的是我們 「目前PHP環境中所讀取的php.in位置」，由此範例中我們可以知道「目前PHP環境中所讀取的php.in位置是C:\WINDOWS\php.ini」。


 再來開啟 「C:\WINDOWS\php.ini」（請依個人的 「Loaded Configuration File 」所指定的位置開啟php.ini檔）。





然後找到 「extension=php_gd2.dll」這一行字，若前方有;號請把它移除，若找不到這一行請自己加上去，改好之後存檔並重啟web server 。








接著開啟瀏覽器，然後在網址列的地方輸入「 http://localhost/ 」 。





若php的環境資訊中有出現 「gd函式」 的項目，表示 「gd函式」 已經成功啟用了。











開啟一個新的PHP檔案，並輸入下方的程式碼，然後存檔成captcha.php。

   1: <?php 

   2: /* 

   3: 產生一個CAPTCHA圖形 

   4: 開始先定義一個新影像，定義其長寬 

   5: */ 

   6: $w = 300; 

   7: $h = 50; 

   8: $gfx = imagecreatetruecolor($w,$h); 

   9:  

  10: //開啟反鋸齒功能，這樣曲線比較好看 

  11: imageantialias($gfx,true); 

  12: //背景色設為白色 

  13: $white = imagecolorallocate($gfx,255,255,255); 

  14: imagefilledrectangle($gfx,0,0,$w-1,$h-1,$white); 

  15:  

  16: //產生一個6-8個字元的字串，只有大寫字母 

  17: $str = ''; 

  18: foreach(range(0,rand(5,7))as $r) { 

  19: $str .= chr(rand(65,90)); 

  20: } 

  21:  

  22: //用寬度除以長度，找出每一個字元的合適位置 

  23: $pos = $w / strlen($str); 

  24:  

  25: //現在我們可以用迴圈印出這些字元 

  26: foreach(range(0,strlen($str)-1) as $s) { 

  27: //隨機產生一個灰階顏色，但只有'比較暗的' 

  28: $shade = rand(0,100); 

  29: //宣告這個顏色 

  30: $tmpgray = imagecolorallocate($gfx,$shade,$shade,$shade); 

  31: //現在我們可以畫出這個字元，盡量用白色把它搞亂 

  32: imagettftext($gfx,//欲繪製的圖形物件 

  33: rand($h/3,$h/2),//字型大小，介於1/3高到1/2高 

  34: rand(-60,60),//傾斜角度，變化很大 

  35: $s*$pos+($pos*.4),//x,盡量讓兩邊平衡 

  36: rand($h*.5,$h*.7),//y,介於一半或更低一點之間做變化 

  37: $tmpgray,//欲貼上的顏色 - 灰色 

  38: 'arial.ttf',//欲使用的字型 

  39: $str{$s}//印出這個字元 

  40: ); 

  41: } 

  42: //再來用各種灰色線條交差貼於整個背景上 

  43: //從負數的高度一直畫到寬度，確保每個東西都有畫到 

  44: foreach(range(-$h,$w,5) as $x){ 

  45: //隨機產生一個灰色陰影，但不是最深的 

  46: $shade = rand(50,254); 

  47: $tmpgray = imagecolorallocate($gfx,$shade,$shade,$shade); 

  48: //從這裡開始畫兩條線，一條從對角線畫下來，一條對角線畫上去 

  49: //分別用稍稍傾斜的角度繪製 

  50: imageline($gfx,$x,0,$x+$h+rand(0,25),$h-1,$tmpgray); 

  51: imageline($gfx,$x,$h-1,$x+$h+rand(0,25),0,$tmpgray); 

  52: } 

  53:  

  54: //我們已經完成操作，但輸出之前，將真正的字串存入session變數裡 

  55: session_start(); 

  56: $_SESSION['captcha'] = $str; 

  57:  

  58: //讓瀏覽器知道我們準備輸出PNG 

  59: header('Content-type:image/png'); 

  60:  

  61: //然後輸出我們的影像 

  62: imagepng($gfx); 

  63: ?>

再開啟一個新的PHP檔案，並輸入下方的程式碼，然後存檔成index.php。

   1: <?php 

   2: //開啟PHP session 

   3: session_start(); 

   4: //如果這一頁是送給自己的 

   5: if(count($_POST)){ 

   6: //確定session captcha有設定 

   7: if(isset($_SESSION['captcha'])){ 

   8: //看看它和送出值是否相符 

   9: if($_SESSION['captcha'] === strtoupper($_POST['check'])) { 

  10: //比對相符，現在最重要的就是銷毀上一個session captcha 

  11: //以免使用者再次送出表單 

  12: unset($_SESSION['captcha']); 

  13: //再來程式應該做它自己的動作，例如導到別頁 

  14: //這裡我們只秀出恭喜字樣 

  15: echo "<p>恭喜你通過驗證！！</p>\n"; 

  16: }else{ 

  17: //錯誤嘗試 -- 讓使用者知道錯誤，然後這一頁繼續執行 

  18: //給他們一個新的captcha 

  19: echo "<p>對不起，你輸入的驗證碼有誤</p>\n"; 

  20: } 

  21: }else{ 

  22: //session captcha變數並未設定，這表示有人曾經送出成功過 

  23: //然後又用相同的session資訊擾亂我們 

  24: echo "<p>對不起，驗證碼以設定過，請重新設定</p>\n"; 

  25: } 

  26: } 

  27: ?> 

  28: <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"> 

  29: 驗證碼測試：<br /> 

  30: <img src="captcha.php" /><br /> 

  31: <input name="check" type="text"><br /> 

  32: <input name="Submit" type="submit"> 

  33: </form> 

接著開啟瀏覽器，然後在網址列的地方輸入「http://localhost/」，並在文字方塊內輸入圖型驗證碼，然後按下「送出查詢」 。








若一切無誤就會看到如下圖的畫面。








YOGO已將程式碼打包，若有需要的朋友可按下方連結下載。





程式碼下載： http://cid-62fad80d6087bdb2.skydrive.live.com/self.aspx/.Public/captcha^_YOGO.rar








延伸閱讀：


Captcha圖型驗證 - Dreamweaver外掛篇（PHP篇）

Captcha圖型驗證 - Dreamweaver外掛篇（ASP篇）


Captcha 圖形驗證 - Free API 篇（1）


Captcha 圖形驗證 - Free API 篇（2）


Captcha圖形驗證 - 手工寫code篇(補遺篇)

如果覺得這篇文章對您有所幫助，在觀看完文章之餘，希望能點選下方方廣告，當作是對YOGO的支持，讓YOGO更有寫作的動力。