隱形 reCAPTCHA

本頁面說明如何啟用及自訂網頁上隱形的 reCAPTCHA。

如要叫用隱形 reCAPTCHA，你可以：

如要瞭解如何自訂隱形 reCAPTCHA，請參閱「設定」。舉例來說，您可以指定語言或徽章位置。

請參閱「驗證使用者的回應」，確認使用者是否已成功解決人機驗證 (Captcha) 問題。

自動將挑戰繫結至按鈕

如要在網頁上使用隱形 reCAPTCHA 小工具，最簡單的方法就是加入必要的 JavaScript 資源，並在 HTML 按鈕中加入幾項屬性。必要屬性包括類別名稱「g-recaptcha」、「data-sitekey 屬性中的網站金鑰」，以及 JavaScript 回呼名稱，用於處理 data-callback 屬性中的人機驗證 (Captcha) 作業。

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
     <script>
       function onSubmit(token) {
         document.getElementById("demo-form").submit();
       }
     </script>
  </head>
  <body>
    <form id="demo-form" action="?" method="POST">
      <button class="g-recaptcha" data-sitekey="your_site_key" data-callback="onSubmit">Submit</button>
      <br/>
    </form>
  </body>
</html>

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

透過程式輔助方式將挑戰繫結至按鈕或叫用挑戰。

指定 onload 回呼函式，並在 JavaScript 資源中新增參數，即可延遲繫結。這與一般 reCAPTCHA 驗證問題相同。

透過程式輔助方式叫用挑戰。

如要以程式輔助方式叫用 reCAPTCHA 驗證，系統可以透過含有 data-size="invisible" 屬性的 div 轉譯驗證問題，並透過程式執行呼叫作業。

  1. 使用 data-size="invisible" 建立 div。

    <div class="g-recaptcha"
      data-sitekey="_your_site_key_"
      data-callback="onSubmit"
      data-size="invisible">
</div>

  2. 從 JavaScript 方法呼叫 grecaptcha.execute。

    grecaptcha.execute();

    執行回呼時，可以從 JavaScript API 呼叫 grecaptcha.render 方法。

設定

JavaScript 資源 (api.js) 參數

參數 值 說明
onload 選用設定。載入所有依附元件後，要執行的回呼函式名稱。
算繪 明確
載入		 選用設定。是否要明確顯示小工具。預設為 onload，將小工具顯示在找到的第一個 g-recaptcha 標記中。
hl 請參閱語言代碼 選用設定。強制小工具以特定語言顯示。如未指定，會自動偵測使用者的語言。

g-recaptcha 標記屬性和 grecaptcha.render 參數

g-recaptcha 標記屬性 grecaptcha.render 參數 值 預設 說明
資料網站金鑰 網站金鑰 您的網站金鑰。
資料徽章 徽章 右下角內嵌 右下方 選用設定。重新調整 reCAPTCHA 標記的位置。「內嵌」則可讓您透過 CSS 放置該廣告。
data-size size 隱藏 選用設定。用於建立繫結至 div 的隱藏小工具，並透過程式執行。
data-tabindex Tabindex 0 選用設定。挑戰的分頁索引。如果網頁中的其他元素使用分頁索引，請進行設定，讓使用者更容易瀏覽。
資料回呼 回呼 選用設定。回呼函式的名稱，在使用者提交成功回應時執行。g-recaptcha-response 權杖會傳遞至回呼。
data-expired-callback (資料過期的回呼) 過期回呼 選用設定。回呼函式的名稱，會在 reCAPTCHA 回應過期且使用者需要重新驗證時執行。
data-error-callback 錯誤回呼 選用設定。回呼函式的名稱，會在 reCAPTCHA 發生錯誤 (通常是網路連線) 時執行，且在連線恢復前無法繼續。如果您在此處指定函式，則必須負責通知使用者應重試。
局部 false 選用設定。可讓外掛程式擁有者乾擾網頁上現有的 reCAPTCHA 安裝作業。如為 true，這個 reCAPTCHA 執行個體就會屬於單獨的 ID 空間。

JavaScript API

方法 說明
grecaptcha.轉譯(
容器
參數
繼承
)。 		將容器算繪為 reCAPTCHA 小工具，並傳回新建立小工具的 ID。
container
用來轉譯 reCAPTCHA 小工具的 HTML 元素。請指定容器 (字串) 或 DOM 元素本身的 ID。
參數
包含參數為鍵=值組合的物件，例如 {"sitekey": "your_site_key", "theme": "light"}。請參閱 grecaptcha.render 參數。
沿用
如未指定對應的參數，請在元素中使用現有的 data-* 屬性。參數的優先順序高於屬性。
grecaptcha.execute(
opt_widget_id
)。 		透過程式輔助方式叫用 reCAPTCHA 檢查。隱形 reCAPTCHA 是在 div 上，而非按鈕時使用。
opt_widget_id
選用的小工具 ID；如未指定，則會預設為建立的第一個小工具。
grecaptcha.reset(
opt_widget_id
)。 		重設 reCAPTCHA 小工具。
opt_widget_id
選用的小工具 ID；如未指定，則會預設為建立的第一個小工具。
grecaptcha.getResponse(
opt_widget_id
)。 		取得 reCAPTCHA 小工具的回應。
opt_widget_id
選用的小工具 ID；如未指定，則會預設為建立的第一個小工具。

範例

在 onload 回呼後進行明確算繪

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render after an onload callback</title>
    <script>
        var onSubmit = function(token) {
          console.log('success!');
        };

        var onloadCallback = function() {
          grecaptcha.render('submit', {
            'sitekey' : 'your_site_key',
            'callback' : onSubmit
          });
        };
    </script>
  </head>
  <body>
    <form action="?" method="POST">
      <input id="submit" type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

在用戶端驗證後叫用隱形 reCAPTCHA 驗證問題。

<html>
  <head>
  <script>
    function onSubmit(token) {
      alert('thanks ' + document.getElementById('field').value);
    }

    function validate(event) {
      event.preventDefault();
      if (!document.getElementById('field').value) {
        alert("You must add text to the required field");
      } else {
        grecaptcha.execute();
      }
    }

    function onload() {
      var element = document.getElementById('submit');
      element.onclick = validate;
    }
  </script>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form>
      Name: (required) <input id="field" name="field">
      <div id="recaptcha" class="g-recaptcha"
          data-sitekey="_your_site_key_"
          data-callback="onSubmit"
          data-size="invisible"></div>
      <button id="submit">submit</button>
    </form>
    <script>onload();</script>
  </body>
</html>