Procedure consigliate per l'utilizzo di signInWithRedirect nei browser che bloccano l'accesso allo spazio di archiviazione di terze parti

Questo documento descrive le best practice per l'utilizzo degli accessi di reindirizzamento sui browser che bloccano i cookie di terze parti. È necessario seguire una delle opzioni elencate qui affinché signInWithRedirect() funzioni come previsto negli ambienti di produzione, in tutti i browser.

Panoramica

Per rendere il flusso signInWithRedirect() fluido per te e i tuoi utenti, l'SDK JavaScript di autenticazione Firebase utilizza un iframe multiorigine che si connette al dominio hosting Firebase della tua app. Tuttavia, questo meccanismo non funziona con i browser che bloccano l'accesso allo spazio di archiviazione di terze parti.

Poiché chiedere agli utenti di disabilitare le funzionalità di partizionamento dello spazio di archiviazione nel browser è raramente un'opzione, dovresti invece applicare una delle seguenti opzioni di configurazione alla tua app, a seconda delle specifiche del tuo caso d'uso.

  • Se ospiti la tua app con Firebase Hosting su un sottodominio di firebaseapp.com , questo problema non ti interessa e non è necessaria alcuna azione.
  • Se ospiti la tua app con Firebase Hosting su un dominio personalizzato o un sottodominio di web.app , utilizza l'Opzione 1 .
  • Se ospiti la tua app con un servizio diverso da Firebase, utilizza l'Opzione 2 , l'Opzione 3 , l'Opzione 4 o l'Opzione 5 .

Opzione 1: aggiorna la configurazione di Firebase per utilizzare il tuo dominio personalizzato come authDomain

Se ospiti la tua app con Firebase Hosting utilizzando un dominio personalizzato, puoi configurare l'SDK Firebase per utilizzare il tuo dominio personalizzato come authDomain . Ciò garantisce che la tua app e l'iframe di autenticazione utilizzino lo stesso dominio, evitando così problemi di accesso. (Se non utilizzi Firebase Hosting, devi utilizzare un'opzione diversa.)

Per aggiornare la configurazione di Firebase per utilizzare il dominio personalizzato come dominio di autenticazione, procedi come segue:

  1. Configura l'SDK Firebase JS per utilizzare il tuo dominio personalizzato come authDomain :

    const firebaseConfig = {
  apiKey: "<api-key>",
  authDomain: "<the-domain-that-serves-your-app>",
  databaseURL: "<database-url>",
  projectId: "<project-id>",
  appId: "<app-id>"
};

  2. Aggiungi il nuovo authDomain all'elenco degli URI di reindirizzamento autorizzati del tuo provider OAuth. Il modo in cui farlo dipende dal provider, ma in generale puoi seguire la sezione "Prima di iniziare" di qualsiasi provider per istruzioni esatte (ad esempio, il provider di Facebook ). L'URI aggiornato da autorizzare è simile a https://<the-domain-that-serves-your-app>/__/auth/handler : il finale /__/auth/handler è importante.

    Allo stesso modo, se utilizzi un provider SAML, aggiungi il nuovo authDomain all'URL SAML Assertion Consumer Service (ACS).

Opzione 2: passa a signInWithPopup()

Utilizza signInWithPopup() invece di signInWithRedirect() . Il resto del codice dell'app rimane lo stesso, ma l'oggetto UserCredential viene recuperato in modo diverso.

API modulare Web

  // Before
  // ==============
  signInWithRedirect(auth, new GoogleAuthProvider());
  // After the page redirects back
  const userCred = await getRedirectResult(auth);

  // After
  // ==============
  const userCred = await signInWithPopup(auth, new GoogleAuthProvider());

API con spazio dei nomi Web

  // Before
  // ==============
  firebase.auth().signInWithRedirect(new firebase.auth.GoogleAuthProvider());
  // After the page redirects back
  var userCred = await firebase.auth().getRedirectResult();

  // After
  // ==============
  var userCred = await firebase.auth().signInWithPopup(
      new firebase.auth.GoogleAuthProvider());
```

L'accesso tramite popup non è sempre l'ideale per gli utenti: i popup vengono occasionalmente bloccati dal dispositivo o dalla piattaforma e il flusso è meno fluido per gli utenti mobili. Se l'utilizzo dei popup rappresenta un problema per la tua app, dovrai seguire una delle altre opzioni.

Opzione 3: richieste di autenticazione proxy a firebaseapp.com

Il flusso signInWithRedirect inizia reindirizzando dal dominio dell'app al dominio specificato nel parametro authDomain nella configurazione di Firebase (" .firebaseapp.com" per impostazione predefinita). authDomain ospita il codice di supporto per l'accesso che reindirizza al provider di identità che, in caso di successo, reindirizza al dominio dell'app.

Quando il flusso di autenticazione ritorna al dominio dell'app, viene effettuato l'accesso allo spazio di archiviazione del browser del dominio dell'assistente di accesso. Questa opzione e quella successiva (per ospitare autonomamente il codice) eliminano l'accesso allo storage multiorigine, che altrimenti verrebbe bloccato dai browser.

  1. Configura un proxy inverso sul server dell'app in modo che le richieste GET/POST a https://<app domain>/__/auth/ vengano inoltrate a https://<project>.firebaseapp.com/__/auth/ . Assicurati che questo inoltro sia trasparente per il browser; questo non può essere fatto tramite un reindirizzamento 302.

    Se stai utilizzando nginx per servire il tuo dominio personalizzato, la configurazione del proxy inverso sarà simile a questa:

    # reverse proxy for signin-helpers for popup/redirect sign in.
location /__/auth {
  proxy_pass https://<project>.firebaseapp.com;
}

  2. Segui i passaggi nell'Opzione 1 per aggiornare redirect_uri autorizzato, l'URL ACS e il tuo authDomain . Una volta ridistribuita l'app, l'accesso allo spazio di archiviazione multiorigine non dovrebbe più avvenire.

Opzione 4: ospita autonomamente il codice di supporto per l'accesso nel tuo dominio

Un altro modo per eliminare l'accesso allo spazio di archiviazione multiorigine è ospitare autonomamente il codice di supporto per l'accesso Firebase. Tuttavia, questo approccio non funziona per l'accesso Apple o SAML. Utilizza questa opzione solo se la configurazione del proxy inverso nell'opzione 3 non è fattibile.

L'hosting del codice helper prevede i seguenti passaggi:

  1. Scarica i file da ospitare dalla posizione <project>.firebaseapp.com eseguendo i seguenti comandi:

    mkdir signin_helpers/ && cd signin_helpers
wget https://<project>.firebaseapp.com/__/auth/handler
wget https://<project>.firebaseapp.com/__/auth/handler.js
wget https://<project>.firebaseapp.com/__/auth/experiments.js
wget https://<project>.firebaseapp.com/__/auth/iframe
wget https://<project>.firebaseapp.com/__/auth/iframe.js

  2. Ospita i file sopra indicati nel dominio della tua app. Assicurati che il tuo server Web possa rispondere a https://<app domain>/__/auth/<filename> .

    Di seguito è riportata un'implementazione del server di esempio che scarica e ospita i file. Ti consigliamo di scaricare e sincronizzare periodicamente i file per garantire che vengano adottate le correzioni di bug e le funzionalità più recenti.

  3. Segui i passaggi nell'Opzione 1 per aggiornare redirect_uri autorizzato e il tuo authDomain . Una volta ridistribuita l'app, l'accesso allo spazio di archiviazione multiorigine non dovrebbe più avvenire.

Opzione 5: gestisci l'accesso del provider in modo indipendente

L'SDK di autenticazione Firebase fornisce signInWithPopup() e signInWithRedirect() come metodi pratici per racchiudere una logica complicata ed evitare la necessità di coinvolgere un altro SDK. Puoi evitare di utilizzare completamente entrambi i metodi accedendo in modo indipendente al tuo provider, quindi utilizzando signInWithCredential() per scambiare le credenziali del provider con una credenziale di autenticazione Firebase. Ad esempio, puoi utilizzare Google Sign In SDK , un codice di esempio per ottenere le credenziali di un account Google, quindi creare un'istanza di una nuova credenziale Google eseguendo il seguente codice:

API modulare Web

  // `googleUser` from the onsuccess Google Sign In callback.
  //  googUser = gapi.auth2.getAuthInstance().currentUser.get();
  const credential = GoogleAuthProvider.credential(googleUser.getAuthResponse().id_token);
  const result = await signInWithCredential(auth, credential);

API con spazio dei nomi Web

  // `googleUser` from the onsuccess Google Sign In callback.
  const credential = firebase.auth.GoogleAuthProvider.credential(
      googleUser.getAuthResponse().id_token);
  const result = await firebase.auth().signInWithCredential(credential);

Dopo aver chiamato signInWithCredential() , il resto della tua app funziona come prima.

Le istruzioni per ottenere una credenziale Apple sono qui .