Questa pagina è stata tradotta dall'API Cloud Translation.

Best practice per l'utilizzo di signInWithReindirizzamento nei browser che bloccano l'accesso allo spazio di archiviazione di terze parti

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

Panoramica

Per fare in modo che Flusso signInWithRedirect() senza interruzioni per te e i tuoi utenti, l'SDK JavaScript Firebase Authentication utilizza una un iframe multiorigine che si connette al dominio Firebase Hosting della tua app. Tuttavia, questo meccanismo non funziona con i browser che bloccano i browser di terze parti. l'accesso allo spazio di archiviazione.

Poiché chiedere agli utenti di disattivare le funzionalità di partizione dello spazio di archiviazione nel browser è raramente un'opzione, ti consigliamo di 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 riguarda e non è necessaria alcuna azione da parte tua.
Se ospiti la tua app con Firebase Hosting su un dominio personalizzato o su un sottodominio di web.app, utilizza l'opzione 1.
Se ospiti la tua app con un servizio diverso da Firebase, utilizza Opzione 2, Opzione 3, Opzione 4, oppure Opzione 5.

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

Se ospiti la tua app con Firebase Hosting utilizzando un dominio personalizzato, puoi configurare l'SDK Firebase in modo che utilizzi il tuo dominio personalizzato come authDomain. In questo modo, l'app e l'iframe di autenticazione utilizzeranno lo stesso dominio, evitando il problema di accesso. Se non utilizzi Firebase Hosting, devi utilizzare un'opzione diversa. Assicurati di aver configurato lo stesso dominio personalizzato progetto che stai utilizzando per l'autenticazione.

Per aggiornare la configurazione di Firebase in modo da utilizzare il dominio personalizzato come dominio di autenticazione, svolgi i seguenti passaggi:

Configura l'SDK Firebase JS in modo da 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>"
};

Aggiungi il nuovo authDomain all'elenco degli URI di reindirizzamento autorizzati del tuo provider OAuth. La procedura dipende dal fornitore, ma in generale puoi seguire la sezione "Prima di iniziare" di qualsiasi fornitore per istruzioni precise (ad esempio, il fornitore Facebook). L'URI aggiornato in l'autorizzazione è simile https://<the-domain-that-serves-your-app>/__/auth/handler: la parte finale /__/auth/handler è importante.

Analogamente, se utilizzi un provider SAML, aggiungi il nuovo authDomain all'URL di ACS (Assertion Consumer Service) SAML.
Assicurati che continue_uri sia presente nell'elenco dei domini autorizzati.
Se necessario, esegui nuovamente il deployment con Firebase Hosting per recuperare il file di configurazione Firebase più aggiornato ospitato su /__/firebase/init.json.

Opzione 2: passa a signInWithPopup()

Utilizza signInWithPopup() anziché signInWithRedirect(). Il resto del codice dell'app rimane invariato, ma l'oggetto UserCredential viene recuperato in modo diverso.

Web

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

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

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 popup non è sempre ideale per gli utenti: a volte i popup vengono bloccati dal dispositivo o dalla piattaforma e il flusso è meno fluido per gli utenti di dispositivi mobili. Se l'utilizzo di popup è un problema per la tua app, devi 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 assistenza per l'accesso che reindirizza al provider di identità, che, in caso di esito positivo, reindirizza nuovamente al dominio dell'app.

Quando il flusso di autenticazione torna al dominio dell'app, viene eseguito l'accesso allo spazio di archiviazione del browser del dominio dell'helper per l'accesso. Questa opzione e quella successiva (per l'hosting autonomo del codice) eliminano l'accesso allo spazio di archiviazione cross-origin, che altrimenti viene bloccato dai browser.

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 l'inoltro sia trasparente per il browser; questa operazione non può essere eseguita tramite un reindirizzamento 302.

Se utilizzi nginx per pubblicare il tuo dominio personalizzato, la configurazione del proxy inverso sarà la seguente:
```
# reverse proxy for signin-helpers for popup/redirect sign in.
location /__/auth {
  proxy_pass https://<project>.firebaseapp.com;
}
```
Segui i passaggi descritti nella Opzione 1 per aggiornare redirect_uri autorizzato, l'URL ACS e authDomain. Una volta ridistribuita la tua app, l'accesso allo spazio di archiviazione cross-origin non dovrebbe più verificarsi.

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

Un altro modo per eliminare l'accesso allo spazio di archiviazione cross-origin è eseguire l'hosting autonomo del codice di assistenza per l'accesso di Firebase. Tuttavia, questo approccio non funziona per 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:

Scarica i file da ospitare dalla posizione <project>.firebaseapp.com tramite eseguendo questi 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
wget https://<project>.firebaseapp.com/__/firebase/init.json

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

Ecco un esempio di implementazione del server che scarica e ospita i file. Ti consigliamo di scaricare e sincronizzare i file periodicamente per assicurarti che vengano rilevate le funzionalità e le correzioni di bug più recenti.
Segui i passaggi in Opzione 1 per aggiornare l'autorizzazione redirect_uri e il tuo authDomain. Una volta ridistribuita la tua app, l'accesso allo spazio di archiviazione cross-origin non dovrebbe più verificarsi.

L'SDK Firebase Authentication fornisce signInWithPopup() e signInWithRedirect() come pratici metodi per includere una logica complicata ed evitare la necessità di con un altro SDK. Puoi evitare di utilizzare completamente uno dei due metodi accedendo autonomamente al tuo provider e poi utilizzando signInWithCredential() per scambiare le credenziali del provider con una credenziale di Firebase Authentication. Ad esempio, puoi utilizzare SDK Accedi con Google codice campione per ottenere le credenziali di un Account Google e creare un'istanza per una nuova credenziale Google. eseguendo questo codice:

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

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 dell'app funziona come prima.

Le istruzioni per ottenere una credenziale Apple sono disponibili qui.