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 官方文件中所述。其中包含幾個步驟，但通常需要註冊網站金鑰，並設定伺服器端點，以處理從 AMP 或其他 HTML 文件傳送的 reCAPTCHA 訊號。

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

本文檔將更著重於如何在 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"
}

屬性

版面配置 (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> 規則。