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 需要几个步骤，如 reCATPCHA 的官方文档中所述。有几个步骤，但通常这需要注册一个站点密钥，并设置一个服务器端点，该端点可以处理从 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 FAQ 中找到。

验证

请参阅 AMP 验证器规范中的 <amp-recaptcha-input> 规则。