amp-recaptcha-input
简介
amp-recaptcha-input 组件会将 reCAPTCHA v3 令牌附加到 AMP 表单提交中。amp-recaptcha-input 通过创建一个 iframe 来加载使用提供的站点密钥的 reCAPTCHA v3 API 脚本，并使用提供的站点密钥和操作调用 grecaptcha.execute 来实现此目的。
设置
在使用 AMP 表单的 AMP 页面上导入 amp-recaptcha-input 组件
<script async custom-element="amp-recaptcha-input" src="https://cdn.ampproject.org/v0/amp-recaptcha-input-0.1.js"></script>
基本用法
POST 表单请求，该请求使用已解析的 recaptcha 项目进行响应。有关相应 grecaptcha 调用的详细介绍，请参阅参考文档。
<form id="amp-recaptcha-input-form" method="POST" action-xhr="https://amp.org.cn/documentation/examples/components/amp-recaptcha-input/api/recaptcha" target="_top">
<fieldset>
<label>
<span>Search for</span>
<input type="search" name="term" required>
</label>
<input name="submit-button" type="submit" value="Search">
<amp-recaptcha-input layout="nodisplay" name="recaptcha_token" data-sitekey="6LfcQ7IUAAAAAIv1KcgqyExGK0v8dLJtvV_Q6xD-" data-action="recaptcha_example">
</amp-recaptcha-input>
</fieldset>
<div class="loading-message">Loading...</div>
<div submit-success>
<template type="amp-mustache">
<h1>You searched for: {{term}}</h1>
<div><b>Score:</b> {{score}}</div>
<div><b>Recaptcha token:</b> {{recaptcha_token}}</div>
<div><b>Action:</b> {{action}}</div>
</template>
</div>
<div submit-error>
<template type="amp-mustache">
<h1>Error! Please check the JS Console in your dev tools.</h1>
<p>{{message}}</p>
</template>
</div>
</form>
需要进一步解释？
如果本页的解释没有涵盖您的所有问题，请随时联系其他 AMP 用户，讨论您的具体用例。
转到 Stack Overflow 未解释的功能？AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的持续参与者，但我们也欢迎您为自己特别感兴趣的问题做出一次性贡献。
在 GitHub 上编辑示例