O Firebase App Check funciona como um selo de autenticidade para o seu aplicativo. Ele garante que as requisições feitas ao seu projeto Firebase venham exclusivamente do seu site oficial* e de dispositivos legítimos.

Sem o App Check, um atacante poderia extrair suas chaves do Firebase do código-fonte (que são públicas por natureza no frontend) e usá-las para manipular seu banco de dados através de scripts externos. Com o App Check, o Firebase rejeita qualquer requisição que não possua um token de validação válido.

1. O Provedor de Atestado: reCAPTCHA v3 Link para o cabeçalho

Para aplicações Web, o App Check utiliza o reCAPTCHA v3 como mecanismo para provar que a requisição é legítima. Ele analisa o tráfego e fornece um token de atestado que o App Check valida antes de liberar o acesso aos dados.

2. Implementação no Angular Link para o cabeçalho

Instalação Certifique-se de ter o @angular/fire em seu projeto:

npm install @angular/fire --legacy-peer-deps

Configuração no app.config.ts Você deve inicializar o App Check no array de providers da sua aplicação.

import { provideAppCheck, initializeAppCheck, ReCaptchaV3Provider } from '@angular/fire/app-check';
import { environment } from '../environments/environment';

export const appConfig: ApplicationConfig = {
  providers: [
    // ... outros providers (FirebaseApp, Firestore)
    provideAppCheck(() => {
      const provider = new ReCaptchaV3Provider(environment.recaptchaSiteKey);
      return initializeAppCheck(undefined, {
        provider,
        isTokenAutoRefreshEnabled: true // Mantém o usuário validado em sessões longas
      });
    }),
  ]
};

3. Desenvolvimento e o “Debug Token” Link para o cabeçalho

O App Check é extremamente rigoroso e, por padrão, falhará em ambientes de desenvolvimento (localhost), pois o Google não considera o seu computador local como um ambiente de produção confiável.

Para contornar isso sem desativar a segurança, utilizamos o Debug Token.

Passo A: Configuração no Código

No seu arquivo main.ts (ou no ponto de entrada da sua aplicação), adicione o seguinte trecho antes de inicializar o Angular:

// Força a geração de um token de depuração em ambiente de desenvolvimento
if (environment.production === false) {
  (self as any).FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}

Passo B: Obtendo o Token no Navegador

  1. Execute seu projeto com ng serve.

  2. Abra o console do desenvolvedor no navegador (F12).

  3. Você verá uma mensagem do Firebase semelhante a esta: App Check debug token: 12345678-ABCD-EFGH-IJKL-9876543210MN.

  4. Copie este código.

Passo C: Registrando no Console do Firebase

  1. Vá para o Console do Firebase > App Check > aba Apps.

  2. Clique no ícone de três pontos vertical no seu App Web.

  3. Selecione Gerenciar tokens de depuração (Manage debug tokens).

  4. Clique em Adicionar token de depuração e cole o código que você copiou do console do navegador.

4. Ativando o “Enforcement” (Aplicação) Link para o cabeçalho

Após configurar o código, o App Check começará a monitorar o tráfego, mas ainda não bloqueará ninguém. Para ativar a barreira real:

  1. No Console do Firebase, acesse App Check > APIs.

  2. Localize o Cloud Firestore (ou outro serviço que deseja proteger).

  3. Clique em Aplicar (Enforce).

Cuidado: Só clique em Enforce após verificar nas métricas que suas requisições legítimas estão sendo classificadas como “Verificadas”. Caso contrário, você bloqueará seus próprios usuários.

5. Benefícios no Ciclo de Vida do Projeto Link para o cabeçalho

  • Prevenção de Abuso: Scripts de terceiros não conseguem mais ler ou gravar no seu banco de dados.

  • Controle de Custos: Evita que ataques automáticos consumam sua cota de leitura/escrita no Firestore.

  • Conformidade: Garante que apenas a sua interface de usuário (UI) dite as regras de interação com os dados.

O uso do FIREBASE_APPCHECK_DEBUG_TOKEN garante que sua produtividade como desenvolvedor não seja afetada, permitindo que você teste todas as funcionalidades de segurança no localhost exatamente como elas se comportarão no domínio final seudominio.com.br.