{"id":3981,"date":"2015-01-23T09:12:59","date_gmt":"2015-01-23T11:12:59","guid":{"rendered":"http:\/\/blog.turbosite.com.br\/?p=3981"},"modified":"2015-01-23T09:12:59","modified_gmt":"2015-01-23T11:12:59","slug":"como-integrar-o-no-captcha-recaptcha-em-seu-site","status":"publish","type":"post","link":"https:\/\/www.turbosite.com.br\/blog\/como-integrar-o-no-captcha-recaptcha-em-seu-site\/","title":{"rendered":"Como Integrar o \u201cNo CAPTCHA reCAPTCHA\u201d em seu Site"},"content":{"rendered":"

Postagem original\u00a0em Tutsplus<\/a>,\u00a0com tradu\u00e7\u00e3o de\u00a0Erick Patrick<\/a>. Vale a pena a leitura!<\/p>\n

\u00c9 poss\u00edvel que os formul\u00e1rios CAPTCHA sejam uma das piores e mais comuns experi\u00eancias na web. Eles s\u00e3o dolorosos demais para a maioria dos usu\u00e1rios, sem falar dos deficientes visuais ou daquelas pessoas que dependem de tecnologias assistivas, como os leitores de tela, para navegar pela web. Contudo e infelizmente, os\u00a0CAPTCHAs s\u00e3o absolutamente vitais na luta contra o SPAM<\/em>.<\/p>\n

\"captcha-1\"
Um mal necess\u00e1rio (obrigado spammers<\/em>)<\/figcaption><\/figure>\n

Ironicamente, mesmo que os CAPTCHAs tradicionais com \u201ctextos distorcidos\u201d sejam estranhos para usu\u00e1rios humanos lerem, tecnologias modernas de intelig\u00eancia artificial tem menos problema em resolv\u00ea-los. O Google at\u00e9 usa uma tecnologia similar para ler os n\u00fameros e sinais de estradas para confirmar as localidades no Google Street View<\/em>!<\/p>\n

\"maps\"
Rob\u00f4s do Google podem\u00a0ler isso com precis\u00e3o<\/a><\/figcaption><\/figure>\n

E o mais l\u00f3gico \u00e9 que os pr\u00f3prios desenvolvedores do Google trouxessem a melhor solu\u00e7\u00e3o para o CAPTCHA, at\u00e9 agora, ao final do ano de 2014.\u00a0O No CAPTCHA reCAPTCHA<\/a> requer nada mais que um toque, um clique do mouse ou o foco no campo de entrada usando o teclado e, depois, apertar a barra de espa\u00e7o<\/strong>.<\/p>\n

\"nocaptcha\"<\/figure>\n

Na maioria dos casos, \u00e9 simples assim, por\u00e9m, se a an\u00e1lise de risco do Google n\u00e3o puder ter certeza que voc\u00ea \u00e9 realmente um humano, uma segunda solicita\u00e7\u00e3o aparecer\u00e1.<\/p>\n

\"notsure\"<\/figure>\n

Voc\u00ea j\u00e1 pode v\u00ea-lo em a\u00e7\u00e3o por toda a web.<\/p>\n

Obtendo o No CAPTCHA reCAPTCHA<\/em><\/h2>\n

Deixemos de abrobrinha e configuremos o No CAPTCHA<\/em>.<\/p>\n

Passo 1<\/h3>\n

Primeiro, precisamos de uma chave de API, ent\u00e3o, v\u00e1 at\u00e9 o site\u00a0https:\/\/www.google.com\/recaptcha\/admin<\/a>. Para ter acesso a essa p\u00e1gina, voc\u00ea precisar ter acesso a sua conta do Google. Ser\u00e1 pedido que voc\u00ea registre seu site, ent\u00e3o d\u00ea um nome adequado e liste os dom\u00ednios (por exemplo, tutsplus.com<\/span>)\u00a0onde esse reCAPTCHA\u00a0em particular ser\u00e1 usado. Subdom\u00ednios (comowebdesign.tutsplus.com<\/span> e code.tutsplus.com<\/span>) s\u00e3o levados em considera\u00e7\u00e3o de forma autom\u00e1tica.<\/p>\n

\"register\"<\/figure>\n

Passo 2<\/h3>\n

Com isso feito, voc\u00ea receber\u00e1 a chave do seu site e chave secreta de parceiro:<\/p>\n

\"keys\"<\/figure>\n

Passo 3<\/h3>\n

Abaixo das chaves voc\u00ea ver\u00e1 alguns trechos de c\u00f3digo para a inclus\u00e3o do reCAPTCHA em seu site. Primeiro, h\u00e1 o do JavaScript:<\/p>\n

<script src='https:\/\/www.google.com\/recaptcha\/api.js'><\/script><\/pre>\n
 <\/p>\n
Voc\u00ea tamb\u00e9m pode definir qual dos 40 idiomas suportados<\/a> voc\u00ea usar\u00e1, adicionando um par\u00e2metro \u00e0 cadeia de caracteres. Aqui, adicionaremos pt-BR<\/code> o que nos trar\u00e1 o idioma Portugu\u00eas Brasileiro para o reCAPTCHA:<\/p>\n
<script src='https:\/\/www.google.com\/recaptcha\/api.js?hl=pt-BR'><\/script><\/pre>\n
 <\/p>\n
Coloque essa tag<\/em> de script<\/em> no rodap\u00e9 da sua p\u00e1gina (ou logo abaixo de onde o reCAPTCHA aparecer\u00e1, dependendo apenas de como voc\u00ea prioriza o carregamento dos recursos da sua p\u00e1gina).<\/p>\n
Passo 4<\/h3>\n
Agora, voc\u00ea precisar\u00e1 criar um espa\u00e7o reservado em seu formul\u00e1rio, onde quer que voc\u00ea queira que o reCAPTCHA apare\u00e7a:<\/p>\n
<div class=\"g-recaptcha\" data-sitekey=\"6LcePAATAAAAAGPRWgx90814DTjgt5sXnNbV5WaW\"><\/div><\/pre>\n
 <\/p>\n
Nota<\/strong>: o atributo data-sitekey<\/code> dever\u00e1 conter o valor da sua<\/em> chave, n\u00e3o o valor desse exemplo.<\/p>\n
H\u00e1 outros atributos que voc\u00ea pode adicionar para customizar o visual e a funcionalidade do seu reCAPTCHA. Por exemplo, adicionando o atributo data-theme=\"dark\"<\/code> a esse elemento div<\/code>, retornar\u00e1 uma vers\u00e3o escura do reCAPTCHA, que talvez combine melhor com a sua interface:<\/p>\n
\"dark\"<\/figure>\n
Para mais detalhes sobre a configura\u00e7\u00e3o do reCAPTCHA, d\u00ea uma olhada no site\u00a0developers.google.com<\/a>.<\/p>\n
Juntando Tudo<\/h2>\n
Agora que temos todos os ingredientes iniciais, \u00e9 hora de coloc\u00e1-los para funcionar.<\/p>\n
Passo 1<\/h3>\n
Coloquemos a tag<\/em> e a div<\/code> do espa\u00e7o reservado em um formul\u00e1rio bem simples:<\/p>\n
<!DOCTYPE html>\n<html lang=\"pt-BR\">\n  <head>\n<title>Como Integrar o \u201cNo CAPTCHA reCAPTCHA\u201d do Google no Seu Site<\/title>\n  <\/head>\n \n  <body>\n \n    <form action=\"\" method=\"post\">\n \n      <label for=\"name\">Nome:<\/label>\n      <input name=\"name\" required \/><br \/>\n \n      <label for=\"email\">E-mail:<\/label>\n      <input name=\"email\" type=\"email\" required \/><br \/>\n \n      <div class=\"g-recaptcha\" data-sitekey=\"6LcePAATAAAAAGPRWgx90814DTjgt5sXnNbV5WaW\"><\/div>\n \n      <input type=\"submit\" value=\"Enviar\" \/>\n \n    <\/form>\n \n    <!--js-->\n    <script src='https:\/\/www.google.com\/recaptcha\/api.js?hl=pt-BR'><\/script>\n \n  <\/body>\n<\/html><\/pre>\n
 <\/p>\n
Criamos uma estrutura bem b\u00e1sica com um formul\u00e1rio contendo campos para\u00a0nome<\/code> e e-mail<\/code>, al\u00e9m do bot\u00e3o para enviar o formul\u00e1rio. N\u00e3o h\u00e1 qualquer estiliza\u00e7\u00e3o ou coisa do tipo, porque n\u00e3o ser\u00e1 necess\u00e1rio para esse tutorial.<\/p>\n
\"form\"
Voc\u00ea deve ter algo mais ou menos assim<\/figcaption><\/figure>\n
Para demonstrar que o teste do reCAPTCHA funcionou, precisaremos executar algumas verifica\u00e7\u00f5es no lado do servidor. Neste caso, faremos usando o PHP, ent\u00e3o, salve este arquivo em um novo projeto, como index.php<\/code>.<\/p>\n
Passo 2<\/h3>\n
Voc\u00ea perceber\u00e1 que o m\u00e9todo de submiss\u00e3o do formul\u00e1rio \u00e9 do tipo post<\/code>, ent\u00e3o, quando os dados do formul\u00e1rio forem enviados, eles retornam para essa mesma p\u00e1gina na forma de um vetor. Podemos retornar esses valores, iterando sobre elas, ent\u00e3o, adicione o seguinte c\u00f3digo \u00e0 sua p\u00e1gina:<\/p>\n
<?php\n      foreach ($_POST as $key => $value) {\n          echo '<p><strong>' . $key.':<\/strong> '.$value.'<\/p>';\n      }\n?><\/pre>\n
 <\/p>\n
Esse c\u00f3digo pega cada par chave\/valor presente em nosso vetor $_POST<\/code> e retorna-os com uma certa formata\u00e7\u00e3o. Agora, ao submeter o formul\u00e1rio, voc\u00ea dever\u00e1 ver algo parecido com isso:<\/p>\n
\"form-submitted\"<\/figure>\n
Voc\u00ea ver\u00e1 os valores retornados para name<\/code> e email<\/code>, mas tamb\u00e9m ver\u00e1 um valor para g-recaptcha-response<\/code>. Se voc\u00ea errou no teste do CAPTCHA, esse valor estar\u00e1 em branco, mas se voc\u00ea marcou a caixa \u201cEu n\u00e3o sou um rob\u00f4\u201d (em ingl\u00eas,I\u2019m not a robot<\/em>), voc\u00ea ver\u00e1 uma enorme cadeia de caracteres.<\/p>\n
\u00c9 esse valor que precisamos enviar para o Google, para que ele o verifique. Ent\u00e3o, \u00e9 isso que faremos agora.<\/p>\n
Passo 3<\/h3>\n
Felizmente, a equipe de desenvolvedores do Google fez o trabalho duro por n\u00f3s. Basta irmos ao projeto no Github do\u00a0ReCAPTCHA<\/a> e baixarmos uma c\u00f3pia do da biblioteca recaptchalib.php<\/a>. Coloque-a no diret\u00f3rio raiz do seu projeto e referencie-o no topo do seu arquivo index.php<\/code>:<\/p>\n
<?php\n \n\/\/ busca a biblioteca recaptcha\nrequire_once \"recaptchalib.php\";\n \n?><\/pre>\n
 <\/p>\n
Passo 4<\/h3>\n
Essa biblioteca cont\u00e9m uma cole\u00e7\u00e3o de fun\u00e7\u00f5es que enviam o\u00a0g-recaptcha-response<\/code>\u00a0(junto de nossa chave secreta)\u00a0para o Google, atrav\u00e9s de uma requisi\u00e7\u00e3o HTTP. Depois, recebem a resposta, verificando se o CAPTCHA foi bem sucedido ou n\u00e3o. Para us\u00e1-las, precisamos preparar algumas vari\u00e1veis, antes da tag<\/em> de fechamento do PHP:<\/p>\n
\/\/ sua chave secreta\n$secret = \"6LcePAATAAAAABjXaTsy7gwcbnbaF5XgJKwjSNwT\";\n \n\/\/ resposta vazia\n$response = null;\n \n\/\/ verifique a chave secreta\n$reCaptcha = new ReCaptcha($secret);<\/pre>\n
 <\/p>\n
O ReCaptcha()<\/code> verifica se nossa chave est\u00e1 presente. Em caso negativo, ele encerra o processo e recomenda obtermos uma. Agora, passamos nossos detalhes pelo seguinte c\u00f3digo:<\/p>\n
\/\/ se submetido, verifique a resposta\nif ($_POST[\"g-recaptcha-response\"]) {\n$response = $reCaptcha->verifyResponse(\n        $_SERVER[\"REMOTE_ADDR\"],\n        $_POST[\"g-recaptcha-response\"]\n    );\n}<\/pre>\n
 <\/p>\n
Passo 5<\/h3>\n
Assumindo que tudo esteja bem com nosso formul\u00e1rio enviado, a vari\u00e1vel\u00a0$response<\/code> reportar\u00e1 \u201csucesso\u201d e podermos continuar o processamento dos dados do formul\u00e1rio. Eis como pode ficar: remova a parte que iteramos sobre os dados do formul\u00e1rio e adicione a verifica\u00e7\u00e3o acima do formul\u00e1rio:<\/p>\n
<?php\n      if ($response != null && $response->success) {\n        echo \"Ol\u00e1, \" . $_POST[\"name\"] . \" (\" . $_POST[\"email\"] . \"), obrigado por enviar seu formul\u00e1rio!\";\n      } else {\n?><\/pre>\n
 <\/p>\n
Por fim, adicione a tag<\/em> de fechamento do PHP ap\u00f3s o formul\u00e1rio:<\/p>\n
<?php } ?><\/pre>\n
 <\/p>\n
Esse c\u00f3digo mostra o formul\u00e1rio, a n\u00e3o ser que tenha sido submetido com sucesso, quando aparecer\u00e1 uma pequena mensagem de agradecimento.<\/p>\n
Conclus\u00e3o<\/h2>\n
Essa foi uma implementa\u00e7\u00e3o bem simples e crua em PHP para o No CAPTCHA reCAPTCHA<\/em>. Est\u00e1 aberto a aprimoramentos, mas, acredito que dar\u00e1 uma boa ideia do b\u00e1sico. Cr\u00e9ditos da biblioteca vai para a equipe de desenvolvedores do Google<\/a> e tamb\u00e9m devo agradecer ai Matt Aussaguel<\/a> por apresent\u00e1-la.<\/p>\n","protected":false},"excerpt":{"rendered":"
Desenvolvedores do Google trouxessem a melhor solu\u00e7\u00e3o para o CAPTCHA, o \u201cNo CAPTCHA reCAPTCHA\u201d. Aprenda neste tutorial como Integrar esta ferramenta ao seu site.<\/p>\n","protected":false},"author":1,"featured_media":3994,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,6,28],"tags":[95,623],"class_list":["post-3981","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","category-dicas","category-tutoriais","tag-captcha","tag-tutorial-recaptcha"],"_links":{"self":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/3981","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/comments?post=3981"}],"version-history":[{"count":0,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/3981\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media\/3994"}],"wp:attachment":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media?parent=3981"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/categories?post=3981"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/tags?post=3981"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}