Inizia a utilizzare App Check con un provider personalizzato nelle app web

Questa pagina mostra come attivare App Check in un'app web utilizzando il tuo provider App Check personalizzato. Quando attivi App Check, contribuisci a garantire che solo la tua app possa accedere alle risorse Firebase del tuo progetto.

Se vuoi utilizzare App Check con uno dei provider integrati, consulta la documentazione relativa a App Check con reCAPTCHA Enterprise.

Prima di iniziare

1. Aggiungere la libreria App Check all'app

Aggiungi Firebase alla tua app web, se non l'hai già fatto. Assicurati di importare la libreria App Check.

2. Crea l'oggetto provider App Check

Crea un oggetto fornitore App Check per il tuo fornitore personalizzato. Questo oggetto deve avere un metodo getToken(), che raccoglie le informazioni richieste dal tuo provider App Check personalizzato come prova di autenticità e le invia al tuo servizio di acquisizione dei token in cambio di un token App Check. L'SDK App Checkgestisce la memorizzazione nella cache dei token, quindi ottieni sempre un nuovo token nell'implementazione di getToken().

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

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. Inizializza App Check

Aggiungi il seguente codice di inizializzazione all'applicazione prima di accedere a qualsiasi servizio Firebase:

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

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

Passaggi successivi

Una volta installata la libreria App Check nell'app, implementala.

L'app client aggiornata inizierà a inviare token App Check insieme a ogni richiesta a Firebase, ma i prodotti Firebase non richiederanno la validità dei token finché non attiverai l'applicazione nella sezione App Check della console Firebase.

Monitorare le metriche e attivare l'applicazione

Prima di attivare l'applicazione, però, devi assicurarti che questa operazione non interrompa l'attività degli utenti legittimi esistenti. D'altra parte, se noti un utilizzo sospetto delle risorse della tua app, potresti voler attivare l'applicazione prima.

Per prendere questa decisione, puoi esaminare le metriche App Check per i servizi che utilizzi:

Attiva l'applicazione di App Check

Quando avrai compreso l'impatto di App Check sui tuoi utenti e sarai pronto per procedere, potrai attivare l'applicazione di App Check:

Utilizzare App Check negli ambienti di debug

Se, dopo aver registrato la tua app per App Check, vuoi eseguirla in un ambiente che normalmente App Check non classificherebbe come valido, ad esempio localmente durante lo sviluppo o da un ambiente di integrazione continua (CI), puoi creare una build di debug della tua app che utilizza il provider di debug App Check anziché un vero provider di attestazione.

Vedi Utilizzare App Check con il provider di debug nelle app web.