在網站中安裝核取方塊金鑰 (核取方塊驗證)

自動算繪小工具

使用這個方法，您可以在任何物件 (例如 div 或 span) 上，透過 g-recaptcha 類別算繪小工具。

在網頁上，加入必要的 JavaScript 資源和具有 g-recaptcha 類別的 HTML 元素。

在具有 g-recaptcha 類別的元素中，也請加入 data-sitekey 屬性，並將其設為等於核取方塊鍵。

如要指定動作，請加入 data-action 屬性，並設為動作名稱。如需更多指引，請參閱「動作」。

必須使用 HTTPS 通訊協定載入指令碼，且可從網頁上的任何位置加入，不受限制。

reCAPTCHA 預設會使用瀏覽器的語言。如要指定其他語言，請在指令碼中使用 hl=LANG 屬性。舉例來說，如要使用法文，請指定下列項目： 。 如要瞭解支援的語言，請參閱 reCAPTCHA 的語言代碼。

以下是程式碼範例片段：

    
      
        
        
      
      
        

          
KEY_ID" data-action="LOGIN">
          

          
        
      
    

明確轉譯小工具

使用這個方法，您可以透過現有的 JavaScript 指令碼，使用 grecaptcha.enterprise.render() 方法算繪小工具。如要避免競爭狀況，或根據現有的 JavaScript 邏輯顯示小工具，請使用這個方法。

為確保明確算繪小工具時不會發生競爭條件，請參閱下列注意事項：

• 請先依序排列回呼函式和 reCAPTCHA API 的指令碼。
• 在 script 標記中使用 async 和 defer 參數。

如要明確算繪小工具，請按照下列步驟操作：

1. 如要延後小工具的算繪作業，請按照下列步驟操作：

   1. 載入 reCAPTCHA API 和其他依附元件之前，請先指定 onload 回呼函式。

   2. 執行回呼函式後，請使用 JavaScript API 中的下列參數呼叫 grecaptcha.enterprise.render() 方法。

      • container：用於轉譯 reCAPTCHA 小工具的 HTML 元素。 指定容器的 ID (字串) 或 DOM 元素本身。

      • parameters：含有參數的物件，以鍵/值組合表示，例如 {"sitekey": "KEY_ID", "theme": "light"}。

      • action：指定與受保護元素相關聯的動作名稱。

      grecaptcha.enterprise.render('html_element', {
         'sitekey' : 'KEY_ID',
         'action': 'LOGIN',
       });
      

2. 如要算繪小工具，請插入 JavaScript 資源。將 onload 設為 onload 回呼函式的名稱，並加入 render=explicit。

   reCAPTCHA 預設會使用瀏覽器的語言。如要指定其他語言，請在指令碼中使用 hl=LANG 屬性。舉例來說，如要使用法文，請指定下列項目： 。 如要瞭解支援的語言，請參閱 reCAPTCHA 的語言代碼。

範例 1

下列程式碼範例顯示 onload 回呼後的明確算繪：

示例 2

下列程式碼範例顯示多個小工具的明確算繪方式：