YOGO生活誌: Captcha 圖形驗證

2010年1月2日

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

為防範有心人士利用網路機器人程式來猜測帳號與密碼，現在各大網站的會員登入系統，大多會多加一道「圖型驗證碼」的檢查，用以驗明正身，若今天我們也想為我們自己的網站也新增一個圖型驗證碼功能會很困難嗎？其實不會，之前YOGO以在「Captcha圖型驗證 - Dreamweaver外掛篇」提到DW的解決方法，但並不是每個人的電腦內都有DW這套軟體，另外YOGO之前也有寫一篇，「Captcha圖型驗證 - 手工寫code篇」，不過也不是每個人都會想手工寫CODE ，畢竟這樣出錯的機率很高，所以第三方API就是一個不錯的選擇，所以YOGO再補上「Captcha 圖形驗證 - Free API (1)篇」跟「Captcha 圖形驗證 - Free API (2)篇」，讓不是使用DW的朋友也能有解決的方法，另外這篇與「Captcha圖型驗證 - Dreamweaver外掛篇」不同之處，在於若圖型驗證碼內的文字看不清楚的話，可按下「Phonetic spelling（mp3）」連結，它會把驗證碼文字「唸給你聽」。

開啟瀏覽器，並輸入「http://captchas.net/」。

下方有各種程式語言的使用範例可參考。

找到「registration page」，點選進行帳號註冊。

依序輸入你的「名字」、「e-mail」與下方「圖形驗證內容」後，按「Submit」送出註冊資料。

註冊成功後會看到如下方的圖示。

再來去剛註冊的mail帳號中，會收到一封從 captchas.net 寄來的mail，其中

Your user name is ：xxxxxx
Your secret key is： xxxxxx

這二個內容要記起來，因為待會程式會用到，而mail下方有各種程式語言範例，而在此我們則是以PHP為範例，所以點選一下下方的PHP範例連結。

再來找到並點選一個名為「Captchas DotNet.php」的連結。

再來看到「This module can be downloaded」，點選後方的「here」連結，下載「Captchas DotNet.php」這個檔案。

將「Captchas DotNet.php」這個檔案儲存於網站根目錄底下。

在網站根目錄底下新增一個名為「tmp」的資料夾。

開啟一個新的php檔案，並輸如下面index.php的程式碼：

<?php
require_once 'CaptchasDotNet.php';
// Required Parameters
// Replace the values you receive upon registration at http://captchas.net.
//
// client: 'demo'
//
// secret: 'secret'
//
// Optional Parameters and defaults
//
// repository_prefix: '/tmp/captchasnet-random-strings' path to repository
// ATTENTION SAFE-MODE, YOU HAVE TO CHOOSE SOMETHING LIKE
// '/writable/path/captchasnet-random-strings'
//
// cleanup_time: '3600' (means max 1 hour between query and check)
//
// alphabet: 'abcdefghijklmnopqrstuvwxyz' (Used characters in captcha)
// We recommend alphabet without ijl: 'abcdefghkmnopqrstuvwxyz'
//
// letters: '6' (Number of characters in captcha)
//
// width: '240' (image width)
//
// height: '80' (image height)
//
// Usage
// $captchas = new CaptchasDotNet (<client>, <secret>,
// <repository_prefix>, <cleanup_time>,
// <alphabet>,<letters>,
// <height>,<width>);
//
// Don't forget same settings in check.asp
// Construct the captchas object.
$captchas = new CaptchasDotNet ('你的帳號', '你的密碼','tmp/','3600','abcdefghkmnopqrstuvwxyz','6','240','80');
?>
<html>
<head>
<title>PHP圖形驗證碼測</title>
</head>
<h1>PHP圖形驗證碼測</h1>
<form method="get" action="check.php">
<table>
<tr>
<td>
<input type="hidden" name="random" value="<?php echo $captchas->random () ?>" />
請任意輸入文字:</td><td><input name="message" size="60" />
</td>
</tr>
<tr>
<td>
請輸入驗證碼:
</td>
<td>
<input name="password" size="6" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<?php echo $captchas->image () ?>
<br> <a href="<?php echo $captchas->audio_url () ?>">Phonetic spelling (mp3)</a>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" value="送出" />
</td>
</tr>
</table>
</form>
</html>

其中
$captchas = new CaptchasDotNet ('你的帳號', '你的密碼','tmp/','3600','abcdefghkmnopqrstuvwxyz','6','240','80');

這一段的前二個參數需輸入你在captchas.net 註冊的帳號與captchas.net 給你的密碼，然後將檔案存成 index.php。

開啟一個新的php檔案，並輸如下面check.php的程式碼：

<?php
require_once 'CaptchasDotNet.php';
// See query.php for documentation
$captchas = new CaptchasDotNet ('你的帳號', '你的密碼','tmp/','3600','abcdefghkmnopqrstuvwxyz','6','240','80');
// Read the form values
$message = $_REQUEST['message'];
$password = $_REQUEST['password'];
$random_string = $_REQUEST['random'];
?>

<html>
<head>
<title>PHP圖形驗證碼測</title>
</head>
<h1>PHP圖形驗證碼測</h1>

<?php
// Check the random string to be valid and return an error message
// otherwise.
if (!$captchas->validate ($random_string))
{
echo '每一個的圖形驗證只能使用一次。目前的圖形驗證已被使用。再試一次。';
}
// Check, that the right CAPTCHA password has been entered and
// return an error message otherwise.
elseif (!$captchas->verify ($password))
{
echo '你輸入的圖形驗證有誤\'t 請重新輸入！！';
}
// Return a success message
else
{
echo '你已通過圖形驗證碼驗證，你輸入的文字訊息是<b>"' . $message . '"</b>';
}
?>
</html>

其中

$captchas = new CaptchasDotNet ('你的帳號', '你的密碼','tmp/','3600','abcdefghkmnopqrstuvwxyz','6','240','80');

這一段的前二個參數需輸入你在captchas.net 註冊的帳號與captchas.net 給你的密碼，然後將檔案存成check.php。

在來開啟瀏覽器，然後輸入「http://localhost」，若一切都無誤的話會看到如下的畫面，然後依照畫面提示輸入後，按下「送出」，即可進行測試，若圖型驗證碼內的文字看不清楚的話，可按下方的「Phonetic spelling（mp3）」，它會把驗證碼文字「唸給你聽」。

若驗證碼正確的話，即會看到如下的畫面。

延伸閱讀：
Captcha圖形驗證 - Free API 篇（2）
Captcha圖型驗證 - Dreamweaver外掛篇(PHP篇)
Captcha圖型驗證 - Dreamweaver外掛篇(ASP篇)Captcha圖型驗證 - 手工寫code篇
Captcha圖形驗證 - 手工寫code篇(補遺篇)