環境要求

• 能翻牆的電腦
• 域名

驗證原理

在谷歌recaptcha申請驗證金鑰，配置好伺服器的域名，在需要驗證的表單中嵌入google reCAPTCHA ,提交表單的時候將驗證成功生成的響應碼傳給後臺，後臺將響應碼post到谷歌的伺服器驗證地址，谷歌伺服器將返回驗證結果。生成響應碼的頁面域名必須是在谷歌頁面配置的域名才能生成，只有ip也不行。google reCAPTCHA在web端有3種形式的驗證

1.reCAPTCHA v3

在網頁載入的時候生成響應碼，不需要使用者進行任何操作。生成響應碼的時候會稍有延遲，比網頁載入完成會慢一點，確保了他人利用程式獲取html程式碼的方式不會獲取響應碼。加入reCAPTCHA v3 的頁面會有類似下面的圖示

2.reCAPTCHA v2 Checkbox 點選複選框

使用者點選複選框進行驗證成功後生成響應碼，圖示如下

3.reCAPTCHA v2 Invisible 自定義按鈕

開發人員自定義驗證的動作，驗證成功後呼叫生成響應碼的js程式碼生成響應碼即可。圖示與第1種相同。

申請金鑰

開啟網頁 https://www.google.com/recaptcha/admin 登入谷歌賬號，在Label下面的輸入專案名，然後選擇reCAPTCHA的型別，點選Register即可註冊完成，完成後可以得到Site key和Secret key。

配置域名

在上一步註冊好之後的頁面底下Domains的框中輸入需要驗證的域名，只有輸入的域名網站才有資格生成你的響應碼。

插入前端程式碼

在申請金鑰完成的頁面中按照給出的步驟Step1加入前端程式碼,比如如果是v3型別的驗證碼：

在html頭部引入js

<script src='https://www.google.com/recaptcha/api.js?render=你的Site key'></script>

由於國家防火牆的原因，大陸的網站需要將js替換為國內的js地址（js是在客戶端瀏覽器執行的，伺服器能翻牆也不行）

https://www.recaptcha.net/recaptcha/api.js

生成響應碼

<script>
grecaptcha.ready(function() {

	grecaptcha.execute('你的Site key', {action: 'action_name'})

.then(function(token) {

// 將這個生成的token傳給後臺

	});

});
</script>
 

後臺驗證

將前端傳過來的響應碼和你的Secret key傳送到谷歌驗證地址進行驗證，判斷返回資料即可

php示例：

<?php
function send_post($url, $post_data)
{
    $postdata = http_build_query($post_data);
    $options = array(
        'http' => array(
            'method' => 'POST',
            'header' => 'Content-type:application/x-www-form-urlencoded',
            'content' => $postdata,
            'timeout' => 15 * 60 // 超時時間（單位:s）
        )
    );
    $context = stream_context_create($options);
    $result = file_get_contents($url, false, $context);
    return $result;
}
		    
$post_data = array(        
	'secret' => '你的Secret key',        
	'response' => $_POST["g-recaptcha-response"]    //前端傳過來的響應碼
);

$recaptcha_json_result = send_post('https://www.google.com/recaptcha/api/siteverify', $post_data); 
$recaptcha_result = json_decode($recaptcha_json_result);   
//在這裡處理返回的值 
var_dump($recaptcha_result);    
?>

隱藏reCAPTCHA圖示

根據reCAPTCHA的服務條款（即你必須同意），您必須告知遊客有關網站上的驗證碼實現

但是有時候在手機頁面這麼大的一個圖示確實會影響到頁面效果，不得不隱藏的時候可以在前端做一下處理

• 設定data-badge屬性inline

  <button type="submit" data-sitekey="your_site_key" data-callback="onSubmit" data-badge="inline" /> 
  

• 新增CSS

  .grecaptcha-badge { 
      display: none; 
  }