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 文件的設定不同。請參閱此 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"
}

屬性

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 FAQ (常見問題)。

驗證

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