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 文档的配置不同。有关更多详细信息，请参阅 此问题。

本文档将重点介绍如何将 reCAPTCHA 配置到 AMP。

示例

此示例演示了 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> 规则。