隱形 reCAPTCHA

本頁說明如何啟用及自訂網頁中隱藏的 reCAPTCHA。

如要叫用隱形的 reCAPTCHA，您可以採取下列任一種做法：

請參閱設定，瞭解如何自訂隱形的 reCAPTCHA。例如，您可以指定語言或標記位置。

請參閱驗證使用者的回應，檢查使用者是否成功通過人機驗證 (Captcha)。

自動將挑戰繫結至按鈕

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

<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 通訊協定載入，而且可以不受限制地加入網頁的任何位置。

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

指定您的 onback 回呼函式，並新增參數至 JavaScript 資源，即可推斷繫結。運作方式與一般 reCAPTCHA 驗證方式相同。

透過程式叫用挑戰。

透過以屬性 data-size="invisible" 呈現挑戰，並以程式輔助方式呼叫執行作業，就能以程式輔助方式叫用 reCAPTCHA 驗證。

  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，這會在找到的第一個 g-recaptcha 標記中顯示小工具。
hl 查看語言代碼 選填欄位，強制以特定語言顯示小工具。如果未指定，則會自動偵測使用者的語言。

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

g-recaptcha 標記屬性 grecaptcha.render 參數 值 預設 說明
資料網站金鑰 sitekey 您的網站金鑰。
資料徽章 徽章 右下方內嵌 右下方 選填欄位，調整 reCAPTCHA 徽章的位置。「inline」可讓您透過 CSS 定位。
資料大小 size 隱形 選填欄位，用於建立繫結至 div 且透過程式執行的隱形小工具。
data-tabindex 分頁索引 0 選填欄位，挑戰的分頁索引。如果網頁中有其他元素使用 Tabindex，則應加以設定，讓使用者更容易瀏覽。
資料回呼 回呼 選填欄位，您的回呼函式名稱，會在使用者提交成功的回應時執行。g-recaptcha-response 權杖會傳送到您的回呼。
data-expired-callback 過期回呼 選填欄位，您的回呼函式名稱，會在 reCAPTCHA 回應過期，且使用者必須重新驗證時執行。
資料錯誤-回呼 錯誤回呼 選填欄位，您的回呼函式名稱，當 reCAPTCHA 遇到錯誤 (通常是網路連線) 時執行，在連線恢復之前才能繼續。如果在這裡指定函式，您必須負責通知使用者應重試。
隔離 否 選填欄位，外掛程式擁有者不得乾擾網頁上現有的 reCAPTCHA 安裝作業。如為 true，這個 reCAPTCHA 執行個體將會是獨立 ID 空間的一部分。

JavaScript API

方法 說明
grecaptcha.render(
容器
參數
繼承
)		 將容器轉譯為 reCAPTCHA 小工具，並傳回新建小工具的 ID。
container
顯示 reCAPTCHA 小工具的 HTML 元素。指定容器 (字串) 或 DOM 元素本身的 ID。
parameters
包含參數為鍵值對組合的物件，例如：{"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；如果未指定，則會預設為第一個建立小工具。

範例

載入回呼後進行顯式轉譯

<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>