Se você utiliza o Firebase como backend, sabe que a segurança é uma via de mão dupla. Não basta apenas ter boas regras no Firestore; é preciso garantir que apenas o seu aplicativo acesse seus recursos. Neste guia, vamos aprender como implementar o App Check com reCAPTCHA v3 em um projeto Angular 18 utilizando NgModules.

1. O que é o App Check? Link para o cabeçalho

O Firebase App Check é uma camada de segurança que ajuda a proteger seus serviços na nuvem (Firestore, Realtime Database, Cloud Storage) verificando se o tráfego vem de um aplicativo legítimo e bloqueando o tráfego sem credenciais válidas.

2. Configuração no Console do Firebase Link para o cabeçalho

Antes de ir para o código, você precisa registrar seu aplicativo no console.

Ativando o App Check: Link para o cabeçalho

  1. Acesse o Console do Firebase e vá em Build > App Check.
  2. Na aba Apps, clique no seu app web e selecione Register.
  3. Escolha reCAPTCHA v3.
  4. Você precisará de uma Site Key (pública) e uma Secret Key (privada). Gere-as no console do Google reCAPTCHA.
  5. Atenção: Salve a Secret Key apenas no console do Firebase. Nunca a coloque no código do seu projeto Angular.

Cuidado Importante: Ao ativar o App Check, não clique imediatamente em “Enforce” (Impor). Isso bloqueará todo o tráfego que não tiver o token. Primeiro, implemente o código, verifique se as métricas mostram requisições válidas e, só então, ative o bloqueio total.

3. Implementação no Angular 18 (NgModule) Link para o cabeçalho

Muitos tutoriais atuais focam apenas em componentes standalone. Se o seu projeto usa app.module.ts, a configuração deve ser feita nos providers.

Instalação das dependências: Link para o cabeçalho 

npm install ng-recaptcha @angular/fire

Configuração do app.module.ts: Link para o cabeçalho

O segredo aqui é a ordem de inicialização. O App Check deve ser um dos primeiros serviços a carregar.

import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideAppCheck, initializeAppCheck, ReCaptchaV3Provider, CustomProvider } from '@angular/fire/app-check';
import { RECAPTCHA_V3_SITE_KEY, RecaptchaV3Module } from 'ng-recaptcha';

@NgModule({
  imports: [
    // ... outros módulos
    AngularFireModule.initializeApp(environment.firebase),
    RecaptchaV3Module,
  ],
  providers: [
    // 1. Inicializa o Firebase App
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    
    // 2. Configura o App Check com suporte a Debug em desenvolvimento
    provideAppCheck(() => {
      if (environment.production) {
        return initializeAppCheck(undefined, {
          provider: new ReCaptchaV3Provider(environment.googleRecaptchaSiteKey),
          isTokenAutoRefreshEnabled: true
        });
      } else {
        // Habilita o Debug Token para rodar em localhost
        (self as any).FIREBASE_APPCHECK_DEBUG_TOKEN = true;
        return initializeAppCheck(undefined, {
          provider: new CustomProvider({
            getToken: () => Promise.resolve({ token: 'debug-token' } as any)
          }),
          isTokenAutoRefreshEnabled: true
        });
      }
    }),

    // 3. Chave do reCAPTCHA para os formulários
    {
      provide: RECAPTCHA_V3_SITE_KEY,
      useValue: environment.googleRecaptchaSiteKey,
    },
  ]
})
export class AppModule { }

4. Como lidar com o selo do reCAPTCHA Link para o cabeçalho

Por padrão, o ícone do reCAPTCHA v3 fica flutuando sobre a página. Se você já incluiu os termos legais no rodapé do seu site, pode ocultá-lo via CSS no seu arquivo global (styles.css):

.grecaptcha-badge { 
    visibility: hidden !important;
}

5. Testando no Localhost (Debug Token) Link para o cabeçalho

Ao rodar seu app localmente, o reCAPTCHA real pode falhar. Por isso usamos o FIREBASE_APPCHECK_DEBUG_TOKEN = true.

  1. Abra o console do navegador (F12).

  2. O Firebase imprimirá uma mensagem: AppCheck debug token: SEU-UUID-AQUI.

  3. Copie esse UUID.

  4. No Console do Firebase, em App Check > Apps, clique nos três pontinhos do seu app e selecione Manage debug tokens.

  5. Adicione o token copiado lá. Sem isso, você receberá erro de “Missing or insufficient permissions” no Firestore local.

Conclusão Link para o cabeçalho

Implementar o App Check é o passo definitivo para transformar um projeto amador em uma aplicação profissional e segura. Ele impede abusos de bots e garante que sua cota do Firebase não seja consumida por acessos indevidos.