reCAPTCHA v3

reCAPTCHA v3 會傳回各項要求的分數,而且不會對使用者造成任何困擾。使用者與您網站的互動情形即為評分的依據,您可藉由這些互動為網站採取適當行動。在 reCAPTCHA 管理控制台中註冊 reCAPTCHA v3 金鑰。

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

網站上的刊登位置

reCAPTCHA v3 絕對不會幹擾使用者,因此您隨時可以執行,且能在不影響轉換的情況下執行。reCAPTCHA 最適合用來與您網站互動的背景資訊,因為 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. 使用 verify 要求,立即將權杖傳送至您的後端。

解譯分數

reCAPTCHA v3 會傳回分數 (1.0 很可能是良好的互動,0.0 很可能是機器人)。根據分數,您可以在您的網站內容中採取不同的動作。以下是網站使用分數的一些範例。如以下範例所示,為進一步保護您的網站,系統會在幕後採取行動,而不是封鎖流量。

應用實例 建議
首頁 在篩選抓取工具時,在管理控制台中統一檢視流量。
登入 如果分數低,需要雙重驗證或電子郵件驗證,以防止憑證填充攻擊。
社交 針對濫用使用者所發出的未回應好友邀請設下限制,並將有風險的留言送交審核。
電子商務 將您的實際銷售置於機器人之前並識別風險交易。

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