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 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 App Check com seu próprio provedor personalizado, consulte Implementar um provedor App Check personalizado.

1. Configurar seu projeto do Firebase

  1. Adicione o Firebase ao seu projeto em JavaScript caso ainda não tenha feito isso.

  2. Registre seu site no reCAPTCHA v3 e receba uma chave secreta e outra do site do reCAPTCHA v3.

  3. Registre seus apps para usar App Check com o provedor reCAPTCHA na seção App Check do console Firebase. Será necessário fornecer a chave do Secret que você recebeu na etapa anterior.

    Geralmente, é necessário registrar todos os apps do projeto porque, depois de ativar a aplicação de um produto do Firebase, somente apps registrados poderão acessar os recursos de back-end do produto.

  4. 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. A biblioteca App Check atualiza os tokens em aproximadamente metade da duração do TTL.

2. Adicionar a biblioteca App Check ao app

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

3. Inicializar o 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 App Check depois que ela for instalada no seu app.

O app cliente atualizado vai começar a enviar tokens do App Check em todas as solicitações feitas ao Firebase, mas os produtos dessa plataforma 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:

Ativar a aplicação App Check

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

Usar 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.