為防範有心人士利用網路機器人程式來猜測帳號與密碼,現在各大網站的會員登入系統,大多會多加一道
「圖型驗證碼」 的檢查,用以驗明正身,若今天我們也想為我們自己的網站也新增一個圖型驗證碼功能會很困難嗎?其實不會,之前YOGO以在
「Captcha圖型驗證 - Dreamweaver外掛篇」 提到使用DW外掛的解決方法及
「Captcha 圖形驗證 - Free API 篇(1)」提到使用第三方免費API的解決方法,及
「Captcha圖型驗證 - 手工寫code篇」,但並不是每個人的電腦內都有DW這套軟體,也不是每個人都會想手工寫CODE ,畢竟這樣出錯的機率很高,所以第三方API就是一個不錯的選擇,YOGO再補上
「Captcha 圖形驗證 - Free API 篇(2)」,讓不是使用DW及不想手工寫CODE 的朋友也能有解決的方法
。 這次介紹的第三方API與上次介紹的 「Captcha 圖形驗證 - Free API 篇(1)」有很大的不同,不過它一樣有「圖形驗證碼的文字與語音功能(也就是能用唸的給你聽)」 ;尤其國內的「yam天空」與國外很多的「免空」網站都使用該網站的API;有沒有覺得下方那張圖很眼熟阿,沒錯這次的最佳男主角就是它了 。 首先開起瀏覽器,然後輸入
「http://recaptcha.net」 。 在來點選
「MY ACCOUNT」連結
。 在來點選
「Sign up」連結
。 再來分別輸入
「帳號」、「密碼」、「再次確認密碼」、「E-MAIL」、「圖形驗證碼」,然後按「Sign up Now」送出註冊表單
。 再來是比較特別一點的,因為
「recaptcha的API」是以
「Domain(網域)」作為「KEY(使用鍵)」的產生依據,所以你必需有一個
「自有網域」,然後將網域名稱填入文字方框中,若你同時擁有多個網域,則可點選
「Sign up for multiple keys」一次輸入多個網域名稱,然後勾選
「Enable this key on all domains(global key)」,再來按一下
「Create Key」。 再來你會看到
「Domain Name(你剛註冊的網域名稱)」、「Public Key(公開金鑰)」、「Private Key(私密金鑰)」,其中「Public Key(公開金鑰)」與「Private Key(私密金鑰)」再來會用的到請把它記起來;因為我們是以PHP作為範例,所以請點選下方
「PHP」連結
。 點選下方
「Download」連結
。 再來點選下方
「recaptcha-php-1.10.zip」連結
。 將檔案存到
「網站根目錄底下」。 再來到
「網站根目錄底下」找到
「recaptcha-php-1.10.zip」這個壓縮檔
。 將它解壓縮到
「網站根目錄底下」。 然後進到
「recaptcha-php-1.10」資料夾底下
。 找到
「recaptchalib.php」這個檔案
。 將
「recaptchalib.php」這個檔案,複製到
「網站根目錄底下」。 開啟一個新的PHP檔,並輸如以下程式碼,然後存成index.php 1: <html>
2: <body>
3: <form action="" method="post">
4: <?php
5: require_once('recaptchalib.php');
6: $publickey = "公開金鑰";
7: $privatekey = "私密金鑰";
8:
9: # the response from reCAPTCHA
10: $resp = null;
11:
12: # the error code from reCAPTCHA, if any
13: $error = null;
14:
15: # are we submitting the page?
16: if ($_POST["submit"]) {
17: $resp = recaptcha_check_answer ($privatekey,
18: $_SERVER["REMOTE_ADDR"],
19: $_POST["recaptcha_challenge_field"],
20: $_POST["recaptcha_response_field"]);
21: if ($resp->is_valid) {
22: echo "You got it!";
23: # in a real application, you should send an email, create an account, etc
24: } else {
25:
26: # set the error code so that we can display it. You could also use
27: # die ("reCAPTCHA failed"), but using the error message is
28: # more user friendly
29: $error = $resp->error;
30: }
31: }
32: echo recaptcha_get_html($publickey, $error);
33: ?>
34: <br/>
35: <input type="submit" name="submit" value="submit" />
36: </form>
37: </body>
38: </html>
記得要把「$publickey」跟「$privatekey」這二個變數的內容改成你的「公開金鑰碼」跟「私密金鑰」。 然後開啟瀏覽器,並在網址列的地方輸入
「localhost」,然後在文字方框內填入驗證碼內容,然後按
「Submit」。 若看到如畫面的
「You go it!」,就表示一切都ok了
。 另外
「recaptcha的API」與
「captchas的API」不同的地方在於支援的程式語言很多,且也有
支援如「WordPress」、「phpbb」、「Drupal」、「Joomla」...等多種架站套件,並都有附範例可參考,有興趣的朋友可以參考看看
。 另外「recaptcha的API」在於支援或不支援「javascript」的環境下都可以使用。 另外「recaptcha的API」也支援以「AJAX」的方式進行處理。 「recaptcha的API」有一個很不方便的限制,若你是在開發環境中以「localhost」或「127.0.0.1」運行程式是ok的,但若是正式上線環境,就只能運行在你註冊的「Domain(網域)」中,若不是在註冊的「Domain(網域)」中運行,程式碼會無法發揮效用,不過你要增加「Domain(網域)」的話也不難,登入後即可新增,以下為官方的說明文字: Key Scope Your reCAPTCHA token is valid only at the domain you sign up for and any subdomains (due to the potential attack mentioned above). Some users require keys for multiple sites, for example, a development server and a production server or simply multiple sites hosted on the same server. Three techniques can be used to work around this:
- If one of your servers is "localhost" or "127.0.0.1", reCAPTCHA will not enforce the same-domain rule. Just use the same key as for the production server.
- Generate a key for a broader scope. For example, if your application is a.example.com and your test server is test.corp.example.com, generate a key for example.com.
- Generate a different key for each domain.
延伸閱讀:
Captcha 圖形驗證 - Free API 篇(1)
Captcha圖型驗證 - Dreamweaver外掛篇(PHP)篇
Captcha圖型驗證 - Dreamweaver外掛篇(ASP)篇
Captcha圖型驗證 - 手工寫code篇 Captcha圖形驗證 - 手工寫code篇(補遺篇) 如果覺得這篇文章對您有所幫助,在觀看完文章之餘,希望能點選下方方廣告或贊助YOGO1美元,當作是對YOGO的支持,讓YOGO更有寫作的動力。