O CAPTCHA padrão é inútil, os bots passam por ele "de uma vez" e criam problemas para os usuários.
A melhor solução é usar o Google reCAPTCHA v2 ou v3. Ambas as versões do Google reCAPTCHA são ótimas opções. Isso é o que há de melhor agora disponível no mercado a partir de soluções claras e confiáveis e gratuitas.
O principal problema com ambas as versões é que, quando conectadas, as pontuações do PageSpeed Insight são significativamente reduzidas em 20-30.
ReCAPTCHA v2 exemplo - requer adivinhando fotos
 |
Exemplo reCAPTCHA v3 - não requer ações do usuário, analisa seu comportamento em segundo plano
  |
Um ponto importante para mim é não criar problemas para usuários reais, porque Eu mesmo não sou um grande fã de adivinhar veículos no reCAPTCHA v2, então minha escolha é v3.
Portanto, há dois problemas do Google reCAPTCHA v3 que precisam ser resolvidos:
- logotipo pendurado no canto inferior direito;
- perda de 20-30 pontos no Google PageSpeed Insight.
Logotipo suspenso O
Google permite que você remova o logotipo ocultando-o por meio de CSS em seu contrato de licença.
.grecaptcha-badge {
visibility: hidden;
}Em vez disso, em cada formulário, escreva "Privacidade e Termos de Serviço do reCAPTCHA anti-spam" com links para páginas relevantes do Google.
|
Perda de pontos no Google PageSpeed Insight
Ao conectar um arquivo javascript do reCAPTCHA v3, as pontuações no Google PageSpeed Insight são bastante reduzidas. Isso foi fundamental para mim. Acho que isso se deve à análise do comportamento do usuário (uma diminuição semelhante ocorre ao usar o visor da web no Yandex.Metrica).
Em recursos bem otimizados, você pode perder de 20 a 30 pontos. Portanto, você pode usá-lo em páginas separadas onde a velocidade não é importante (por exemplo, contatos) sem qualquer modificação. Para uso em todo o site (por exemplo, para proteger um formulário de login de ponta a ponta ou assinatura de boletim informativo), é aconselhável fazer uma modificação.
Eu criei uma opção para inicializar o reCAPTCHA v3 clicando nos campos do formulário. Por padrão, não carrego o arquivo javascript do reCAPTCHA v3 e, somente se o usuário colocar o cursor em um dos campos do formulário, eu o carrego. Provavelmente, esse método reduz a precisão de determinar usuários reais, mas não houve problemas. Essa precisão é suficiente para minhas tarefas.
Essa técnica foi aplicada primeiro aos formulários da web 1C-Bitrix, depois para autorização ponta a ponta e formulários de inscrição em sites sem Bitrix.
Tendo em vista o fato de que 1C-Bitrix é um CMS público, vou falar em termos gerais usando seu exemplo - sobre a metodologia e possível caso de uso. Mais ajustes finos podem ser feitos para atender às suas necessidades.
Usando o Google reCAPTCHA v3 em formulários da web 1C-Bitrix
1. Chamamos o formulário usando o componente bitrix: formulário padrão e fazemos 2 adições:
- Substitua o botão type = submit pelo botão usual type = button
- adicionar nome de campo oculto = g_recaptcha_response
|
2. Adicione a inicialização de reCAPTCHA ao clicar nos campos do formulário ao arquivo javascript do site ou componente (neste exemplo, suponho que você esteja usando jQuery):
$('body').on('click','form input, form textarea', function() {
if (typeof(grecaptcha) == 'undefined') {
var grecaptcha_s = document.createElement('script');
grecaptcha_s.src = 'https://www.google.com/recaptcha/api.js?render=<PUBLIC_KEY>';
var grecaptcha_h = document.getElementsByTagName('script')[0];
grecaptcha_h.parentNode.insertBefore(grecaptcha_s,grecaptcha_h);
}
});3. Adicionar rastreamento do clique no botão botão no formulário. Mais adiante, usamos o exemplo descrito na documentação do Google. Ele preenche o campo g_recaptcha_response, que usaremos na última etapa para validar o usuário.
$('body').on('click','form button[name="web_form_submit"]', function() {
grecaptcha.ready(function() {
grecaptcha.execute('<PUBLIC_KEY>',{action: 'feedback'}).then(
function(token) {
$('form input[name="g_recaptcha_response"]').val(token);
var form_obj = $('form');
var event_obj = form_obj.get(0);
BX.fireEvent(event_obj,'submit');
event_obj.submit();
}
);
});
});4. Acompanhamento do evento onBeforeResultAdd em init.php
Antes de enviar os resultados do formulário, fazemos um apelo ao servidor do Google com sua <PRIVATE_KEY> e o valor do campo g_recaptcha_response oculto do formulário.
Em resposta, obtemos os pontos deste usuário:
- 1 esta é definitivamente uma pessoa
- 0 exatamente um robô
- Mais de 0,5 pode ser considerado humano
AddEventHandler("form","onBeforeResultAdd","onBeforeResultAddHandler");
function onBeforeResultAddHandler($WEB_FORM_ID,$arFields,$arrVALUES)
{
global $APPLICATION;
$g_recaptcha_response = $arrVALUES["g_recaptcha_response"];
if (!empty($g_recaptcha_response))
{
$response = json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=<PRIVATE_KEY>&response=".$g_recaptcha_response."&remoteip=".$_SERVER["REMOTE_ADDR"]),true);
$g_recaptcha_response_check = false;
if (($response["success"] and $response["score"] >= 0.5 and $response["action"] == 'feedback']))
{
$g_recaptcha_response_check = true;
}
if (!$g_recaptcha_response_check)
{
$APPLICATION->ThrowException(' Google reCAPTCHA v3.</a>');
}
}
else
{
$APPLICATION->ThrowException(' Google reCAPTCHA v3.');
}
}Finalmente
Essa técnica pode ser usada em quaisquer sites e formulários, independentemente do CMS. Apresentei métodos gerais de trabalho que podem ser aplicados em seu projeto.
Você pode fazer o mesmo com o Google reCAPTCHA v2, inicialize clicando no formulário e peça ao usuário para marcar a caixa "Não sou um robô" e adivinhar as imagens, se necessário. Nesse caso, ele também salvará os pontos do PageSpeed Insight e fornecerá ao usuário uma ferramenta (selecione imagens) para provar que ele não é um robô. Mas como eu disse acima, o mais importante para mim é não criar obstáculos para o usuário.