时间戳

首页 > 解决方案 > 在 reCAPTCHA 脚本上运行 execute() 时出错

amp-html - 在 reCAPTCHA 脚本上运行 execute() 时出错

问题描述

Form submission failed: Error: There was an error running execute() on the reCAPTCHA script.错误图片

当我尝试发送带有 amp-recaptcha 的 amp 表单时，我收到此错误。我生成了不同的密钥，都启用了“允许此密钥与 AMP 页面一起使用”。

你知道有什么问题吗？谢谢。

<form id="amp-recaptcha-input-form" method="POST" action-xhr="https://example.com/api/push" 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="6LcovLIUAAAAAEfNnsbk69bEKH6LvBM2_2rAxmoj" 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-html

解决方案

我也在我的 AMP 页面上实施 reCAPTCHA。首先，您需要以 ( amp-recaptcha-input ) 形式使用 AMP reCAPTCHA 输入组件。在此之后，您需要以与 reCAPTCHA v2 相同的方式验证为 reCAPTCHA v3 生成的令牌。也就是说，在后面的代码中使用 API 请求（post 方法）到https://www.google.com/recaptcha/api/siteverify - 通过发送密钥、令牌和用户 IP 地址（可选）。您将获得一个 JSON 响应，您可以在将表单数据实际提交到您的数据库或电子邮件代码之前对其进行解析和验证。

参考：

  1. https://amp.dev/documentation/examples/components/amp-recaptcha-input/
  2. https://developers.google.com/recaptcha/docs/verify
  3. https://developers.google.com/recaptcha/docs/v3
  4. 对我有用的代码示例 -与 PhP 一起使用的 AMP 表单

推荐阅读