Question

我在同一页面上以不同的表单（登录和注册表单）有2个Google Recaptcha。由于无法更改的设计要求，我不得不将两个表格放在同一页上。现在的问题是，第一种形式是登录形式，第二种是注册形式。现在，登录表单上的重新注册对注册表单也同样生效。我的意思是我可以在两种形式上都看到recaptcha，但是在寄存器形式中不起作用（这意味着它没有将正确的值发送到将要处理该形式的PHP页面）。当我尝试验证登录表单上的Recaptcha并提交注册表单时，它起作用了。这意味着第一个加载的Recaptcha（在登录表单上）对这两个都不起作用。每种格式的两个附件都应分别工作。另外，当我通过AJAX获得两个Recaptchas的值以发送到PHP页面进行服务器端验证时，我对两个都使用captcha: grecaptcha.getResponse()。我想这可能是实际问题。如果我能分别获得两个值，那么情况可能会很好。任何帮助将不胜感激。

这是我的密码。

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <h3 class="com-reps cr-panel">Login Now</h3>
    </div>
    <div class="col-md-6">
      <h3 class="com-reps cr-panel">Register Now</h3>
    </div>
    <div class="col-md-6">
      <div class="post-holder">
        <div class="login-message"></div>
        <div class="post-content">
          <form method="post" action="">
            <div class="form-group">
              <input type="text" id="uname" class="form-control" placeholder="Username">
            </div>
            <div class="form-group">
              <input type="password" id="pass" class="form-control" placeholder="Password">
            </div>
            <div class="form-group">
              <div class="g-recaptcha" data-sitekey="<?php echo $mainf['set_recaptcha_sitekey']; ?>"></div>
            </div>
            <div class="form-group">
              <input type="submit" id="login" value="Log In" class="btn btn-primary">
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="post-holder">
        <div class="register-message"></div>
        <div class="post-content">
          <form method="post" action="">
            <div class="form-group">
              <input type="text" id="name" class="form-control" placeholder="Full Name">
            </div>
            <div class="form-group">
              <input type="text" id="username" class="form-control" placeholder="Username">
            </div>
            <div class="form-group">
              <input type="password" id="password" class="form-control" placeholder="Password">
            </div>
            <div class="form-group">
              <input type="password" id="cpass" class="form-control" placeholder="Confirm Password">
            </div>
            <div class="form-group">
              <input type="text" id="email" class="form-control" placeholder="Email">
            </div>
            <div class="form-group">
              <input type="text" id="dob" class="form-control" placeholder="Date of Birth">
            </div>
            <div class="form-group">
              Sex &nbsp;&nbsp;&nbsp;&nbsp;
              <input type="radio" id="sex" name="sex"> Male &nbsp;
              <input type="radio" id="sex" name="sex"> Female
            </div>
            <div class="form-group">
              <input type="checkbox" id="legal" name="legal"> &nbsp; I accept the <a href="tos.php">Terms of Service</a> and <a href="privacy.php">Privacy Policy</a>.
            </div>
            <div class="form-group">
              <div class="g-recaptcha" data-sitekey="<?php echo $mainf['set_recaptcha_sitekey']; ?>"></div>
            </div>
            <div class="form-group">
              <input type="submit" id="submit" value="Register" class="btn btn-primary">
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
$(document).ready(function() {
  $("#login").click(function(){
    var dataString = {
      uname: $("#uname").val(),
      pass: $("#pass").val(),
      captcha: grecaptcha.getResponse()
    };
    $.ajax({
      type: "POST",
      //dataType : "json",
      url: "processes/login.php",
      data: dataString,
      cache: true,
      beforeSend: function(){
        $("#login").val("Please wait...");
        $(".login-message").hide();
      },
      success: function(html){
        $('.login-message').html(html).fadeIn();
        if($('.login-message').find('#responseBox').hasClass('alert-success')){
          setTimeout(function(){
            window.location.replace("index.php");
          }, 500);
        }else{
          $("#login").val("Log In");
        }
      }
    });
    return false;
  });

  $("#submit").click(function(){
    var dataString = {
      name: $("#name").val(),
      uname: $("#username").val(),
      pass: $("#password").val(),
      cpass: $("#cpass").val(),
      email: $("#email").val(),
      dob: $("#dob").val(),
      sex: $("input[name='sex']:checked").val(),
      captcha: grecaptcha.getResponse()
    };
    $.ajax({
      type: "POST",
      //dataType : "json",
      url: "processes/register.php",
      data: dataString,
      cache: true,
      beforeSend: function(){
        $("#submit").val("Please wait...");
        $(".register-message").hide();
      },
      success: function(html){
        $('.register-message').html(html).fadeIn();
        $("#submit").val("Register");
      }
    });
    return false;
  });
});
</script>

Answer 1

我找到了解决方案。万一有人来找这个会帮助他们。

在两个HTML表单中替换

<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>

到

{<div id="recaptcha1"></div>和<div id="recaptcha2"></div>。

然后替换从

调用的脚本

<script src="https://www.google.com/recaptcha/api.js></script>

到

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

并将这些代码插入您的<script></script>中。请注意，这应该在$(document).ready(function() {之外，并且在下一个表单提交的AJAX代码上方。

var recaptcha1;
var recaptcha2;
var myCallBack = function() {
  recaptcha1 = grecaptcha.render('recaptcha1', {
    'sitekey' : 'YOUR_SITE_KEY'
  });
  recaptcha2 = grecaptcha.render('recaptcha2', {
    'sitekey' : 'YOUR_SITE_KEY'
  });
};

下一件事，也是最后一件事，将表单提交AJAX代码中的captcha: grecaptcha.getResponse()分别更改为captcha: grecaptcha.getResponse(recaptcha1)和captcha: grecaptcha.getResponse(recaptcha2)（对于我的登录和注册表单的AJAX代码）。有关完整表单提交代码，请参阅上面我的问题中的代码。只需按照上述说明替换captcha:部分即可。

完成！现在，您可以使用您的语言（PHP或ASP等）进行服务器端验证。

在同一页面上使用2个Recaptcha并通过AJAX获得两者的不同值

1 个答案: