Desenvolvimento

22 abr, 2019

ASP .NET MVC – Usando o reCAPTCHA da Google – Parte 01

Publicidade

Neste artigo veremos como usar o ReCaptcha da Google em uma aplicação ASP .NET MVC 5.

O reCAPTCHA da Google é um recurso usado para proteger formulários de um site com o uso de um CAPTCHA, exigindo que o visitante responda a uma pergunta que comprove que ele é uma pessoa, e não um bot.

Nota: bot, diminutivo de robot, também conhecido como internet bot ou web robot, é uma aplicação de software concebido para simular ações humanas repetidas.

Pois bem, a Google oferece um serviço de CAPTCHA muito versátil e fácil de usar: o reCAPTCHA.

Neste artigo eu vou mostrar como usar o componente em uma aplicação ASP .NET MVC 5.

Para poder usar este recurso você vai precisar de uma conta Google e de se registrar para obter as chaves que permitirão que você use o componente em seu site.

Supondo que você já tenha uma conta de e-mail na Google e esteja logado, vamos iniciar acessando a url: https://www.google.com/recaptcha/admin, que vai apresentar uma página para você registrar os dados para usar o recurso.

Abaixo temos a página com os dados que eu usei para registrar o serviço para testar neste artigo.

Informei os seguintes dados:

  • Label: teste de reCAPTCHA
  • CheckBox: validate requests with the ‘I’m not a robot’ checkbox
  • Domains: localhost
  • Aceite as opções de termos de serviço e enviar alertas

Ao clicar no botão Register você verá uma página contendo a sua site Key e Secret Key, bem como instruções sobre como usar o recurso em suas páginas:

A Site Key é usada para exibir o widget na sua página ou código, e a Secret Key pode ser usada como comunicação entre o seu site e a Google para verificar se o reCAPTCHA é válido ou não.

Com isso já podemos usar o reCAPTCHA em nosso site.

Recursos usados

  • Visual Studio 2017 Community

Criando o projeto ASP .NET MVC

Abra o VS 2017 Community e crie um novo projeto do tipo Web usando o template ASP .NET Web Application (.NET Framowork), informando o nome Mvc5_ReCaptcha.

Estou usando o .NET Framework 4.7.

A seguir, selecione o template MVC, sem autenticação, e clique em OK.

Será criado um projeto ASP .NET MVC com um controlador HomeController e as Views Index, About e Contact.

Neste primeiro contato com o reCAPTCHA vou apenas mostrar como usar o recurso.

Abra o controlador HomeController e inclua um método Action FormSubmit que vai usar a Secret Key e realizar a validação.

Este código é usado para validar a resposta do captcha. Para isso, precisamos postar dados do seu aplicativo nos servidores da Google.

Aqui estão os detalhes da solicitação da API.

Parâmetros

  • secret: requerido. É a chave compartilhada entre seu site e o reCAPTCHA
  • Response: requerida. É o token de resposta do usuário fornecido pelo reCAPTCHA ao usuário e enviado ao seu site

Para o exemplo deste artigo eu apenas estou retornando uma mensagem na ViewBag.Message, que indica se a validação foi feita com sucesso ou não, e a seguir, estou retornando para a view Index.

Agora abra a view Index.cshtml que está na pasta /Views/Home e inclua o código abaixo:

Neste código estamos apresentando a CAPTCHA e submetendo para o método Action FormSubmit do controlador HomeController que vai fazer a validação. Para isso estou informando a site Key.

Executando o projeto iremos obter:

Com isso apenas mostrei como usar o componente nas páginas.

Na próxima parte do artigo veremos como integrar o CAPTCHA em nossa aplicação de uma forma mais inteligente.

Pegue o projeto aqui: Mvc5_ReCaptcha.zip (sem as referências).