[PHP教學]超方便的驗證碼套件Captcha Genie,幫你輕鬆在網頁上製作出圖片驗證碼!

15
52,963 人次

image

大家都應該看過網路上有形形色色的圖片驗證碼(Captcha),用來防止一些機器人程式惡意去網頁上留言或註冊,浪費系統的資源。但是如果你自己有開發網頁程式,要如何在自己的網頁上設計出又簡單、又有效的驗證碼呢?阿正老師今天介紹一套相當方便的套件「Captcha Genie」(驗證碼精靈),就能輕鬆幫你製作出各式各樣的驗證碼,PHP開發網頁的玩家們不妨試試看喔!

CAPTCHA(英文全名為Completely Automated Public Turing Test to tell Computers and Humans Apart),中文譯為「全自動區分計算機和人類的測試」,我們都常簡稱為「驗證碼」,是為了避免網路上的資源被一些自動程式所浪費,所以會以一些難辨識的圖形、文字、算術來讓使用者輸入,以確認在電腦前的是人類。CAPTCHA有相當多種,而且難度也都不一,越複雜的就越難破解,但是也會造成使用者的負擔,很容易產生一直輸入失敗的挫折感。因此有的CAPTCHA也加上了語音提示的功能,按下發音按鈕後就會念出圖片中的文字讓你輸入,例如常見的Google「reCAPTCHA」就是一種。

image

今天阿正老師要來介紹的這個Captcha Genie套件,就是一套相當簡單又實用的PHP驗證碼套件,除了可以選擇多種圖片背景、字型之外,還可設定文字的長度、字型大小、顏色,或是以簡單的數學運算式來做驗證。

Captcha Genie

 

一、安裝方式

下載Captcha Genie主程式,解壓縮到網頁中某個資料夾,建議可解到網站的根目錄中。解開後會產生一個captcha的資料夾,裡面有幾個檔案:

image

其中我們需要修改的「configuration.php」這個就是設定檔,其他的皆不用修改。

二、產生設定檔

1.

要修改設定檔我們可以用一般的文字編輯器來編輯configuration.php,裡面有完整的說明可以對照來修改。

image

2.如果你嫌麻煩,可以到官方網站上方點選「Customize」就可進入設定檔的產生器頁面。

畫面左方有多種選項可以設定,完成後按下〔Save and Show〕按鈕就可在畫面右方看到驗證碼的顯示結果,最後再按下「Download configuration file」將設定檔下載下來,下載後取代原來的configuration.php即可。

image

有哪些細部的設定可以修改呢? 請翻到本文的第二頁有介紹。

三、修改網頁檔

完成設定之後,修改你要出現圖片驗證碼的網頁,加上一段HTML碼:

<div><img src="/captcha/code.php" id="captcha"></div>

如果你希望讓使用者能重新整理驗證碼圖片,可以加上一段:

<a href="#" onclick="document.getElementById(‘captcha’).src =

document.getElementById(‘captcha’).src + ‘?’ + (new Date
()).getMilliseconds()">
重新整理</a>

例如我的HTML寫成這樣:

image

網頁顯示的結果就是:

image

是不是相當簡單呢?

>>請翻到下一頁:驗證輸入結果、詳細設定說明

15 意見

  1. 嗯…我有照你上面說的做 但是我驗證碼的圖出不來…
    而且單獨開captcha裡的code.php就可以
    路徑我也檢查過了沒有問題 程式如下

    請輸入驗證碼:

    重點是…他裡面給的範本captcha.html 開出來也沒有圖…
    瀏覽器不管用ie google也一樣沒有圖 所以應該不是瀏覽器的問題
    那真正的問題到底是??

  2. 請問站長, Captcha Genie 使用起來好像方便但是發現有個重要的問題, Captcha Genie 並不是免費的, 秀出驗證碼的過程很簡單但是要送到後端就出問題了, 不知站長有沒有實際測試過輸出?

    我這邊測試的結果是顯示程式碼有錯誤, 不知道是不是故意拿掉;
    我把 ; 補上去結果無論是否正確都會通過, 這樣讓人很困擾

    最重要的是既然不是免費, 如果站長有辦法改成正確可以送到後端的版本, 我們是不是也不能用在自己的網站?

  3. 這東西好像有一些BUG
    像是code.php中的變數$d3 忘記加上$ 不出錯才怪阿
    還有如果你是到他們官網去自訂並且下載configuration.php
    可能會出現圖片時有時無的問題(因為code.php編譯時出錯了)
    用原來內建的configuration.php就不會

  4. 測試成功了。
    剛開始圖片也是出不來,發現是php檔路徑問題,要注意source code放在哪裡,以及code.php那支要include的php的路徑。
    至於送到後台應如何核對,要看它的文件:howtoinstall.txt
    裡面有寫他是用哪個變數接post,要與哪個 session 核對…。這段要修改,似乎有錯,反正改成自己想要的 return 的值就好了。
    至於demo version消除的方式…我是偷懶用css把它剪掉…哈

發表迴響