Comece a usar o App Check com o reCAPTCHA v3 em apps da Web

Nesta página, mostramos como ativar o App Check em um app da Web usando o provedor de reCAPTCHA v3 integrado. Ao ativar o App Check, você ajuda a garantir que apenas seu app possa acessar os recursos do Firebase do seu projeto. Consulte a Visão geral desse recurso.

O reCAPTCHA v3 não é exibido aos usuários. O provedor reCAPTCHA v3 não vai exigir que os usuários resolvam um desafio a qualquer momento. Consulte a documentação do reCAPTCHA v3.

Se você quiser usar o App Check com seu provedor personalizado, consulte Implementar um provedor personalizado do App Check.

1. Configurar seu projeto do Firebase

Adicione o Firebase ao seu projeto em JavaScript caso ainda não tenha feito isso.
Registre seu site no reCAPTCHA v3 e receba uma chave secreta e outra do site do reCAPTCHA v3.
Registre seus apps para usar o App Check com o provedor reCAPTCHA na seção App Check do Console do Firebase. Será necessário fornecer a chave secreta que você recebeu na etapa anterior.

Geralmente, é preciso registrar todos os apps do projeto porque, depois de ativar a aplicação em um produto do Firebase, somente apps registrados poderão acessar os recursos de back-end do produto.
Opcional: nas configurações de registro do aplicativo, defina um time to live (TTL) personalizado para os tokens do App Check emitidos pelo provedor. É possível definir o TTL como qualquer valor entre 30 minutos e 7 dias. Ao mudar esse valor, esteja ciente das seguintes compensações:
- Segurança: os TTLs mais curtos oferecem maior segurança, porque reduzem a janela em que um token vazado ou interceptado pode ser usado por um invasor.
- Desempenho: TTLs mais curtos significam que seu app realizará atestados com mais frequência. Como o processo de atestado do app adiciona latência às solicitações de rede sempre que é executado, um TTL curto pode afetar o desempenho do app.
- Cota e custo: TTLs mais curtos e novos atestados frequentes esgotam sua cota mais rapidamente e, para serviços pagos, podem custar mais. Consulte Cotas e limites.
O TTL padrão de 1 dia é razoável para a maioria dos apps. Observe que a biblioteca do App Check atualiza os tokens em aproximadamente metade da duração do TTL.

2. Adicionar a biblioteca do App Check ao seu app

Adicione o Firebase ao seu app da Web, caso ainda não tenha feito isso. Importe a biblioteca do App Check.

3. Inicializar App Check

Adicione o código de inicialização a seguir ao aplicativo antes de acessar os serviços do Firebase. Será necessário enviar a chave do site reCAPTCHA que você criou no console reCAPTCHA para activate().

Web

import { initializeApp } from "firebase/app";
import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";

const app = initializeApp({
  // Your firebase configuration object
});

// Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this
// key is the counterpart to the secret key you set in the Firebase console.
const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaV3Provider('abcdefghijklmnopqrstuvwxy-1234567890abcd'),

  // Optional argument. If true, the SDK automatically refreshes App Check
  // tokens as needed.
  isTokenAutoRefreshEnabled: true
});appcheck_initialize.js

Web

firebase.initializeApp({
  // Your firebase configuration object
});

const appCheck = firebase.appCheck();
// Pass your reCAPTCHA v3 site key (public key) to activate(). Make sure this
// key is the counterpart to the secret key you set in the Firebase console.
appCheck.activate(
  'abcdefghijklmnopqrstuvwxy-1234567890abcd',

  // Optional argument. If true, the SDK automatically refreshes App Check
  // tokens as needed.
  true);index.js

Próximas etapas

Implante a biblioteca do App Check depois que ela estiver instalada no seu app.

O app cliente atualizado começará a enviar tokens do App Check com todas as solicitações feitas ao Firebase, mas os produtos do Firebase não exigirão que os tokens sejam válidos até que você ative a aplicação obrigatória na seção "App Check" do console do Firebase.

Monitorar métricas e ativar a aplicação obrigatória

Antes de ativar a aplicação obrigatória, verifique se isso não vai afetar seus usuários legítimos. Por outro lado, se você perceber um uso suspeito dos recursos do seu app, convém ativar a aplicação obrigatória antes do previsto.

Para tomar essa decisão, analise as métricas do App Check nos serviços usados:

Monitore as métricas de solicitações do App Check no Realtime Database, Cloud Firestore, Cloud Storage e Authentication (Beta).
Monitore as métricas de solicitações do App Check no Cloud Functions.

Ativar a aplicação obrigatória do App Check

Assim que você entender como o App Check vai afetar seus usuários, e se estiver tudo pronto para prosseguir com o processo, ative a aplicação obrigatória do App Check:

Ative a aplicação obrigatória do App Check no Realtime Database, Cloud Firestore, Cloud Storage e Authentication (Beta).
Ative a aplicação obrigatória do App Check no Cloud Functions.

Usar o App Check em ambientes de depuração

Se, depois de registrar seu aplicativo no App Check, você quiser executá-lo em um ambiente em que o App Check normalmente não seria classificado como válido, como localmente, durante o desenvolvimento ou em uma integração contínua (CI), crie um build de depuração do seu app que use o provedor de depuração do App Check em vez de um provedor de atestado real.

Consulte Usar App Check com o provedor de depuração em apps da Web.