Как я могу сделать recaptcha обязательным полем внутри моего asp. net core MVC веб-приложения - PullRequest
Новая
       132

Как я могу сделать recaptcha обязательным полем внутри моего asp. net core MVC веб-приложения

0 голосов
/ 11 июля 2020

Я работаю над asp. net core mvc веб-приложением, и я добавил следующее поле, чтобы показать Google recaptcha версии 2: - 

<div class="form-group">
      <div class="col-md-2"></div>
            <div class="col-md-10">
                <div class="g-recaptcha" data-callback="recaptchaCallback" data-sitekey="@ViewData["ReCaptchaKey"]">
            </div>
      </div>
 </div>
 //code goes here
 @section Scripts {

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

и внутри моего действия Я проверяю, выбрал ли пользователь recaptcha или нет, как показано ниже: - 

public async Task<IActionResult> SearchNPI(ContactinfoCreate ci)
        {

            //add uncompleted entry
            ViewData["ReCaptchaKey"] = _configuration.GetSection("GoogleReCaptcha:key").Value;
            if (!ReCaptchaPassed(
            Request.Form["g-recaptcha-response"], // that's how you get it from the Request object
            _configuration.GetSection("GoogleReCaptcha:secret").Value,
            _logger
            ))
            {
                ModelState.AddModelError(string.Empty, "Please enter CAPTCHA");
                
            }

, но на стороне клиента, как я могу заполнить требуемый recaptcha, поэтому пользователь не может отправить форму, если он / она выбирает рекапчу?

Ответы [ 2 ]

1 голос
/ 13 июля 2020

Вы можете определить, нажимает ли рекапча перед отправкой, запустив метод recaptcha data-callback , а затем добавив скрытый элемент управления l.

После нажатия recaptcha присвойте значение скрытому элементу управления в методе обратного вызова данных, а затем judge the hidden value in the form submit method, чтобы определить, можно ли отправить эту форму. 

<form method="post"> 
    <div class="form-group">
        <div class="col-md-2"></div>
        <div class="col-md-10">
            <div class="g-recaptcha" data-sitekey="@ViewData["ReCaptchaKey"]" data-callback="recaptchaCallback"></div> 
            <input type="hidden"  value="" id="isClickCaptcha" />
            <span class="text-danger" id="validationText"></span>
        </div> 
    </div>
    <input id="Submit1" type="submit" value="submit" />
</form>
<script src="https://www.google.com/recaptcha/api.js?hl=en-US"></script>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
    var recaptchaCallback = function () { 
        $("#isClickCaptcha").val("yes");
    };

    $("form").submit(function () {
        if ($("#isClickCaptcha").val() == "") {
            event.preventDefault();
            $("#validationText").text("Please enter CAPTCHA!");
            return false;
        }

    })
</script>

Вот результат теста: введите описание изображения здесь

0 голосов
/ 11 июля 2020

in javascript Я полагаю, у вас есть функция recaptchaCallback, которая отвечает за отправку формы. Должно получиться так 

function recaptchaCallback(token) {

}

ну просто добавьте 

if (!token || token === '') {
    alert("Could not verify that you are a human");
    return;
}
...