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 常见问题解答。

验证

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