在我的 asp.net 核心 MVC Web 应用程序中，我如何使 recaptcha 成为必填字段

Question

我正在开发一个 asp.net 核心 mvc web 应用程序，我添加了以下字段以显示 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>}

在我的操作方法中，我正在检查用户 select 是否重新验证，如下所示：-

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");
                
            }

但是在客户端，我如何才能提交所需的验证码，因此用户无法提交表单，除非 he/she select 验证码？

Answer 1

在 javascript 我想你有一个名为 recaptchaCallback 的函数，它负责执行表单提交。它应该是这样的

function recaptchaCallback(token) {

}

好吧，只需添加

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

Answer 2

通过触发recaptcha的data-callback方法，然后添加隐藏控件l，可以判断提交前是否点击recaptcha .

点击recaptcha后，在data-callback方法中给hidden control赋值，然后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>

测试结果如下：