Catch up on everthing we announced at this year's Firebase Summit. Learn more

Proteggi le risorse non Firebase con App Check nelle app web

Puoi proteggere le risorse non Firebase della tua app, come i backend self-hosted, con App Check. Per fare ciò, dovrai eseguire entrambe le operazioni seguenti:

  • Modifica il tuo client dell'app per inviare un token App Check insieme a ogni richiesta al tuo back-end, come descritto in questa pagina.
  • Modifica il tuo back-end per richiedere un'App valida Verificare token con ogni richiesta, come descritto in Verifica App Controlla i gettoni da un back-end personalizzato .

Prima di iniziare

Aggiungere App Controllare per la vostra applicazione, utilizzando il default reCAPTCHA fornitore v3 , o un provider personalizzato .

Invia token App Check con richieste di backend

Nella vostra applicazione client, prima di ogni richiesta, ottenere una valida, non scaduto, App Verificare token con appCheck().getToken() . La libreria App Check aggiornerà il token se necessario.

Una volta che hai un token valido, invialo insieme alla richiesta al tuo backend. Le specifiche di come a realizzare questo sono fino a voi, ma non inviano App Controlla i gettoni come parte della URL, anche in parametri di query, in quanto questo li rende vulnerabili a perdite accidentali e l'intercettazione. L'esempio seguente invia il token in un'intestazione HTTP personalizzata, che è l'approccio consigliato.

Versione web 9

const { initializeAppCheck, getToken } = require('firebase/app-check');

const appCheck = initializeAppCheck(
    app,
    { provider: provider } // ReCaptchaV3Provider or CustomProvider
);

const callApiWithAppCheckExample = async () => {
  let appCheckTokenResponse;
  try {
      appCheckTokenResponse = await getToken(appCheck, /* forceRefresh= */ false);
  } catch (err) {
      // Handle any errors if the token was not retrieved.
      return;
  }

  // Include the App Check token with requests to your server.
  const apiResponse = await fetch('https://yourbackend.example.com/yourApiEndpoint', {
      headers: {
          'X-Firebase-AppCheck': appCheckTokenResponse.token,
      }
  });

  // Handle response from your backend.
};

Versione web 8

const callApiWithAppCheckExample = async () => {
  let appCheckTokenResponse;
  try {
      appCheckTokenResponse = await firebase.appCheck().getToken(/* forceRefresh= */ false);
  } catch (err) {
      // Handle any errors if the token was not retrieved.
      return;
  }

  // Include the App Check token with requests to your server.
  const apiResponse = await fetch('https://yourbackend.example.com/yourApiEndpoint', {
      headers: {
          'X-Firebase-AppCheck': appCheckTokenResponse.token,
      }
  });

  // Handle response from your backend.
};