AMP
  • 网站

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