Proteção Invisível contra Bots e Automações Maliciosas

O reCAPTCHA v3 representa uma evolução na segurança web. Diferente das versões anteriores, ele não interrompe o fluxo do usuário com desafios de “clique em todas as pontes”. Em vez disso, ele monitora o comportamento e retorna uma pontuação (score) que permite à aplicação decidir se a interação é legítima ou fruto de um script automatizado.

1. Preparação: Obtendo as Chaves de API Link para o cabeçalho

Antes de tocar no código, você precisa registrar sua aplicação no ecossistema do Google.

  1. Acesse o Google reCAPTCHA Admin Console.

  2. Etiqueta (Label): Use um nome identificável (Ex: “suaaplicacao-Prod”).

  3. Tipo de reCAPTCHA: Selecione explicitamente o v3.

  4. Domínios: Adicione seus domínios ativos (ex: seudominio.com.br) e também localhost para permitir testes em ambiente de desenvolvimento.

  5. Chaves: Após salvar, você receberá:

  • Site Key (Chave do Site): Usada no frontend (Pública).
  • Secret Key (Chave Secreta): Usada para validações no servidor (Privada).

2. Instalação do Pacote Link para o cabeçalho

Para o Angular, a biblioteca mais estável e utilizada é a ng-recaptcha. Ela abstrai a complexidade de carregar o script do Google manualmente.

Execute no seu terminal:

npm install ng-recaptcha --legacy-peer-deps

(Nota: A flag –legacy-peer-deps é recomendada caso você esteja utilizando versões muito recentes do Angular, como a v19 ou v21).

3. Configuração Global da Aplicação Link para o cabeçalho

Você deve injetar a sua Site Key no coração da aplicação para que o serviço esteja disponível em qualquer componente.

No seu arquivo de configuração (normalmente app.config.ts), adicione os seguintes provedores:

import { RECAPTCHA_V3_SITE_KEY, RecaptchaV3Module } from 'ng-recaptcha';
import { importProvidersFrom } from '@angular/core';
import { environment } from '../environments/environment';

export const appConfig: ApplicationConfig = {
  providers: [
    // Fornece a chave obtida no console do Google
    {
      provide: RECAPTCHA_V3_SITE_KEY,
      useValue: environment.recaptchaSiteKey, // Armazene sua Site Key no environment.ts
    },
    // Importa o módulo necessário para o serviço funcionar
    importProvidersFrom(RecaptchaV3Module)
  ]
};

4. Implementação no Componente de Ação Link para o cabeçalho

A melhor prática é disparar o reCAPTCHA apenas no momento em que o usuário realiza uma ação sensível, como clicar no botão “Gerar Lote”.

No seu componente (ex: gerador-lote.ts):

import { Component, inject } from '@angular/core';
import { ReCaptchaV3Service } from 'ng-recaptcha';

@Component({ ... })
export class GeradorLoteComponent {
  private recaptchaV3Service = inject(ReCaptchaV3Service);

  async acaoDeCriacao() {
    // 1. Executa o desafio invisível associado a uma ação específica
    this.recaptchaV3Service.execute('gerar_lote').subscribe({
      next: (token) => {
        if (token) {
          // 2. Token gerado com sucesso! 
          // Agora você pode prosseguir com a lógica segura (ex: gravar no Firestore)
          this.gravarNoBanco(token);
        }
      },
      error: (err) => {
        console.error('Erro no reCAPTCHA:', err);
        alert('Segurança: Falha ao validar comportamento humano.');
      }
    });
  }
}

5. Ajuste de Layout: Escondendo o Selo (Badge) Link para o cabeçalho

Por padrão, o Google exibe um selo flutuante no canto inferior direito. Se isso atrapalhar seu design ou cobrir botões importantes, você pode ocultá-lo, desde que exiba o texto legal no rodapé.

No seu styles.css global:

/* Oculta o selo flutuante sem quebrar a funcionalidade */
.grecaptcha-badge { 
  visibility: hidden !important; 
}

No seu footer.component.html (Obrigatório por lei):

<p class="text-xs text-gray-400">
  Este site é protegido pelo reCAPTCHA e a 
  <a href="https://policies.google.com/privacy" target="_blank">Privacidade</a> e 
  <a href="https://policies.google.com/terms" target="_blank">Termos</a> do Google se aplicam.
</p>

6. Fluxo de Validação Final Link para o cabeçalho

O fluxo completo de segurança que você acabou de implementar segue este caminho:

  1. Interação: O usuário clica em um botão.

  2. Token: O Angular solicita um token ao servidor do reCAPTCHA.

  3. Assinatura: Esse token é enviado junto com os dados do lote para o Firebase.

  4. App Check (Opcional/Avançado): O Firebase valida se o token é autêntico e se a origem é o seu domínio oficial, permitindo ou negando a gravação no Firestore.

Conclusão Link para o cabeçalho

Implementar o reCAPTCHA v3 não é apenas sobre “parar bots”; é sobre garantir que os recursos do seu servidor e as cotas do seu banco de dados sejam usados por pessoas reais. Combinando isso com o Firebase App Check, sua aplicação atinge um nível de segurança profissional, protegendo tanto a experiência do usuário quanto o seu bolso.