如何防止谷歌recaptcha執行？

Question

我有一個包含一個按鈕的表單，該按鈕將觸發 google invisible recaptcha。 我正在使用的 html 頁面如下所示：

<html>
<head>
  <script src="https://www.google.com/recaptcha/api.js?onload=onLoadRecaptcha&render=explicit" async defer></script>
</head>
<body>
<form method="post" id="signup_form">
  <input type="text" name="fullname" value=""/>
  <div class="g-recaptcha"
    id="formSignup-recaptcha"
    data-sitekey="<?php echo $sitekey; ?>"
    data-callback="onSubmitFormSignupUser"
    data-size="invisible">
  </div>
  <button type="button" name="submitBtn" id="submitBtn">Submit</button>
</form>
</body>
</html>

但是當我單擊#submitBtn ，我需要使用 ajax 運行驗證過程，以確保在調用/執行 google recaptcha 之前正確填寫所有必填字段。 這是我正在使用的 javscript 代碼：

var widgetId = '';

var onLoadRecaptcha = function() { 
  widgetId = grecaptcha.render('submitBtn', {
    'sitekey': $('#formSignup-recaptcha').attr('data-sitekey'),
    'callback': onSubmitFormSignupUser,
  });
};
var onSubmitFormSignupUser = function() {
  validateForm('#formSignupUser')
};

var doSubmitFormSignupUser = function(target) {
  var postData = $(target);

  $.ajax({
    url: '/signup_user',
    type: 'post',
    data: postData,
    dataType: 'json',
    success: function(res) {
      if (res.status) {
        window.location.href = '/home/signup_success';
      } else {
        console.log(res.message);
      }
    },
    error: function(err) {
      console.log('error', err.responseText);
    },
    complete: function() {
      grecaptcha.reset(widgetId);
    }
  });
});

var validateForm = function(target) {
  var myData = $(target).serializeArray();

  $.ajax({
    url: '/is_validated',
    type: 'post',
    data: myData,
    dataType: 'json',
    async: false,
    success: function(res) {
      if (res.status) {
        doSubmitFormSignupUser(target);
      } else {
        console.log('message', res.message);
      }
    },
    error: function(err) {
      console.log('error', err.responseText);
    },
    complete: function() {
      grecaptcha.reset(widgetId);
    }
  });
}

$('body').on('click', '#submitBtn', function(e) {
  e.preventDefault();

  grecaptcha.execute(widgetId);
});

這是我的 php 代碼：

function is_validated()
{
  $response = [
    'status' => 0,
    'message' => '',
  ];
  echo json_encode($response);
}

function signup_user()
{
  echo 'thank you for signing up';
}

不知何故，該代碼不起作用..每當我點擊#submitBtn ，谷歌recaptcha就會自動出現，要求用戶選擇所有帶有總線或類似圖像的圖像。 我不知道我的代碼有什么問題..有人可以幫忙嗎？

Answer 1

我不知道，你為什么用 ajax 使用服務器端表單驗證。

因為，在下面的行中，您將在單擊按鈕后立即執行reCaptcha 。

$('body').on('click', '#submitBtn', function(e) {
  e.preventDefault();

  grecaptcha.execute(widgetId);
});

如果你想在ajax request之后執行reCaptcha ，去掉grecaptcha.execute(widgetId); 從上面的塊。 並放在這里，

complete: function() {
      grecaptcha.execute(widgetId);
}

如何防止谷歌recaptcha執行？

問題描述

1 個解決方案

解決方案1
1 2020-01-27 12:11:30

如何防止谷歌recaptcha執行？

問題描述

1 個解決方案

解決方案1 1 2020-01-27 12:11:30

解決方案1
1 2020-01-27 12:11:30