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)」連結,它會把驗證碼文字「唸給你聽」

00.jpg

開啟瀏覽器,並輸入http://captchas.net/
01.jpg

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

找到「registration page」,點選進行帳號註冊
03.jpg

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

註冊成功後會看到如下方的圖示
05.jpg

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

Your user name is :xxxxxx
Your secret key is: xxxxxx


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

再來找到並點選一個名為「Captchas DotNet.php」的連結
07.jpg
再來看到「This module can be downloaded」,點選後方的「here」連結,下載「Captchas DotNet.php」這個檔案
08.jpg

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

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

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

11.jpg

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

12.jpg

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

若驗證碼正確的話,即會看到如下的畫面
14.jpg

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


留言

這個網誌中的熱門文章

用PHP寄MAIL的方法

ImageMagick應用大全(一)

php安裝openssl的方法