amp-recaptcha-input

<script async custom-element="amp-recaptcha-input" src="https://cdn.ampproject.org/v0/amp-recaptcha-input-0.1.js"></script>

用法

此擴充功能會在父元素 <form> 提交時，新增一個包含 reCAPTCHA 回應 Token 的參數。amp-recaptcha-input 的運作方式是建立一個 iframe，以載入使用提供的網站金鑰的 reCAPTCHA v3 API 腳本，並使用提供的網站金鑰和動作呼叫 grecaptcha.execute。

先決條件

在網際網路上整合任何文件的 reCAPTCHA 需要幾個步驟，如 reCAPTCHA 官方文件中所述。步驟繁多，但大致上需要註冊網站金鑰，並設定伺服器端點，以處理從 AMP 或其他 HTML 文件傳送的 reCAPTCHA 信號。

註冊網站金鑰時，請注意一個重點：您需要提供計畫使用此網站金鑰的所有主機名稱。例如，your.com 和 www.your.com 會被視為不同的主機名稱。請注意，這與一般 HTML 文件的設定不同。詳情請參閱此問題。

本文將更著重於 reCAPTCHA 在 AMP 上的設定方式。

範例

此範例示範 AMP 頁面上 <amp-recaptcha-input> 的用法如何與 grecaptcha 物件和表單主體上的呼叫相關聯。<amp-recaptcha-input> 必須是 <form> 元素的子元素。

<amp-recaptcha-input> 用法

<form amp-form-attributes-go-here>
  ...
  <amp-recaptcha-input layout="nodisplay" name="reCAPTCHA_body_key" data-sitekey="reCAPTCHA_site_key" data-action="reCAPTCHA_example_action">
  </amp-recaptcha-input>
  ...
</form>

對應的 `grecaptcha` 呼叫

grecaptcha.execute('reCAPTCHA_site_key', {action: 'reCAPTCHA_example_action'});

對應的 AMP 表單提交主體

{
  ...other form params
  "reCAPTCHA_body_key": "returned_reCAPTCHA_response_token"
}

屬性

layout (必填)

必要值為 `nodisplay`。

name (必填)

<amp-recaptcha-input> 的名稱。將用作 AMP 表單主體提交中的參數金鑰。

data-sitekey (必填)

reCAPTCHA v3 已註冊網站的網站金鑰。

data-action (必填)

reCAPTCHA v3 在表單提交時要執行的動作。

data-global (選填)

預設情況下，iframe 會使用 www.google.com 端點載入 recaptcha API 腳本。在某些情況下，這可能無法存取。當包含 data-global 屬性時，組件會改為從 www.recaptcha.net 端點載入腳本。更多資訊請參閱 reCAPTCHA 常見問題。

驗證

請參閱 AMP 驗證器規格中的 <amp-recaptcha-input> 規則。