Captcha圖形驗證 - Dreamweaver外掛篇－YOGO生活誌

為防範有心人士利用網路機器人程式來猜測帳號與密碼，現在各大網站的會員登入系統，大多會多加一道「圖型驗證碼」的檢查，用以驗明正身，若今天我們也想為我們自己的網站也新增一個圖型驗證碼功能會很困難嗎？其實不會，因為Dreamweaver有外掛可以幫我們完成大部份的工作。

首先開起瀏覽器，然後輸入以下網址「http://www.tecnorama.org/」。

點選左方的「DW Extensions」連結。

點選「PHP Captcha Image」中的「Read more」連結。

網站也有提供使用教學，有興趣的朋友可以看一下。

點選下方「You can download latest version fllowing this link」的連結。

下載並儲存「captcha_image_1_0_2.zip」這個壓縮檔。

下載完成後解壓縮檔案。

解壓縮後會得到一個名為「captcha_image_1_0_2」資料夾。

進入「captcha_image_1_0_2」資料夾後會看到一個名為「captcha_image.mxp」的Dreamweaver外掛安裝檔，跟一個名為「verdana.ttf」的字型檔。

執行「captcha_image.mxp」後開啟「Dreamweaver的外掛管理程式」，然後按一下「接受」，進行「captcha_image」外掛的安裝。

安裝完成後會，你會看到「Dreamweaver的外掛管理程式」中多出了一個名為「PHP Captcha Image」的外掛。

因為再來的程式會用到「verdana.ttf」這個字型檔。

所以先將它複製到「網站根目錄」底下。

因為「圖型驗證」中的程式會用到PHP中的「GD函式」，所以要先確定「GD函式是否開啟」；首先請先確定Dreamweaver的網站定義已設定完成，若不會設定請參考YOGO的「 Dreamweaver網站定義」教學；再來用Dreamweaver開啟一個新的php檔案，並輸入下方程式碼：

＜?php
　　phpinfo();
?＞

然後存檔命命名為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函式」已經成功啟用了。

再來用Dreamweaver開啟一個新的php檔案。

然後在「插入」面版中選擇「表單」。

然後點選「表單」選項，在檔案內插入表單。

並在表單內輸入以下文字「請輸入驗證碼：」。

點選「文字欄位」選項。

在「輸入標籤輔助功能屬性」中的「ID」欄位填入「captcha」，然後按「確定」。

請確認文字欄位的部份是否為「Captcha」、字元寬度欄位的部份是否「10」、最多字元數欄位的部份是否「5」。

點選「按鈕」選項。

在「輸入標籤輔助功能屬性」頁面中，直接按「確定」。

將上方的「設計師」模式下拉改選成「傳統」模式。

開啟「伺服器行為」-->「＋」-->「Captcha Image」。

以下的選項分別是：
Image widgh：圖片寬度。
Image height：圖片高度。
Number of char：圖形字元數。
Background color：背景顏色。
Text color：文字顏色。
Noise color：雜訊的顏色。
Captcha textfield：要填入圖型驗證表單的文字欄位名稱。
若無特殊需直接用預設值即可，然後按一下「確定」。