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 上编辑示例