如何整合“No CAPTCHA reCAPTCHA”（驗證碼）到你的網站裡

Chinese (Traditional) (中文（繁體）) translation by Stypstive (you can also view the original English article)

CAPTCHA輸入可能是最常見的一個令人失望的互聯網體驗。它們對於大多數用戶來說都已經足夠的痛苦了，就姑且不提那些模糊不清的圖片，又或者是那些依賴於像是閱讀屏幕發聲的輔助技術的用戶了。然而，悲哀的是，CAPTCHA也絕對是對抗垃圾郵件至關重要的一環。

A necessary evil thanks spammers — 一個必要的惡魔（感謝那些垃圾郵件發送者）

諷刺的是，即使傳統的"扭曲文本"Captcha"讓人類閱讀起來非常的尷尬，現代人工智能技術已經比較容易就能解決他們了。 Google甚至使用相似的技術來閱讀獨立屋的號碼和路牌來確認Google道路景觀的地點！

這件事情唯一的邏輯就是Google自己的程序員想出了一個最好的應對CAPTCHA的解決方式，直到2014年底為止。這個No CAPTCHA reCAPTCHA需要的東西不多，而只是一個手指的點擊、一個鼠標的點擊、或者將光標指向input並按空格鍵即可。

在大多數的情況下都應該是這麼簡單，但是如果Google的風險分析依然沒辦法確定你是個活人的話，一個第二步的提示就會彈出來。

你可以看到對於互聯網來說它的功能已經完全是即用的了，像是@materialup的提交頁面這個例子。

獲得No CAPTCHA reCAPTCHA

讓我們開門見山的開始設置我們自己的No CAPTCHA吧。

步驟1

首先，我們需要一個API key，所以前往https://www.google.com/recaptcha/admin來獲取。要想使用這個頁面，你需要登錄到一個Google的賬戶。你會被要求註冊你的網站，所以給它一個合適的名字，然後列出域名（舉個例子tutsplus.com）並指出你特別想使用reCAPTCHA的站點。子域名（比如webdesign.tutsplus.com和code.tutsplus.com）會自動的被添加到賬戶裡面。

步驟2

在完成了這一步之後，你會得到一個網站的key（密鑰）以及一個對應的秘密key（密鑰）：

步驟3

在密鑰的下面你會看見一些小片段用來放置到你的網站上以生成reCAPTCHA。首先是一段JavaScript代碼：

1	<script src='https://www.google.com/recaptcha/api.js'></script>

你可以同時來定義你將要使用的40種不同語言的支持，只需要添加以下參數到你的字符串即可。在這裡，我們將添加一個es，這個會給我們一個西班牙語的reCAPTCHA：

1	<script src='https://www.google.com/recaptcha/api.js?hl=es'></script>

將這個代碼標籤添加到你的頁腳（或者接著reCAPTCHA表單的位置添加在它後面也可以，這個取決於你如何決定讀取每一個資源的順序）。

步驟4

接下來，我們需要為你的表單結構添加一個佔位符來決定你希望在哪裡顯示這個reCAPTCHA區域：

1	<div class="g-recaptcha" data-sitekey="6LcePAATAAAAAGPRWgx90814DTjgt5sXnNbV5WaW"></div>

注意：data-sitekey屬性將會保存你的密鑰的值，而並不是下面這個隨便輸入的樣例。

其他的還有一些屬性你可以添加到你的reCAPTCHA來自定義它的外觀和功能。舉個例子，添加一個data-theme="dark"到這個div會給你的reCAPTCHA一個暗色調的版本，可能有時候你正需要這樣外觀的設計。

對於更多如何配置你的reCAPTCHA，你可以看看下面這個網站：developer.google.com。

將所有部件組裝在一起

現在我們已經有了最基礎的所有元素，並且是時候將它們放在一起放置到一個真實的工作環境中了。

步驟1

讓我們將腳本標籤和占位符首先放到一個簡單的表單裡面：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>How to Integrate Google “No CAPTCHA reCAPTCHA” on Your Website</title>
  </head>

  <body>

    <form action="" method="post">

      <label for="name">Name:</label>
      <input name="name" required><br />

      <label for="email">Email:</label>
      <input name="email" type="email" required><br />

      <div class="g-recaptcha" data-sitekey="6LcePAATAAAAAGPRWgx90814DTjgt5sXnNbV5WaW"></div>

      <input type="submit" value="Submit" />

    </form>

    <!--js-->
    <script src='https://www.google.com/recaptcha/api.js'></script>

  </body>
</html>

在這裡我們使用了barebones頁面結構並添加了一個包含了name input、email input和提交按鈕的一個表單。在這裡，我們並沒有添加任何的樣式因為我們並不太需要這些來完成我們的教程。

為了展示reCAPTCHA測試已經被通過了，我們需要運行一些服務器端的檢查。在這個情況下，我們需要使用PHP，所以將當前這個文件保存為一個新的項目並命名為index.php。

步驟2

你可能會注意到表單的類別是post，所以當我們提交表單數據的時候它會返回這個頁面並且還包括一個數組的變量。我們可以使用循環語句來輸出那些變量，所以添加以下代碼到你頁面的任意地方。

    <?php 
      foreach ($_POST as $key => $value) {
        echo '<p><strong>' . $key.':</strong> '.$value.'</p>';
      }
    ?>

這段代碼會調取每一對密鑰/值並放入$_POST數組裡面，接下來使用了一點格式輸出出來。現在，再當你提交表單的時候你應該會看到一些類似下圖的內容：

你會看到這些返回的name和email的值，而且還有g-recaptcha-response的值。如果你並沒有成功的完成CAPTCHA測試，這個值應該是空白的；但是如果你確實點擊了“我不是機器人”選項框，那麼你應該會看到一大串英文代碼的字符串。

這個就是我們需要發回給Google的值，這樣它們才可以來驗證其真偽，那麼我們接下來繼續。

步驟3

令人欣慰的是，Google的開發團隊已經幫我們完成了這一部分艱難的工作，所以你只需要到Github上面，找到ReCAPTCHA項目並且將它們拷貝到recaptchalib.php庫裡面即可。將它放置在你項目的根目錄下面，並且將其鏈接到你index.php文件的最頂端：

<?php

// grab recaptcha library
require_once "recaptchalib.php";

?>

步驟4

這個庫包含了一系列的功能，它們將使用HTTP請求發送g-recaptcha-response（以及我們的秘密key）到Google。然後它們將會獲取反饋回來的數據，並檢查CAPTCHA的驗證到底是通過了還是失敗了。要想實現這個功能，我們首先需要設置幾個變量，將它們放在PHP標籤結束之前：

// your secret key
$secret = "6LcePAATAAAAABjXaTsy7gwcbnbaF5XgJKwjSNwT";

// empty response
$response = null;

// check secret key
$reCaptcha = new ReCaptcha($secret);

ReCaptcha()檢查如果我們的秘密key是被包含的。如果它沒有找到秘密key，那麼它將終止進程並且建議我們來獲得一個key。接下來，我們將運行下面這些詳細信息：

// if submitted check response
if ($_POST["g-recaptcha-response"]) {
    $response = $reCaptcha->verifyResponse(
        $_SERVER["REMOTE_ADDR"],
        $_POST["g-recaptcha-response"]
    );
}

步驟5

我們假設我們提交了表單並且一切順利，$response變量會反饋回一個"成功"的數據，然後我們就可以繼續處理表單的數據了。這裡就是它有可能的結構：移除循環處理表單數據的那一部分代碼，然後在表單的最上面添加下面的檢查代碼：

    <?php
      if ($response != null && $response->success) {
        echo "Hi " . $_POST["name"] . " (" . $_POST["email"] . "), thanks for submitting the form!";
      } else {
    ?>

最後的，在表單之後添加一個閉合PHP的標籤：

1	<?php } ?>

這樣，包含CAPTCHA的表單就會顯示出來了，除非它已經成功的被提交了，那樣的話頁面上就會顯示一個小的感謝的提示。這裡就是最終的演示樣例

結論

這樣的結果可能是看起來非常的粗糙的以PHP為基礎的No CAPTCHA reCAPTCHA工具。不過它依然可以接受很廣泛的改進，在這裡，我們只是希望能提供給你最基本的理解。這個JS的庫應該歸功於Google開發團隊，並且我同時應該給予幫助我找到它的Matt Aussaguel一個特別感謝。

有用的資源

Github上的ReCAPTCHA 1.0.0版本
ReCAPTCHA技術資料
你是機器人麼？介紹"No CAPTCHA reCAPTCHA"的Google安全性博客
WordPress ReCaptcha整合 reCaptcha插件運用在登錄、註冊、評論表格、Ninja表單和Contact Form 7上。