以两种形式使用验证码答案

【问题标题】：Use code captcha in two forms以两种形式使用验证码
【发布时间】：2014-01-03 20:03:20
【问题描述】：

我在包含 Google 验证码的页面上有两个表单，但只有一个代码有效。有谁知道您是否可以在同一页面上的两个表单上使用相同的代码和相同的键？谢谢，

【问题讨论】：

【解决方案1】：

是的，你可以。但是您必须像 the developer guide 中提到的那样显式渲染小部件

你应该在你的前端使用这样的东西（取自开发者指南）：

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render for multiple widgets</title>
    <script type="text/javascript">
      var verifyCallback = function(response) {
        alert(response);
      };
      var widgetId1;
      var widgetId2;
      var onloadCallback = function() {
        // Renders the HTML element with id 'example1' as a reCAPTCHA widget.
        // The id of the reCAPTCHA widget is assigned to 'widgetId1'.
        widgetId1 = grecaptcha.render('example1', {
          'sitekey' : 'your_site_key',
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.render(document.getElementById('example2'), {
          'sitekey' : 'your_site_key'
        });
        grecaptcha.render('example3', {
          'sitekey' : 'your_site_key',
          'callback' : verifyCallback,
          'theme' : 'dark'
        });
      };
    </script>
  </head>
  <body>
    <!-- The g-recaptcha-response string displays in an alert message upon submit. -->
    <form action="javascript:alert(grecaptcha.getResponse(widgetId1));">
      <div id="example1"></div>
      <br>
      <input type="submit" value="getResponse">
    </form>
    <br>
    <!-- Resets reCAPTCHA widgetId2 upon submit. -->
    <form action="javascript:grecaptcha.reset(widgetId2);">
      <div id="example2"></div>
      <br>
      <input type="submit" value="reset">
    </form>
    <br>
    <!-- POSTs back to the page's URL upon submit with a g-recaptcha-response POST parameter. -->
    <form action="?" method="POST">
      <div id="example3"></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>

【讨论】：

【解决方案2】：

我只是想要一个可以插入多次的 HTML 片段，每次都显示另一个验证码。此外，我不想关心分配给容器的特定 ID，当仍然出现在一个页面上的多个公式将被独立设计和呈现时，这将是非常烦人的。这是我的解决方案。

<div class="g-recaptcha"></div>
<script type="text/javascript"><![CDATA[
  function renderCaptchas() {
    var captchaNodes = document.getElementsByClassName('g-recaptcha');
    for (var i = 0; i < captchaNodes.length; i++) {
      var captchaNode = captchaNodes[i];
      if (!captchaNode.captchaRendered) {
        captchaNode.captchaRendered = true;
        grecaptcha.render(captchaNode, {"sitekey": "YOUR_SITE_KEY"});
      }
    }
  }
]]></script>
<script src="https://www.google.com/recaptcha/api.js?onload=renderCaptchas&amp;render=explicit" async="async" defer="defer"></script>

【讨论】：