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 回應權杖的參數。amp-recaptcha-input 透過建立 iframe 來載入使用提供的網站金鑰的 reCAPTCHA v3 api 腳本，並使用提供的網站金鑰和動作呼叫 grecaptcha.execute 來完成此操作。

先決條件

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

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

本文檔將更側重於如何在 AMP 上設定 reCAPTCHA。

範例

此範例示範了 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"
}

屬性

版面配置 (必填)

必要值為 nodisplay。

名稱 (必填)

<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> 規則。