Home
Button Mobile Webdesign em Foco
Newsletter Webdesign em Foco
Support Webdesign em Foco
Contribuition Webdesign em Foco
Doe para a Webdesign em Foco
Suporte da Webdesign em Foco
Fechar

Cadastro e Login - #20 Google ReCaptcha

20/10/2018

Na aula de hoje faremos uma das últimas validações do nosso cadastro, realizaremos a validação através do ReCaptcha do Google.

Recaptcha v3 do Google

O reCAPTCHA é um serviço gratuito que protege seu site contra spam e abuso. Utiliza técnicas avançadas de análise de risco para distinguir humanos e bots. Com a nova API, um número significativo de usuários humanos válidos passará o desafio de reCAPTCHA sem ter que resolver um CAPTCHA. O reCAPTCHA vem na forma de um widget que você pode adicionar facilmente ao seu blog, fórum, formulário de registro, etc.

O primeiro passo é acessar o site do reCaptcha e gerar uma SITEKEY e uma SECRETKEY. Com essas keys em mãos, vamos criar duas constantes no arquivo config.php

#Outras Informações
define("SITEKEY","SUA_SITE_KEY");
define("SECRETKEY","SUA_SECRET_KEY");

A sitekey atua no frontend, já a secretkey como o próprio nome diz é secreta e atua no backend. Não repasse-a a ninguém.

Posteriormente precisamos chamar o script do Google. Pra isso atualizaremos a ClassLayout inserindo o script abaixo no setFooter().

$html.="<script src='https://www.google.com/recaptcha/api.js?render=".SITEKEY."'></script>";

Na sequência vamos chamar a função no nosso arquivo lib/javascript.js:

(function getCaptcha()
{
    grecaptcha.ready(function() {
        grecaptcha.execute('SUA_SITE_KEY', {action: 'homepage'}).then(function(token) {
            const gRecaptchaResponse=document.querySelector("#g-recaptcha-response").value=token;
        });
    });
}
());

Repare no código acima que estamos enviando o token para o input #g-recaptcha-response. Vamos criá-lo agora no nosso views/cadastro

<input class="float w100 h40" type="hidden" id="g-recaptcha-response" name="g-recaptcha-response" required>

Posteriormente, vamos criar o método validateCaptha dentro da nossa ClassValidate:

#Verificar se o captcha está correto
public function validateCaptcha($captcha,$score=0.5)
{
    $return=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".SECRETKEY."&response={$captcha}");
    $response=json_decode($return);
    if($response->success == true && $response->score >= $score){
        return true;
    }else{
        $this->setErro("Captcha Inválido! Atualize a página e tente novamente.");
    }
}

Por fim, vamos chamar o método acima no nosso controllerCadastro:

$validate->validateCaptcha($gRecaptchaResponse);

Lembre-se também de criar a variável $gRecaptchaResponse dentro do arquivo helpers/variables.php:

if(isset($_POST['g-recaptcha-response'])){$gRecaptchaResponse=$_POST['g-recaptcha-response'];}else{$gRecaptchaResponse=null;}

Sucesso nos códigos e na vida!

Receba as aulas da Webdesign em Foco em Seu Email
Suporte Webdesign em Foco

Posts Relacionados

Cadastro e Login - #19 Validate Password
No tutorial de hoje aprenderemos como realizar a validação da senha no cadastro. Verificaremos a força da senha e se a senha está igual a confirmação de senha.
Saiba mais!
Cadastro e Login - #21 Ajax
Hoje vamos inserir no nosso projeto o Ajax para que possamos oferecer ao nosso usuário uma experiência melhor com as respostas do sistema.
Saiba mais!
Cadastro e Login
Neste curso vamos aprender a criar um sistema completo de cadastro e login.
Saiba mais!