How do I make my form work with reCAPTCHA?

3

I'm saving the data for Ajax, but my reCaptcha is not working properly, the form is sent even without pressing inside Captcha.

My Controller

  [HttpPost]
  [CaptchaValidator(PrivateKey= "secretKey", ErrorMessage="Captcha 
    Invalido", RequiredMessage ="Campo Obrigatorio")]

  public ActionResult SalvarItens(string titulo, string video_url, string 
     thumb, bool captchaValid) 
    {
         var item = new Dados_Video()
            {
                Thumb = thumb,
                Titulo = titulo,
                UrlVideo = video_url
            };

            db.Dados_Video.Add(item);
            db.SaveChanges();


        return Json(new { Resultado = item.Id }, 
           JsonRequestBehavior.AllowGet);
    } 

My View

   @using reCAPTCHA.MVC;


   <form id="submeter">
            <p id="divulgueSeuVideo">Divulgue Seu Vídeo</p><br />
            <input type="text" id="titulo" name="titulo" required="" 
  class="form-control form-home" placeholder="Titulo" /><br />

            <input type="url" id="video-url" name="url" required="" class="form-control form-home" placeholder="url" /><br />

            <div class="g-recaptcha" data-sitekey="minhaKey"></div>
            @Html.ValidationMessage("reCAPTCHA")

            <button id="submit" class="btn-block btn-success" onclick="funcaoOnclick();">Enviar Video</button>
        </form>

Ajax that does the saving

   function SalvarItens() {

        var titulo = $("#titulo").val();
        var video_url = $("#video-url").val();
        var thumb = generateThumb(generateCode(video_url));
        var url = "/Home/SalvarItens";

        $.ajax({
            url: url
            , data: {
             titulo: titulo, video_url: video_url, thumb: thumb }
            , type: "POST"
            , datatype: "Json"
            , success: function (data) {
                if (data.Resultado > 0) {

                }
            }
        });
    }

Web.Config

  <add key="reCaptchaPublicKey" value="SiteKey" />
  <add key="reCaptchaPrivateKey" value="SecretKey" />
    
asked by anonymous 18.09.2018 / 01:05

1 answer

0

Since you need to use ajax rather than submit the default form, a simple way that I see doing this is like this:

var formData = $('#submeter').serializeArray()[0];
formData.Titulo = $("#titulo").val();
formData.UrlVideo = $("#video-url").val();
formData.Thumb = generateThumb(generateCode(formData.video_url));
var url = "/Home/SalvarItens";

$.ajax({
    url: url
    , data: formData
    , type: "POST"
    , datatype: "Json"
    , success: function(data) {
        if (data.Resultado > 0)
        {

        }
    }
});

This will keep the hash generated by reCaptcha when it is resolved within the formData object. Therefore, the CaptchaValidator attribute in your action should be able to validate reCaptcha and the captchaValid parameter should come with the correct value.

In action, put this code:

[HttpPost]
[CaptchaValidator(PrivateKey= "secretKey", ErrorMessage="Captcha 
Invalido", RequiredMessage ="Campo Obrigatorio")]
public ActionResult SalvarItens(Dados_Video item, bool captchaValid)
{
    db.Dados_Video.Add(item);
    db.SaveChanges();

    return Json(new { Resultado = item.Id }, JsonRequestBehavior.AllowGet);
}
    
18.09.2018 / 22:37