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

Question

表单提交失败:错误:在 reCAPTCHA 脚本上运行execute() 时出错。 Error img

当我尝试发送带有 amp-recaptcha 的 amp 表单时，出现此错误。我生成了不同的 key ，所有 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>

Answer 1

我也在我的 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 响应，您可以在实际将表单数据提交到数据库或电子邮件代码之前对其进行解析和验证。

引用:

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. 对我有用的代码示例 - AMP Form to work with PhP