Como usar o reCaptcha v3 em MVC

Se não sabe o que é o reCaptcha da Google, em resumo o reCaptcha protege-o contra spam e outros tipos de abuso automatizado.

Para começar a usar o reCAPTCHA, precisa se inscrever na Google e fazer o registo para obter um par de chaves da API para o seu site. O par de chaves consiste numa chave do site e uma chave secreta. A chave do site é usada para chamar o serviço reCAPTCHA no seu site ou aplicação móvel. A chave secreta autoriza a comunicação entre o back-end da aplicação e o servidor reCAPTCHA para verificar a resposta do utilizador. A chave secreta precisa ser mantida em segurança para fins de segurança.

Agora que obtivemos nossas chaves, vamos começar por implementar o reCaptcha num formulário padrão. Assim que tivermos o formulário, modificaremos a partir daí.

Primeiro, criaremos um Model com os campos pertinentes para o nosso formulário:

public class ContactUsViewModel{
   public long Id { get; set; }
   [Required]
   public string Name { get; set; }
   Required, EmailAddress]
   public string Email { get; set; }
   [DisplayName("Company (optional)")]
   public string Company { get; set; }
   [Phone, DisplayName("Phone (optional)")]
   public string Phone { get; set; }
   [DisplayName("Website (optional)")]
   public string Website { get; set; }
   [Required]
   public string Description { get; set; }
}


De seguida, criamos a nossa View:

@model ContactUsViewModel

@using (Html.BeginForm()){
    <div>@Html.LabelFor(m => m.Name) @Html.TextBoxFor(m => m.Name)</div>
    <div>@Html.LabelFor(m => m.Email) @Html.TextBoxFor(m => m.Email)</div>
    <div>@Html.LabelFor(m => m.Company) @Html.TextBoxFor(m => m.Company)</div>
    <div>@Html.LabelFor(m => m.Phone) @Html.TextBoxFor(m => m.Phone)</div>
    <div>@Html.LabelFor(m => m.Website) @Html.TextBoxFor(m => m.Website)</div>
    <div>@Html.LabelFor(m => m.Description) @Html.TextAreaFor(m => m.Description</div>

    <input type="submit" value="send it our way" />
}

E finalmente o Controller:

public class ContactController : Controller{
   public ViewResult Index()
   {
      return View();
   }
   [HttpPost]
   public ViewResult Index(ContactViewModel model)
   {
      if (ModelState.IsValid){
         //do your processing here
         return View("Thanks");
      }
      return View();
   }
}

Agora temos todo o código necessário para processar um formulário, temos que adicionar reCAPTCHA ao nosso formulário. A mudança na nossa View é bem fácil:

@model ContactUsViewModel

@using (Html.BeginForm()){
    <div>@Html.LabelFor(m => m.Name) @Html.TextBoxFor(m => m.Name)</div>
    <div>@Html.LabelFor(m => m.Email) @Html.TextBoxFor(m => m.Email)</div>
    <div>@Html.LabelFor(m => m.Company) @Html.TextBoxFor(m => m.Company)</div>
    <div>@Html.LabelFor(m => m.Phone) @Html.TextBoxFor(m => m.Phone)</div>
    <div>@Html.LabelFor(m => m.Website) @Html.TextBoxFor(m => m.Website)</div>
    <div>@Html.LabelFor(m => m.Description) @Html.TextAreaFor(m => m.Description</div>

    @Html.HiddenFor(m => m.GoogleCaptchaToken)

    <input type="submit" value="send it our way" />
}

<script>
    grecaptcha.ready(function () {
        grecaptcha.execute('_reCaptchaSiteKey"]', { action: 'contact-us' }).then(function (token) {
            $("#GoogleCaptchaToken").val(token);
        });
    });
</script>


É necessário ainda alterar o Model para adicionar o Captcha Token:
public class ContactUsViewModel{
   public long Id { get; set; }
   [Required]
   public string Name { get; set; }
   Required, EmailAddress]
   public string Email { get; set; }
   [DisplayName("Company (optional)")]
   public string Company { get; set; }
   [Phone, DisplayName("Phone (optional)")]
   public string Phone { get; set; }
   [DisplayName("Website (optional)")]
   public string Website { get; set; }
   [Required]
   public string Description { get; set; }
   public string GoogleCaptchaToken { get; set; }
}


Agora é necessário fazer a validação do Token do lado do servidor:
public class ContactController : Controller{
   public ViewResult Index()
   {
      return View();
   }
   [HttpPost]
   public ViewResult Index(ContactViewModel model)
   {
      if (ModelState.IsValid && !IsCapthaValid(model.GoogleCaptchaToken)){
         //do your processing here
         return View("Thanks");
      }
      return View();
   }
   private bool IsCapthaValid(string response)
    {
        bool isValid = false;
        try
        {
            string secretKey = "reCaptchaSecretKey";
            var client = new WebClient();
            var result = client.DownloadString(string.Format("https://www.google.com/recaptcha/api/siteverify?secret={0}&response={1}", secretKey, response));
            var obj = JObject.Parse(result);

            var success = (bool)obj.SelectToken("success");
            var score = (float)obj.SelectToken("score");

            if (success && score >= 0.5)
            {
                isValid = true;
            }
        }
        catch
        {
            return false;
        }

        return isValid;
    }
}

Copyright © 2019 Torpedo. Todos os direitos reservados

Powered by Kentico CMS | Política de Cookies

Ao continuar a navegar neste website está de acordo com a nossa politica de cookies. Saiba mais Fechar