Questo documento descrive le best practice per l'utilizzo degli accessi di 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é la richiesta agli utenti di disattivare le funzionalità di partizionamento dello spazio di archiviazione sul 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 riguarda e non è necessaria alcuna azione da parte tua. - Se ospiti la tua app con Firebase Hosting su un dominio personalizzato o un sottodominio di
web.app
, utilizza 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 su Firebase Hosting utilizzando un dominio personalizzato, puoi
configurare l'SDK Firebase in modo che utilizzi il tuo dominio personalizzato come authDomain
. Questo
assicura che l'app e l'iframe di autenticazione utilizzino lo stesso dominio, impedendo
per risolvere il problema di accesso. Se non usi Firebase Hosting, devi utilizzare un
un'altra opzione). Assicurati di aver configurato lo stesso dominio personalizzato
progetto che stai utilizzando per l'autenticazione.
Per aggiornare la configurazione di Firebase in modo che utilizzi il dominio personalizzato come dominio di autenticazione, procedi nel seguente modo: le seguenti:
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 delle autorizzazioni del provider OAuth di reindirizzamento. Il modo in cui puoi farlo dipende dal fornitore, ma in generale puoi seguire il video "Prima di iniziare" in qualsiasi provider per trovare istruzioni (ad esempio, provider di Facebook). L'URI aggiornato in l'autorizzazione è similehttps://<the-domain-that-serves-your-app>/__/auth/handler
: la parte finale/__/auth/handler
è importante.Allo stesso modo, se utilizzi un provider SAML, aggiungi il nuovo
authDomain
al URL ACS (Assertion Consumer Service) SAML.Verifica che il tuo
continue_uri
sia nell'elenco dei domini autorizzati.Esegui nuovamente il deployment con Firebase Hosting, se necessario, per recuperare il file di configurazione di Firebase più aggiornato ospitato all'indirizzo
/__/firebase/init.json
.
Opzione 2: passa a signInWithPopup()
Utilizza signInWithPopup()
al posto di
signInWithRedirect()
. La
il resto del codice dell'app rimane lo stesso, ma l'oggetto UserCredential è
recuperate 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 la soluzione ideale per gli utenti: a volte i popup vengono bloccati dispositivo o piattaforma e il flusso è meno fluido per gli utenti di dispositivi mobili. Se utilizzi popup è un problema per la tua app, dovrai seguire una delle altre le opzioni di CPU e memoria disponibili.
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
("authDomain
ospita l'assistente per l'accesso
che reindirizza al provider di identità che, se l'operazione ha esito positivo,
al dominio dell'app.
Quando il flusso di autenticazione torna al dominio dell'app, lo spazio di archiviazione del browser al dominio helper per l'accesso. Questa opzione e L'utilizzo successivo (per ospitare autonomamente il codice) elimina l'accesso allo spazio di archiviazione multiorigine, che altrimenti viene bloccato dai browser.
Imposta un proxy inverso sul server delle app in modo che le richieste GET/POST
https://<app domain>/__/auth/
sono inoltrati ahttps://<project>.firebaseapp.com/__/auth/
. Assicurati che questo inoltro sia trasparente per il browser. Ciò non può essere fatto tramite un reindirizzamento 302.Se utilizzi nginx per gestire il tuo dominio personalizzato, la configurazione del proxy inverso avrà il seguente aspetto:
# reverse proxy for signin-helpers for popup/redirect sign in. location /__/auth { proxy_pass https://<project>.firebaseapp.com; }
Segui i passaggi in Opzione 1 per aggiornare i
redirect_uri
autorizzati, l'URL ACS e ilauthDomain
. Dopo aver eseguito nuovamente il deployment l'app, l'accesso allo spazio di archiviazione multiorigine non dovrebbe più essere eseguito.
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 multiorigine è l'hosting autonomo il codice di supporto per l'accesso di Firebase. Tuttavia, questo approccio non funziona per Apple o SAML. Utilizza questa opzione solo se la configurazione del proxy inverso l'opzione 3 non è fattibile.
L'hosting del codice helper prevede i seguenti passaggi:
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 wget https://<project>.firebaseapp.com/__/firebase/init.json
Ospita i file sopra indicati nel dominio della tua app. Assicurati che il tuo server web può rispondere a
https://<app domain>/__/auth/<filename>
ehttps://<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 acquisite le correzioni di bug e le funzionalità più recenti.
Segui i passaggi in Opzione 1 per aggiornare l'autorizzazione
redirect_uri
e il tuoauthDomain
. Dopo aver eseguito nuovamente il deployment l'app, l'accesso allo spazio di archiviazione multiorigine non dovrebbe più essere eseguito.
Opzione 5: gestisci in modo indipendente l'accesso del fornitore
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 del tutto di utilizzare entrambi i metodi firmando in modo indipendente
al tuo provider e poi usare
Da signInWithCredential()
a
Scambia le credenziali del provider con quelle 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: qui