reCAPTCHA v3

reCAPTCHA v3 會針對使用者要求傳回分數,使用者完全沒有阻礙。分數是根據網站的互動計算,方便您採取適當的行動。在 reCAPTCHA 管理控制台中註冊 reCAPTCHA v3 金鑰。

本頁說明如何在網頁上啟用及自訂 reCAPTCHA v3。

網站上的刊登位置

reCAPTCHA v3 不會對您的使用者造成乾擾,因此您隨時可以執行這項解決方案,而且完全不會影響轉換成效。reCAPTCHA 最適合用來處理與您網站互動的情境,而這一切都是源自於合法及濫用行為。因此,我們建議您在表單或動作及網頁背景中加入 reCAPTCHA 驗證,以便進行分析。

您可以針對同一頁面執行多項動作,不過不限次數。

自動將挑戰繫結至按鈕

在網頁上使用 reCAPTCHA v3 最簡單的方法,就是包含必要的 JavaScript 資源,並在 HTML 按鈕中加入一些屬性。

  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>
    

透過程式叫用挑戰

如要進一步控制 reCAPTCHA 執行的時間,您可以在 grecaptcha 物件中使用 execute 方法。如要這麼做,您必須在 reCAPTCHA 指令碼載入中加入 render 參數。

  1. 使用您的網站金鑰載入 JavaScript API。

    <script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>
    
  2. 針對您要保護的各項動作呼叫 grecaptcha.execute

       <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>
    
  3. 使用驗證要求將憑證立即傳送至您的後端。

解譯分數

reCAPTCHA v3 會傳回分數 (1.0 很可能是良好的互動,0.0 很可能是機器人)。根據分數,您可以在自己的網站上根據這些變數採取可行的動作。每個網站都各不相同,以下提供一些網站使用分數的範例。如下方範例所示,在背景執行動作,而不是封鎖流量,以加強保護您的網站。

用途 建議
首頁 在篩選過濾器時,你可在管理控制台中查看整體流量的統一檢視畫面。
login 如果分數偏低,需要進行雙重驗證或電子郵件驗證,以防止憑證填充攻擊。
社交 避免提出濫用使用者的好友要求,並且將有風險的留言傳送至審核機制。
電子商務 將您的實際銷售置於機器人之前並識別風險交易。

reCAPTCHA 透過解讀您網站上的實際流量來學習因此,在測試環境或實作之後不久的分數可能會與實際工作環境不同。由於 reCAPTCHA v3 不會中斷使用者流程,您可以先執行 reCAPTCHA,不需採取任何行動,然後透過「管理控制台」查看流量來判定門檻。根據預設,您可以使用 0.5 的門檻值。

動作

reCAPTCHA v3 導入了全新概念:動作。當您在執行 reCAPTCHA 的每個位置指定動作名稱時,即可啟用下列新功能:

  • 管理控制台中前十大動作的詳細分析資料
  • 濫用行為分析會根據動作的情境調整,因為濫用行為可能有所不同。

重要的是,當您驗證 reCAPTCHA 回應時,應確認動作名稱是否為您預期的名稱。

網站驗證回應

透過 reCAPTCHA v2 或 Invisible reCAPTCHA 提出驗證回應憑證的要求。

回應為 JSON 物件:

{
  "success": true|false,      // whether this request was a valid reCAPTCHA token for your site
  "score": number             // the score for this request (0.0 - 1.0)
  "action": string            // the action name for this request (important to verify)
  "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
}

提示

  1. grecaptcha.ready() 會在 reCAPTCHA 程式庫載入時執行函式。如要避免使用 api.js 的競爭狀況,請在呼叫 grecaptcha 的指令碼之前加上 api.js,或繼續使用 v2 API 定義的載入回呼
  2. 請嘗試將 execute 呼叫掛上有趣的或敏感動作,例如註冊、密碼重設、購買或播放。
  3. 使用 https://www.google.com/recaptcha/api.js?trustedtypes=true 載入與可信任類型相容的程式碼。