2009年12月9日

Captcha圖形驗證 - 手工寫code篇

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

00.jpg
因為 「圖型驗證」中的程式會用到PHP中的 GD函式」 ,所以要先確定 GD函式是否開啟」開啟一個新的php檔案 ,並輸入下方程式碼:
   1: <?php 











   2: phpinfo(); 











   3: ?> 







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


15.jpg





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


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


17.jpg


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


18.jpg





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


19.jpg


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


20.jpg









開啟一個新的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: ?>









01.jpg





再開啟一個新的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> 










02.jpg





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


03.jpg





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


04.jpg





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更有寫作的動力。




























7 則留言:

小加減 提到...

YOGO大你好,我有使用您的這個驗證碼程式,受益良多。但是我遇到一個問題,
那就是把這個驗證碼放在A網頁後,如果出現的驗證碼太模糊根本無法辦別需要換一個新的驗證碼,雖然可以在網頁A案重新整理,但是在A的表單內容就會不見了,有辦法只給驗證碼重新整理嗎???謝謝。

YOGO 提到...

參考一下這篇文章吧

Captcha圖形驗證 - 手工寫code篇(補遺篇)
http://blog.yogo.tw/2010/09/captcha-code.html

Unknown 提到...

YOGO大您好.我是php門外漢
看到您提供的驗證碼教學正是我所需要的
但將檔案下載傳上伺服器後
其他部分顯示都正常.但唯獨驗證碼圖片出不來
很厚臉皮的請教.不知道有什麼可能原因呢?
謝謝!

YOGO 提到...

因為你沒說清楚你的環境為何?所以我只能用猜的

1.是否有開啟GD功能
2.在程式碼38行中的
'arial.ttf',//欲使用的字型
你有放使用的這個arial.ttf字型檔案在資料夾中嗎?

會有問題大致不出這2個原因,不過詳細還是要看的的遠短短server設定才會知道,希望對你有所幫助

Nishi 提到...

您好,我使用了您的驗證碼程式來使用
我想套到表單頁面
但是我把程式碼放到表單頁面時
他卻失去了驗證功能
單獨打開驗證碼頁面是很正常的
想請問
我該怎麼樣套用才能正常使用 >"<?
謝謝您

YOGO 提到...

因為沒看到你的程式碼,且你說單獨使用是可以使用的,那表示不是主機環境跟圖型驗證有問題,問題是出在你表單那一頁,若方便的話把你的檔案mail給我,我幫你看一下,不過因為最近比較忙,不確定何時可以幫你看,這一點要麻煩你體諒一下

Nishi 提到...

謝謝您!!
待我將原始檔整理後在mail給您!!

聖誕跑趴歡樂降★韓版假兩件針織連衣裙$890,新款顯瘦棒球服連帽風衣外套下殺$510,冬新款歐美棉襖棉服連帽短款外套限量↘$530,秋冬新款韓版大碼毛領氣質毛料外套↘$680,快上左耳貓網路購物

您好!如圖太小看不清楚,請 點選此處 看詳細內容 左耳貓蝦皮賣場 https://shopee.tw/hrf5168 左耳貓 露天賣場 http://class.ruten.com.tw/user/index00.php?s=starbox 左耳貓粉...