ASP.NET 5 MVC 6 Google reCaptcha V2 验证

Question

我正在 MVC 6 中开发一个联系表单，我正在使用 Google reCaptcha v2 进行身份验证，并且表单正在通过 Ajax 提交。我想要的是如何验证 reCaptcha 控件？它工作正常，但我没有找到任何类似于模型验证或 jQuery 验证的验证。任何人都可以告诉我如何在客户端或服务器端验证它。

这是我的代码

家庭控制器：

[HttpPost]
    public IActionResult Contact(ContactViewModel model)
    {
        string EncodedResponse = Request.Form["captchaResponse"];
        bool IsCaptchaValid = (CaptchaResponse.Validate(EncodedResponse));  // it is working and returns true if I check the reCaptcha with Google Server.

        if (IsCaptchaValid)
        {

        }
        return View();
    }

查看：

<form name="sentMessage" asp-controller="Home" asp-action="Contact" id="contactForm" novalidate method="post">

            <div class="row control-group">
                <div class="font-light form-group col-xs-12 floating-label-form-group controls">
                    <div class="g-recaptcha" data-sitekey="6LdKRxQTAAAAAHd9kNw8qp4OyxfWxvLnAhxVr8mu"></div>
                    <br />
                    <span class="text-danger" id="ValidMessage"></span> <!--Here I want to display validation messge-->
                </div>
            </div>

            <br />

            <div id="success"></div>
            <div class="row">
                <div class="form-group col-xs-12">
                    <button type="submit" class="btn btn-default">Send</button>
                </div>
            </div>

这是我的 JavaScript 文件：

$.ajax({
            url: "/Home/Contact",
            type: "POST",
            data: {
                name: name,
                subject: subject,
                email: email,
                message: message,
                captcharesponse: captchaResponse
            },
            cache: false,
            success: function() {
                // Success message
                $('#success').html("<div class='alert alert-success'>");
                $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                    .append("</button>");
                $('#success > .alert-success')
                    .append("<strong>Your message has been sent. </strong>");
                $('#success > .alert-success')
                    .append('</div>');

                //clear all fields
                $('#contactForm').trigger("reset");
            },
            error: function() {
                // Fail message
                $('#success').html("<div class='alert alert-danger'>");
                $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                    .append("</button>");
                $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!");
                $('#success > .alert-danger').append('</div>');
                //clear all fields
                $('#contactForm').trigger("reset");
            },
        })

Answer 1

问题在于 Ajax 调用。对于客户端验证，我们只需要将 Ajax 代码更新为：-

JavaScript

if (captchaResponse == '') {
            $('#captchaCheck').html('Please verify that you are not a robot!');
        }
        else {
            $.ajax({
            url: "/Home/Contact",
            type: "POST",
            data: {
                name: name,
                subject: subject,
                email: email,
                message: message,
                captcharesponse: captchaResponse
            },
            cache: false,
            success: function() {
                // Success message
                $('#success').html("<div class='alert alert-success'>");
                $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                    .append("</button>");
                $('#success > .alert-success')
                    .append("<strong>Your message has been sent. </strong>");
                $('#success > .alert-success')
                    .append('</div>');

                //clear all fields
                $('#contactForm').trigger("reset");
                $('#captchaCheck').hide();
            },
            error: function() {
                // Fail message
                $('#success').html("<div class='alert alert-danger'>");
                $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                    .append("</button>");
                $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding or you may not verify that you are a human. Please try again later!");
                $('#success > .alert-danger').append('</div>');
                //clear all fields
                $('#contactForm').trigger("reset");
                $('#captchaCheck').hide();
            },
        })
        }

对于服务器端验证，我们只需要在 POST 操作中添加一个 HTTP 响应：-

if (IsCaptchaValid)
        {
            //await _mailService.SendEmailAsync();
        }
        else
        {
            Response.StatusCode = (int)HttpStatusCode.BadRequest;
            return View(model);
        }

它解决了我的问题。