Comece a usar o App Check com um provedor personalizado em apps da Web

Nesta página, mostramos como ativar o App Check em um app da Web usando seu provedor personalizado do App Check. Ao ativar o App Check, você ajuda a garantir que apenas seu app possa acessar os recursos do Firebase do seu projeto.

Se você quiser usar o App Check com um dos provedores integrados, consulte a documentação do App Check com reCAPTCHA Enterprise.

Antes de começar

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

2. Criar o objeto de provedor do App Check

Crie um objeto de provedor do App Check para seu provedor personalizado. Esse objeto precisa ter um método getToken(), que coleta todas as informações exigidas pelo provedor personalizado do App Check como prova de autenticidade e as envia ao serviço de aquisição de tokens em troca de um token do App Check. O SDK do App Check lida com o armazenamento em cache de tokens. Portanto, sempre consiga um novo token na implementação do getToken().

API modular da Web

import { CustomProvider } from "firebase/app-check";

const appCheckCustomProvider = new CustomProvider({
  getToken: () => {
    return new Promise((resolve, _reject) => {
      // TODO: Logic to exchange proof of authenticity for an App Check token and
      // expiration time.

      // ...

      const appCheckToken = {
        token: tokenFromServer,
        expireTimeMillis: expirationFromServer * 1000
      };

      resolve(appCheckToken);
    });
  }
});
appcheck_custom_provider.js

API com namespace da Web

const appCheckCustomProvider = {
  getToken: () => {
    return new Promise((resolve, _reject) => {
      // TODO: Logic to exchange proof of authenticity for an App Check token and
      // expiration time.

      // ...

      const appCheckToken = {
        token: tokenFromServer,
        expireTimeMillis: expirationFromServer * 1000
      };

      resolve(appCheckToken);
    });
  }
};
index.js

3. Inicializar App Check

Adicione o seguinte código de inicialização ao seu app antes de acessar os serviços do Firebase:

API modular da Web

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

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

const appCheck = initializeAppCheck(app, {
  provider: appCheckCustomProvider,

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

API com namespace da Web

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

const appCheck = firebase.appCheck();
appCheck.activate(
  appCheckCustomProvider,

  // 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:

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:

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.