Comece a usar o App Check com reCAPTCHA v3 em aplicativos da web

Esta página mostra como ativar o App Check em um aplicativo da web, usando o provedor reCAPTCHA v3 integrado. Ao ativar o App Check, você ajuda a garantir que apenas seu aplicativo possa acessar os recursos do Firebase do seu projeto. Veja uma visão geral deste recurso.

Observe que o reCAPTCHA v3 é invisível para os usuários. O provedor reCAPTCHA v3 não exigirá que os usuários resolvam um desafio em nenhum momento. Consulte a documentação do reCAPTCHA v3 .

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

1. Configure seu projeto Firebase

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

  2. Registre seu site no reCAPTCHA v3 e obtenha a chave do site e a chave secreta do reCAPTCHA v3.

  3. Registre seus aplicativos para usar o App Check com o provedor reCAPTCHA na seção App Check do console do Firebase. Você precisará fornecer a chave secreta obtida na etapa anterior.

    Normalmente, você precisa registrar todos os aplicativos do seu projeto porque, depois de ativar a aplicação para um produto do Firebase, somente os aplicativos registrados poderão acessar os recursos de back-end do produto.

  4. Opcional : nas configurações de registro do aplicativo, defina um tempo de vida (TTL) personalizado para tokens do App Check emitidos pelo provedor. Você pode definir o TTL para qualquer valor entre 30 minutos e 7 dias. Ao alterar esse valor, esteja ciente das seguintes compensações:

    • Segurança: TTLs mais curtos fornecem segurança mais forte, pois reduzem a janela na qual um token vazado ou interceptado pode ser abusado por um invasor.
    • Desempenho: TTLs mais curtos significam que seu aplicativo executará atestados com mais frequência. Como o processo de atestado do aplicativo adiciona latência às solicitações de rede sempre que é executado, um TTL curto pode afetar o desempenho do seu aplicativo.
    • Cota e custo: TTLs mais curtos e reatestados frequentes esgotam sua cota mais rapidamente e, para serviços pagos, custam potencialmente mais. Consulte Cotas e limites .

    O TTL padrão de 1 dia é razoável para a maioria dos aplicativos. Observe que a biblioteca do App Check atualiza os tokens em aproximadamente metade da duração do TTL.

2. Adicione a biblioteca App Check ao seu aplicativo

Adicione o Firebase ao seu aplicativo da web, caso ainda não o tenha feito. Certifique-se de importar a biblioteca App Check.

3. Inicialize a verificação do aplicativo

Adicione o seguinte código de inicialização ao seu aplicativo antes de acessar qualquer serviço do Firebase. Você precisará passar a chave do site reCAPTCHA, que você criou no console do reCAPTCHA, para activate() .

Web modular API

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 namespaced API

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óximos passos

Depois que a biblioteca App Check estiver instalada em seu aplicativo, implante-a.

O aplicativo cliente atualizado começará a enviar tokens do App Check junto 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 na seção App Check do console do Firebase.

Monitore métricas e habilite a aplicação

Antes de ativar a aplicação, no entanto, você deve certificar-se de que isso não interromperá seus usuários legítimos existentes. Por outro lado, se você perceber um uso suspeito dos recursos do seu aplicativo, convém ativar a aplicação mais cedo.

Para ajudar a tomar essa decisão, você pode observar as métricas do App Check para os serviços que você usa:

Ativar a aplicação do App Check

Quando você entender como o App Check afetará seus usuários e estiver pronto para prosseguir, poderá ativar a aplicação do App Check:

Use o App Check em ambientes de depuração

Se, depois de registrar seu aplicativo no App Check, você quiser executá-lo em um ambiente que o App Check normalmente não classificaria como válido, como localmente durante o desenvolvimento ou em um ambiente de integração contínua (CI), será possível criar uma compilação de depuração do seu aplicativo que usa o provedor de depuração do App Check em vez de um provedor de atestado real.

Consulte Usar o App Check com o provedor de depuração em aplicativos da web .