Google lança versão “invisível” do reCAPTCHA!

Veja o vídeo explicativo:

Viu só que legal? Bom, chega de teorias e vamos à pratica!

Irei implementar utilizando Asp.NET MVC, porém o exemplo fica muito fácil para você aplicar à qualquer linguagem!

Agora vamos criar um par de chaves de API para o seu site em https://www.google.com/recaptch e clicar em Get reCAPTCHA no topo da página e seguir as etapas abaixo para criar uma integração.

Preencha os dados iniciais para gerar uma chave (veja que eu coloquei o domínio localhost para testar localmente também, porém após validar recomendo que você remova, ou crie chaves específicas para desenvolvimento):

Após a criação, você obterá suas chaves:

Chaves reCAPTCHA

Chave do site: é usada para exibir o widget em sua página ou código.
Chave secreta: pode ser usada como uma comunicação entre seu site e o Google para verificar a resposta do usuário se o reCAPTCHA é válido ou não.

Agora o próximo passo é exibir o widget reCAPTCHA V3 em seu site.

@*Adicione a referência do script na sua página:*@
<script src="https://www.google.com/recaptcha/api.js"></script>

<br />
<div class="row">
    <div class="col-md-12">
        <form action="/home/validatecaptcha" method="POST" id="formCaptcha">
                  
            <button class="g-recaptcha btn btn-primary btn-lg"
                    data-sitekey="6LcmRhgUAAAAAA9qWEoYj0QMTg71G_CrSQpc-wXt"
                    data-callback="myfunction">
                Submit
            </button>
        </form>
    </div>
  
    <br />
    <b> Situação :</b> @ViewBag.Message
    

</div>

@*Utilize uma função de callback para submeter o formulário*@
<script>function myfunction() {
    document.getElementById("formCaptcha").submit();
}</script>

Você basicamente precisa adicionar a referencia javascript na sua página, e dentro do seu formulário adicionar o botão que o reCAPTCHA lhe fornece.

Após o click do botão, é gerado um callback, que você precisará implementar com o nome que você quiser. Veja que eu utilizei o callback para dar submit no meu form para a action desejada.

Veja agora a implementação do lado do servidor:

  [HttpPost]
        public ActionResult ValidateCaptcha()
        {
            var response = Request["g-recaptcha-response"];
            //secret that was generated in key value pair
            const string secret = "COLOQUE SUA CHAVE SECRETA AQUI";

            var client = new WebClient();
            var reply =
                client.DownloadString(
                    string.Format("https://www.google.com/recaptcha/api/siteverify?secret={0}&response={1}", secret, response));

            var captchaResponse = JsonConvert.DeserializeObject<CaptchaResponse>(reply);

            //when response is false check for the error message
            if (!captchaResponse.Success)
            {
                if (captchaResponse.ErrorCodes.Count <= 0) return View();

                var error = captchaResponse.ErrorCodes[0].ToLower();
                switch (error)
                {
                    case ("missing-input-secret"):
                        ViewBag.Message = "The secret parameter is missing.";
                        break;
                    case ("invalid-input-secret"):
                        ViewBag.Message = "The secret parameter is invalid or malformed.";
                        break;

                    case ("missing-input-response"):
                        ViewBag.Message = "The response parameter is missing.";
                        break;
                    case ("invalid-input-response"):
                        ViewBag.Message = "The response parameter is invalid or malformed.";
                        break;

                    default:
                        ViewBag.Message = "Error occured. Please try again";
                        break;
                }
            }
            else
            {
                ViewBag.Message = "Valid";
            }

            return View("Index");
        }

No próprio site do recaptcha, ele fornece informações da implementação que você precisa fazer do lado do servidor. Resumidamente você precisa fazer uma requisição para a url de verificação do captcha, passando sua chave e você receberá um Json com os dados da resposta.

Um grande abraço!

Coloque suas dúvidas nos comentários, vamos nos ajudar! 😉