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

Form submission failed: Error: There was an error running execute() on the reCAPTCHA script. Error img

当我尝试发送带有 amp-recaptcha 的 amp 表单时，出现此错误。我生成了不同的 key ，都启用了“允许此 key 与 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 页面上实现 reCAPTCHA。首先，您需要使用表单 ( amp-recaptcha-input ) 中的 AMP reCAPTCHA 输入组件。在此之后，您需要以与 reCAPTCHA v2 相同的方式验证为 reCAPTCHA v3 生成的 token 。也就是说，在后面的代码中使用 API 请求(post 方法)到 https://www.google.com/recaptcha/api/siteverify - 通过发送 key 、 token 和用户 IP 地址(可选)。您将获得一个 JSON 响应，您可以在将表单数据实际提交到数据库或电子邮件代码之前对其进行解析和验证。

引用:

https://amp.dev/documentation/examples/components/amp-recaptcha-input/

https://developers.google.com/recaptcha/docs/verify

https://developers.google.com/recaptcha/docs/v3

对我有用的代码示例 - AMP Form to work with PhP

关于amp-html - 在 reCAPTCHA 脚本上运行 execute() 时出错，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57473147/