Использование 2 recaptcha на одной странице и получение разных значений для обоих через AJAX - PullRequest
Новая
       8

Использование 2 recaptcha на одной странице и получение разных значений для обоих через AJAX

0 голосов
/ 07 января 2019

У меня есть 2 Google Recaptcha на одной странице в разных формах (формы входа и регистрации). Мне пришлось поместить обе формы на одной странице из-за требований к дизайну, которые не могут быть изменены. Теперь проблема в том, что 1-ая форма - это форма входа в систему, за которой следует форма регистрации во 2-м. Теперь рекаптча в форме входа в систему вступает в силу и для формы регистрации. Я имею в виду, что я могу видеть recaptcha на обеих формах, но тот, который находится в форме регистра, не работает (что означает, что он не отправляет правильное значение на страницу PHP, где форма будет обрабатываться). Когда я попытался проверить recaptcha в форме входа и отправить форму регистрации, это сработало. Это означает, что первая загруженная recaptcha (в форме входа в систему) работает для обоих, что не должно быть. Оба recaptchas должны работать отдельно для каждой формы. Кроме того, когда я получаю значения обоих recaptchas через AJAX для отправки на страницу 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>

1 Ответ

0 голосов
/ 07 января 2019

Я получил решение. Если кто-то ищет это, ему это поможет.

В обеих формах 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'
  });
};

Следующее и последнее, замените captcha: grecaptcha.getResponse() в вашем AJAX-коде отправки формы на captcha: grecaptcha.getResponse(recaptcha1) и captcha: grecaptcha.getResponse(recaptcha2) соответственно (для обоих кодов входа в систему AJAX и регистрационных форм в моем случае). Для полного кода отправки формы, пожалуйста, обратитесь к коду в моем вопросе выше. Просто замените часть captcha: здесь, как сказано.

Готово! Теперь вы можете перейти к проверке на стороне сервера на своем языке (PHP или ASP независимо от того).

...