reCAPTCHA是Google公司推出的一項驗證服務，使用十分方便快捷，在國外許多網站上均有使用。它與許多其他的人機驗證方式不同，它極少需要用戶進行各種識圖驗證。

它的使用方式如下如所示，只需勾選覆選框即可通過人機驗證。

雖然簡單但效果很好，因為Google會收集一些瀏覽器信息，網路信息，滑鼠軌跡等信息，最後通過神經網路判斷是否為機器人。而且reCAPTCHA還可以記錄並分析使用該人機驗證的請求次數，並對可以的請求進行統計和監管。

一些準備工作：
需要一個谷歌賬號沒有的先去註冊一個

• reCAPTCHA官網：https://developers.google.com/recaptcha/（需要kexue上網）
• 使用reCAPTCHA需要創建密匙對，創建密匙：https://www.google.com/recaptcha/admin

首先先創建密匙
進入 https://www.google.com/recaptcha/admin

創建成功後會產生一對密匙

前端部署

在你需要添加reCAPTCHA的界面添加script標簽

<script src="https://www.recaptcha.net/recaptcha/api.js"></script>

然後再你需要顯示reCAPTCHA驗證框的地方添加

<div class="g-recaptcha" data-sitekey="你的網站密匙"></div>

可以設置驗證框的主題預設主題為light，可以添加屬性：data-theme="dark" 變為暗色主題

方式一、自動將請求綁定到按鈕

1、載入JavaScript API

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

2、添加一個回調函數來處理令牌

     <script>
       function onSubmit(token) {
         document.getElementById("demo-form").submit();
       }
     </script>

3、向 html 按鈕添加屬性

    <button class="g-recaptcha" 
            data-sitekey="reCAPTCHA_site_key" 
            data-callback='onSubmit' 
            data-action='submit'>Submit</button>

方式二、以編程方式調用

為了大家方面理解，如上圖，可以先看看我做的一個demo：recaptcha

1、用 sitekey（站點秘鑰） 載入 JavaScript API

<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>

2、添加一個回調函數來處理令牌

     <script>
       function onSubmit(token) {
         document.getElementById("demo-form").submit();
       }
     </script>

3、在你需要進行人機驗證的操作上調用 grecaptcha.execute 方法

reCAPTCHA v3 引入了一個新概念——動作如：（ action: ‘submit / login’ ）。當你在每一個執行 reCAPTCHA 的地方指定一個動作名稱時，你啟用了以下新特性：

1、管理控制臺中前10個操作的詳細數據分解

2、Adaptive risk analysis based on the context of the action, because abusive behavior can vary.

操作可能只包含字母數字字元、斜線和下劃線。

       <script>
          function onClick(e) {
            e.preventDefault();
            grecaptcha.ready(function() {
              grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'}).then(function(token) {
                  // Add your logic to submit to your backend server here.
              });
            });
          }
      </script>

註意：

嘗試將執行調用掛鉤到有趣的動作，如註冊、密碼重置、購買或播放。

你可以使用ajax提交，也可以把 token 插入到 HTML 的 input hidden 隱藏框，一起提交到後端進行校驗。

4、將令牌（token）立即發送到網站後端，併發送要驗證的請求。

後端部署

在每次驗證完成後會生成一個g-recaptcha-response驗證碼，需要將這個驗證碼和你的密匙一起發送至：https://www.recaptcha.net/recaptcha/api/siteverify （使用GET方式傳參）

傳參的格式：secret=xxxxxx&response=xxxxxxx

下圖為需要傳遞的參數及其含義

介面返回的數據是json格式

    {
      "success": true|false,
      "challenge_ts": timestamp,  // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
      "hostname": string,         // the hostname of the site where the reCAPTCHA was solved
      "error-codes": [...]        // optional
    }

驗證通過後success返回的值為“true”，如果驗證失敗則會返回error-code，下麵為error-code及其對應原因

作者：倉儲大叔，張占嶺，
榮譽：微軟MVP
QQ：853066980

支付寶掃一掃，為大叔打賞!