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

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

但在客户端，我如何获取所需的验证码，因此用户无法提交表单，除非他/她 select 验证码？

Answer 1

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

点击recaptcha后，在data-callback方法中给隐藏控件赋值，然后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>

这是测试结果：

Answer 2

在 javascript 我想你有一个名为 recaptchaCallback 的 function 负责执行表单提交。 它应该看起来像这样

function recaptchaCallback(token) {

}

好吧，只需添加

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