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 来实现此目的。

先决条件

如reCATPCHA 官方文档中所述，在互联网上的任何文档中集成 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> 规则。