{"id":16154,"date":"2018-09-05T08:00:46","date_gmt":"2018-09-05T11:00:46","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=16154"},"modified":"2022-01-25T09:27:44","modified_gmt":"2022-01-25T12:27:44","slug":"como-implementar-o-recaptcha-invisivel-no-seu-site","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/como-implementar-o-recaptcha-invisivel-no-seu-site\/","title":{"rendered":"Como implementar o reCAPTCHA invis\u00edvel no seu site"},"content":{"rendered":"

O reCaptcha<\/strong> \u00e9 um tecnologia disponibilizada pelo Google para prote\u00e7\u00e3o contra spam e abusos. Ele realiza Machine Learning<\/strong>, que faz uma combina\u00e7\u00e3o de an\u00e1lise de acordo com o que vai sendo utilizando e assim aprendendo a identificar usu\u00e1rios inv\u00e1lidos.<\/p>\n

Al\u00e9m disso, toda vez que voc\u00ea precisa escrever, identificar imagem, isso \u00e9 utilizado para digitalizar texto, anotar imagens e criar conjuntos de dados de aprendizado de m\u00e1quina.<\/p>\n

Isso por sua vez ajuda a preservar livros, melhorar mapas e resolver problemas de intelig\u00eancia artificial.<\/p>\n

O reCaptcha<\/strong> em sua evolu\u00e7\u00f5es come\u00e7ou com identifica\u00e7\u00e3o de palavras, depois utilizando n\u00fameros de casas em fotos tiradas pelos carros do Street View e depois reconhecimento de imagens, como identificar em quais fotos tem algum carro na imagem, por exemplo.<\/p>\n

E em 2017, o Google lan\u00e7ou o\u00a0Invisible reCaptcha<\/strong>, o qual n\u00e3o solicita nenhum desafio para identificar o usu\u00e1rio v\u00e1lido. Podem ter casos que n\u00e3o consiga identificar, mas neste caso ele abrir\u00e1 op\u00e7\u00e3o de teste de reconhecimento.<\/p>\n

Vamos aprender como implementar esse recurso do\u00a0reCaptcha Invis\u00edvel<\/strong>, e realizar a valida\u00e7\u00e3o da informa\u00e7\u00e3o via server-side.<\/p>\n

Criar chaves de acesso<\/h2>\n

Primeiro passo \u00e9 gerar a chave de acesso para utiliza\u00e7\u00e3o do reCaptcha. Para isso acesse o link abaixo:<\/p>\n

https:\/\/www.google.com\/recaptcha\/admin\u00a0<\/a><\/p>\n

Voc\u00ea encontrar\u00e1 uma tela parecida com essa abaixo:<\/p>\n

\"\"<\/p>\n

Em “Label”<\/em> voc\u00ea dar\u00e1 nome da identifica\u00e7\u00e3o caso deseje alterar depois. Em “Choose the Type of reCAPTCHA”<\/em>, marque a op\u00e7\u00e3o “Invisible reCAPTCHA”<\/em>.<\/strong><\/p>\n

Ao marcar essa op\u00e7\u00e3o, aparecer\u00e1 a op\u00e7\u00e3o para informar os dom\u00ednios que a chave valer\u00e1.<\/p>\n

\"\"<\/p>\n

Voc\u00ea pode adicionar quantos dom\u00ednios desejar que sejam v\u00e1lidos. Ao adicionar um dom\u00ednio, ser\u00e1 v\u00e1lido para subdom\u00ednios, como este exemplo: Foi adicionado “mxcursos.com”<\/em>, logo “blog.mxcursos.com”<\/em> tamb\u00e9m poder\u00e1 utilizar as chaves de acesso.<\/p>\n

Ap\u00f3s clicar em “Register”<\/em>, voc\u00ea ser\u00e1 redirecionado p\u00e1gina onde conter\u00e1 as informa\u00e7\u00f5es de acesso e integra\u00e7\u00e3o.<\/p>\n

\"\"<\/p>\n

Apesar da imagem n\u00e3o ter carregado um pouco acima, ter\u00e3o as estat\u00edsticas de \u00edndice de spam, por exemplo. E mais abaixo, a op\u00e7\u00e3o de alterar label<\/em>, adicionar mais dom\u00ednios<\/em>, entre outras informa\u00e7\u00f5es.<\/p>\n

J\u00e1 com essas informa\u00e7\u00f5es, vamos implementar no site.<\/p>\n

Criando formul\u00e1rio HTML<\/h2>\n

Primeiramente criaremos um formul\u00e1rio HTML, que ir\u00e1 conter apenas “Nome”<\/em>, “E-mail”<\/em> e um bot\u00e3o, e um pouco de CSS apenas pra n\u00e3o ficar sem formata\u00e7\u00e3o.<\/p>\n

<!DOCTYPE html>\r\n<html lang=\"pt-br\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\r\n    <title>Formul\u00e1rio de Cadastro<\/title>\r\n    <style>\r\n        *{\r\n            box-sizing: border-box;\r\n        }\r\n        body{\r\n            font-family: Verdana, Tahoma, sans-serif;\r\n        }\r\n        form{\r\n            width:500px;\r\n            margin:0 auto;\r\n            border:1px solid #ccc;\r\n            padding:20px;\r\n        }\r\n\r\n        form label{\r\n             font-size:12px;\r\n             color:#333;\r\n         }\r\n        form input{\r\n            width:100%;\r\n            padding:10px 0;\r\n            border:1px solid #ccc;\r\n            margin-bottom:10px;\r\n        }\r\n        form button{\r\n            padding:10px 20px;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n    <form id=\"register\" action=\"\" method=\"post\">\r\n        <label for=\"name\">Nome:<\/label>\r\n        <input type=\"text\" name=\"name\" id=\"name\" \/>\r\n\r\n        <label for=\"email\">E-mail:<\/label>\r\n        <input type=\"email\" name=\"email\" id=\"email\" \/>\r\n        <button type=\"submit\">Enviar<\/button>\r\n\r\n    <\/form>\r\n    \r\n<\/body>\r\n<\/html><\/pre>\n
O formul\u00e1rio ter\u00e1 esta apar\u00eancia:<\/p>\n
\"\"<\/p>\n
Adicionando reCAPTCHA<\/h2>\n
Com formul\u00e1rio definido, iremos adicionar c\u00f3digo referente ao\u00a0reCAPTCHA<\/strong> .<\/p>\n
Existem algumas formas de realizar esse procedimento. Iremos chamar o reCAPTCHA ap\u00f3s ter realizado uma valida\u00e7\u00e3o no JavaScript .<\/p>\n
Iremos adicionar primeiramente o script js, que dever\u00e1 ser inserido antes da tag do fechamento da tag <\/head>.<\/p>\n
<script src='https:\/\/www.google.com\/recaptcha\/api.js'><\/script>\r\n<\/pre>\n
E dentro do formul\u00e1rio, o c\u00f3digo reCAPTCHA :<\/p>\n
<div id='recaptcha' class=\"g-recaptcha\"\r\ndata-sitekey=\"CHAVE DO SITE\"\r\ndata-callback=\"sendForm\"\r\ndata-size=\"invisible\"><\/div><\/pre>\n