Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

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

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Esta página mostra como habilitar 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.

O reCAPTCHA v3 é um serviço sem custo. O App Check também oferece suporte ao reCAPTCHA Enterprise , um serviço pago com cota gratuita. Para saber as diferenças entre o reCAPTCHA v3 e o reCAPTCHA Enterprise, consulte a comparação de recursos .

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 a qualquer 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 do Firebase

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

  2. Registre seu site para o 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 Firebase console. 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 de um produto Firebase, apenas 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 os 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 realizará o atestado 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 reatestação frequente 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 aplicativos. Observe que a biblioteca 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 tenha feito isso. Certifique-se de importar a biblioteca App Check.

3. Inicialize o App Check

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 version 9

const { initializeApp } = require("firebase/app");
const { initializeAppCheck, ReCaptchaV3Provider } = require("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
});

Web version 8

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);

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 Firebase não exigirão que os tokens sejam válidos até que você ative a aplicação na seção App Check do Firebase console.

Monitore as métricas e ative a aplicação

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

Para ajudar a tomar essa decisão, consulte 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 continuar, poderá ativar a aplicação do App Check:

Use o App Check em ambientes de depuração

Se, depois de registrar seu aplicativo para o 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), você poderá 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 .