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 fornitoreApp Check personalizzato. Se 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 di App Check con reCAPTCHA Enterprise.

Prima di iniziare

1. Aggiungere la raccolta App Check all'app

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

2. Crea l'oggetto provider App Check

Crea un oggetto provider App Check per il tuo provider personalizzato. Questo oggetto deve avere un metodo getToken(), che raccoglie le informazioni richieste dal tuo fornitore di getToken() personalizzato come prova dell'autenticità e le invia al tuo servizio di acquisizione di token in cambio di un token App Check.App Check L'SDK App Check gestisce la memorizzazione nella cache dei token, quindi ricevi 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);
    });
  }
});

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

3. Inizializza App Check

Aggiungi il seguente codice di inizializzazione alla tua 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    
});

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

Passaggi successivi

Dopo aver installato la libreria App Check nell'app, esegui il deployment.

L'app client aggiornata inizierà a inviare token App Check con ogni richiesta inviata a Firebase, ma i prodotti Firebase non richiederanno che i token siano validi finché non attivi l'applicazione forzata nella sezione App Check della Console Firebase.

Monitorare le metriche e abilitare l'applicazione delle norme

Tuttavia, prima di attivare l'applicazione, devi assicurarti che questa operazione non causi interruzioni per gli utenti legittimi esistenti. D'altra parte, se noti un uso sospetto delle risorse della tua app, ti consigliamo di attivare l'applicazione delle norme in precedenza.

Per prendere questa decisione, puoi consultare le metriche di App Check relative ai servizi che utilizzi:

Attiva l'applicazione forzata di App Check

Quando avrai compreso in che modo App Check influirà sui tuoi utenti e sarai pronto a procedere, puoi attivare l'applicazione forzata di App Check:

Utilizzare App Check in ambienti di debug

Se, dopo aver registrato la tua app per App Check, vuoi eseguirla in un ambiente che App Check normalmente 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 utilizzi il fornitore di debug App Check anziché un fornitore di attestazione reale.

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