Desde o lançamento de No CAPTCHA reCAPTCHA, milhões de internautas têm sido capazes de atestar que eles são humanos com apenas um único clique. Agora estamos dando um passo adiante e tornando-o invisível. Usuários humanos serão deixados passar sem ver a caixa de seleção “Eu não sou um robô”, enquanto os suspeitos e bots ainda têm que resolver os desafios. Estamos entusiasmados com isso e espero que você dê uma chance!
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! 😉
