使用代码验证码有两种形式

时间:2014-01-03 20:03:20

标签: forms recaptcha code-reuse

我在包含Google验证码的网页上有两个表单,但只有一个代码有效。有谁知道你是否可以在同一页面上的两个表格上使用相同的密码相同的代码? THKS,

2 个答案:

答案 0 :(得分:0)

是的,你可以。但您必须按照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>

答案 1 :(得分:0)

我只想要一个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>