19.05.2023 11:04
MaxRokatansky 0 484 Источник

В этой статье Мудассар Хан (Mudassar Khan) продемонстрирует нам, как реализовать проверку Google reCAPTCHA V2 (версии 2.0) в ASP.Net Core MVC. 

Приведенный в этой статье пример демонстрирует, как Google reCAPTCHA V2 проверяет ответы с капчей от пользователей, получаемые из коллбэк-функций в JavaScript.

Скачать код

В этой статье я покажу вам на примере, как реализовать проверку Google reCAPTCHA V2 (версии 2.0) в ASP.Net Core MVC.

Google reCAPTCHA V2 будет проверять ответы с капчей, получаемые из коллбэк-функций в JavaScript.

Примечание: Если вы только начинаете работать с ASP.Net MVC Core, пожалуйста, почитайте сначала мою статью “ASP.Net MVC Core Hello World Tutorial with Sample Program example”.

Для начала вам нужно получить публичный и приватный ключи на сайте Google RECaptcha. Как получить публичный (Site key) и приватный (Secret key) ключи Google RECaptcha, вы можете узнать в этой статье.

Пространства имен

Вам нужно будет импортировать всего одно пространство имен:

using System.Net;

Модель

Следующий класс модели состоит из трех свойств. Свойства Key и Secret будут содержать ключ и секрет Google RECaptcha, а свойство Response будет использоваться для хранения ответа, возвращаемого из API Google RECaptcha.

public class RECaptcha
{
    public string Key = "<RECaptcha Site Key>";
 
    public string Secret = "<RECaptcha Secret Key>";
    public string Response { get; set; }
}

Контроллер

Контроллер состоит из двух Action-методов.

Action-метод для обработки операции GET

Внутри этого Action-метода объект класса-модели RECaptcha возвращается в представление.

Action-метод для обработки AJAX-операции jQuery

Этот Action-метод обрабатывает вызов AJAX-функции jQuery из представления.

Примечание: следующий Action-метод обрабатывает AJAX-вызовы, поэтому тип возвращаемого значения установлен как JsonResult.

Ответ с капчей, т.е. пользовательский ввод, полученный из представления, отправляется на проверку в API Google RCaptcha. Впоследствии результат этой проверки сохраняется в свойство Response объекта класса-модели RECaptcha и, наконец, объект класса-модели RECaptcha возвращается в виде JSON обратно в представление.

public class HomeController : Controller
{
    // GET: Home
    public IActionResult Index()
    {
        return View(new RECaptcha());
    }
 
    [HttpPost]
    public JsonResult AjaxMethod(string response)
    {
        RECaptcha recaptcha = new RECaptcha();
        string url = "https://www.google.com/recaptcha/api/siteverify?secret=" + recaptcha.Secret + "&response=" + response;
        recaptcha.Response = (new WebClient()).DownloadString(url);
        return Json(recaptcha);
    }
}

Представление

Внутри представления, в самой первой строке в качестве модели объявлен класс RECaptcha. Представление содержит HTML DIV, элемент HTML HiddenField и кнопку. На кнопку повешен обработчик jQuery-события click, чтобы при нажатии на эту кнопку запускалась проверка Google RECaptcha.

Внутри обработчика событий OnLoadCallBack API Google RECaptcha мы можем наблюдать, как RECaptcha отображается на странице с помощью функции-рендерера, которая принимает ID HTML DIV (внутри которого будет отображаться RECaptcha), публичный ключ Google RECaptcha и обработчик колбеков.

Когда пользователь правильно отвечает на капчу, тригерится колбэк. Обработчик событий, повешенный на этот коллбек, принимает ответ с капчей (который представляет собой закодированное строковое значение).

Значение ответа с капчей отправляется в Action-метод AjaxMethod (описанный выше), который затем возвращает обратно JSON-объект, состоящий из результата, возвращенного из API Google RECaptcha.

Возвращенный результат сохраняется в элементе HiddenField, чтобы можно было скрыть сообщение об ошибке проверки, если результатом является «Success», т.е. ответ на капчу правильный.

Примечание: Если вы столкнулись с проблемами при выполнении AJAX-вызовов в ASP.Net Core, почитайте мою статью: [SOLVED] jQuery AJAX POST not working in ASP.Net Core.

Событие Button Click проверяет, что при нажатии на кнопку HiddenField содержит результат Success, иначе пользователю будет предложено решить Google RECaptcha еще раз путем отображения сообщения об ошибке.

@model Google_ReCaptcha_MVC_Core.RECaptcha
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }
 
        .error {
            color: red;
        }
    </style>
</head>
<body>
    <div id="dvCaptcha">
    </div>
    <input type="hidden" id="hfCaptcha"/>
    <span id="rfvCaptcha" class="error" style="display:none">Captcha validation is required.</span>
    <br/>
    <input type="button" id="btnSubmit" value="Submit"/>
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
            async defer></script>
    <script type="text/javascript">
        var onloadCallback = function () {
            grecaptcha.render('dvCaptcha', {
                'sitekey': '@Model.Key',
                'callback': function (response) {
                    $.ajax({
                        type: "POST",
                        url: "/Home/AjaxMethod",
                        data: {response: response },
                        success: function (r) {
                            var captchaResponse = jQuery.parseJSON(r.Response);
                            if (captchaResponse.success) {
                                $("#hfCaptcha").val(captchaResponse.success);
                                $("#rfvCaptcha").hide();
                            } else {
                                $("#hfCaptcha").val("");
                                $("#rfvCaptcha").show();
                                var error = captchaResponse["error-codes"][0];
                                $("#rfvCaptcha").html("RECaptcha error. " + error);
                            }
                        }
                    });
                }
            });
        };
        $(function () {
            $("#btnSubmit").click(function () {
                $("#rfvCaptcha").hide();
                if ($("#hfCaptcha").val() == "") {
                    $("#rfvCaptcha").show();
                }
            });
        });
    </script>
</body>
</html>

Скриншоты

Google RECaptcha реализованная в ASP.Net MVC

 

Сообщение об ошибке RequiredFieldValidator, когда решение капчи не было предоставлено

 

Сообщение об ошибке Google RECaptcha, которое отображается при неправильном ответе

 

Правильный ответ на Google RECaptcha

 

Сообщение об ошибке, которое отображается, когда статус успеха Google RECaptcha SiteVerify API имеет значение False

 

Загрузки

Скачать код
Скачать бесплатно Word/PDF/Excel API

Приглашаем всех желающих на открытое занятие, посвященное изучению конвейеров ПО промежуточного слоя (Middleware). На этом бесплатном вебинаре вы узнаете:

  • как работает конвейер запроса в ASP.NET Core;

  • в каком порядке вызываются middleware в цикле запрос/ответ;

  • как написать свой middleware, и в каком случае это может быть нужно;

  • примеры кастомных middleware для разных задач.

Урок будет полезным для вас, если вы чувствуете, что стандартный пайплайн запрос/ответ вас перестал устраивать и хотите добавить свои шаги в обработку запроса сервисом.

Занятие пройдет в преддверии старта курса «C# ASP.NET Core разработчик». Записаться на урок можно по ссылке.

Комментарии (0)