Question

我最近启动了一个网页，该网页可以让客户将邮件发送到我的帐户，但不幸的是，我忘记了放置一个验证码，它很快就被机器人淹没了。我开始查看有关reCaptcha的Google文档，但由于出现此错误我已停止工作。

我的页面是使用jQuery动态加载的，因此我需要一个显式渲染，我按照Google给出的步骤进行操作，但是错误：Uncaught Error: Missing required parameters: sitekey不断出现，并且没有验证码渲染。

这是我的表格：

<form id="mailForm"  >
        <input id="name" name="name" type="text" placeholder="Name" required> <input id="email" name="email" type="email" placeholder="Email" required>

        <textarea id="message" rows="10" cols="50" name="message" placeholder="Your message" required></textarea>

         <div id="recaptcha"></div>

        <input type="submit" id="mailButt" onclick="mailSend()" value="Send">

    </form>

用于调用渲染的函数（在原始代码中，MY_SITEKEY被替换为我的sitekey）

function loadCaptcha()
    {    
      grecaptcha.render($('#recaptcha'), {
          'sitekey' : 'MY_SITEKEY'
        });
    };

成功加载页面的ajax会调用哪个

loadCaptcha();

最后是Google提供的脚本，该脚本已放置在<body>的末尾和</head>的前面，而这两个选项仍然无法修复错误：

<script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer>
</script>

我尝试了许多代码配置，但是无论如何它都不会呈现验证码框

Answer 1

您忘了通过加载脚本来传递函数：onload = loadCaptcha

<script src="https://www.google.com/recaptcha/api.js?onload=loadCaptcha&render=explicit"
        async defer>

我知道语法是相同的，但是尝试更改文档中的功能：在onload回调后进行显式渲染

<script type="text/javascript">
  var onloadCallback = function() {
    grecaptcha.render('recaptcha', {
      'sitekey' : 'your_site_key'
    });
  };
</script>

此处的文档：https://developers.google.com/recaptcha/docs/display

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render after an onload callback</title>
    <script type="text/javascript">
      var onloadCallback = function() {
        grecaptcha.render('html_element', {
          'sitekey' : 'your_site_key'
        });
      };
    </script>
  </head>
  <body>
    <form action="?" method="POST">
      <div id="html_element"></div>
      <br>
      <input type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

Answer 2

这个问题似乎在将 DOM 元素传递给 render() 函数时发生。

如果元素的 id 作为字符串传递，它应该消失。

Google reCaptchav2错误必填参数：网站密钥

2 个答案: