Ten dokument zawiera sprawdzone metody korzystania z przekierowań w przeglądarkach, które blokują pliki cookie innych firm. Aby usługa signInWithRedirect()
działała prawidłowo w środowiskach produkcyjnych i we wszystkich przeglądarkach, musisz zastosować jedną z wymienionych tutaj opcji.
Opis
Aby zapewnić bezproblemowe działanie signInWithRedirect()
dla Ciebie i Twoich użytkowników, pakiet SDK Firebase Authentication JavaScript korzysta z międzyźródłowego elementu iframe, który łączy się z domeną Twojej aplikacji w Hostingu Firebase.
Nie działa on jednak w przeglądarkach, które blokują dostęp do pamięci masowej innych firm.
Ponieważ prośba o wyłączenie funkcji partycjonowania pamięci w przeglądarce rzadko jest dostępna, w zależności od specyfiki Twojego przypadku należy zastosować w aplikacji jedną z poniższych opcji konfiguracji.
- Jeśli Twoja aplikacja jest hostowana w ramach Hostingu Firebase w subdomenie
firebaseapp.com
, ten problem nie dotyczy Cię i nie musisz nic robić. - Jeśli hostujesz aplikację w Hostingu Firebase w domenie niestandardowej lub subdomenie
web.app
, użyj opcji 1. - Jeśli hostujesz aplikację w usłudze innej niż Firebase, użyj opcji 2, opcji 3, opcji 4 lub opcji 5.
Opcja 1. Zaktualizuj konfigurację Firebase, aby używać domeny niestandardowej jako authDomain
Jeśli hostujesz aplikację w Hostingu Firebase, używając domeny niestandardowej, możesz skonfigurować pakiet SDK Firebase, aby używać tej domeny jako domeny authDomain
. Dzięki temu aplikacja i element iframe uwierzytelniania korzystają z tej samej domeny, co zapobiega problemowi z logowaniem. (Jeśli nie korzystasz z Hostingu Firebase, musisz wybrać inną opcję). Sprawdź, czy została ona skonfigurowana w tym samym projekcie, którego używasz do uwierzytelniania.
Aby zaktualizować konfigurację Firebase, aby używać domeny niestandardowej jako domeny uwierzytelniania, wykonaj te czynności:
Skonfiguruj pakiet SDK Firebase JS tak, aby używać własnej domeny jako
authDomain
:const firebaseConfig = { apiKey: "<api-key>", authDomain: "<the-domain-that-serves-your-app>", databaseURL: "<database-url>", projectId: "<project-id>", appId: "<app-id>" };
Dodaj nowy
authDomain
do listy autoryzowanych identyfikatorów URI przekierowania dostawcy OAuth. Sposób, w jaki to zrobisz, zależy od dostawcy, ale generalnie zapoznaj się z sekcją „Zanim zaczniesz” u dowolnego dostawcy, aby uzyskać dokładne instrukcje (np. w przypadku dostawcy Facebooka). Zaktualizowany identyfikator URI do autoryzacji wygląda tak:https://<the-domain-that-serves-your-app>/__/auth/handler
(końcowy/__/auth/handler
jest ważny).Podobnie, jeśli korzystasz z dostawcy SAML, dodaj nowy
authDomain
do adresu URL usługi ACS SAML.Upewnij się, że
continue_uri
jest na liście autoryzowanych domen.W razie potrzeby przeprowadź ponowne wdrożenie za pomocą Hostingu Firebase, aby pobrać najbardziej aktualny plik konfiguracji Firebase hostowany w
/__/firebase/init.json
.
Opcja 2. Przejdź na tryb signInWithPopup()
Użyj signInWithPopup()
zamiast signInWithRedirect()
. Pozostały kod aplikacji pozostaje bez zmian, ale obiekt UserCredential jest pobierany w inny sposób.
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());
```
Wyskakujące okienko logowania nie zawsze jest idealne dla użytkowników – takie okienka są czasem blokowane przez urządzenie lub platformę, przez co cały proces przebiega mniej płynnie w przypadku użytkowników urządzeń mobilnych. Jeśli używanie wyskakujących okienek sprawia Ci problem w Twojej aplikacji, musisz zastosować jedną z pozostałych opcji.
Opcja 3. Przesyłanie żądań uwierzytelniania serwera proxy do firebaseapp.com
Proces signInWithRedirect
rozpoczyna się od przekierowania z domeny aplikacji do domeny podanej w parametrze authDomain
w konfiguracji firebase (domyślnie authDomain
hostuje kod pomocniczy logowania, który przekierowuje do dostawcy tożsamości, który po udanym przeprowadzeniu przekierowuje z powrotem do domeny aplikacji.
Gdy proces uwierzytelniania wróci do domeny aplikacji, uzyska dostęp do pamięci przeglądarki w domenie pomocniczej. Ta opcja i kolejna opcja (do samodzielnego hostowania kodu) eliminują dostęp do pamięci z innych domen, który w przeciwnym razie jest blokowany przez przeglądarki.
Skonfiguruj odwrotny serwer proxy na serwerze aplikacji, aby żądania GET/POST wysyłane do
https://<app domain>/__/auth/
były przekazywane dohttps://<project>.firebaseapp.com/__/auth/
. Upewnij się, że to przekierowanie jest przejrzyste dla przeglądarki. Nie można tego zrobić za pomocą przekierowania 302.Jeśli do obsługi domeny niestandardowej używasz nginx, konfiguracja odwrotnego serwera proxy będzie wyglądać tak:
# reverse proxy for signin-helpers for popup/redirect sign in. location /__/auth { proxy_pass https://<project>.firebaseapp.com; }
Wykonaj czynności opisane w Opcjach 1, aby zaktualizować autoryzowane adresy URL
redirect_uri
, ACS iauthDomain
. Po ponownym wdrożeniu aplikacji dostęp do pamięci z innych domen nie powinien już być możliwy.
Opcja 4. Samodzielnie hostuj kod pomocniczy logowania w swojej domenie
Innym sposobem na wyeliminowanie dostępu do pamięci z innych domen jest samodzielne hostowanie kodu pomocniczego logowania się w Firebase. To podejście nie działa jednak w przypadku logowania przez Apple ani SAML. Użyj tej opcji tylko wtedy, gdy nie można skonfigurować odwrotnego serwera proxy za pomocą opcji 3.
Hosting kodu pomocniczego składa się z tych kroków:
Pobierz pliki do hosta z lokalizacji
<project>.firebaseapp.com
, wykonując te polecenia: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
Umieść powyższe pliki w domenie swojej aplikacji. Upewnij się, że Twój serwer WWW może odpowiadać na żądania
https://<app domain>/__/auth/<filename>
ihttps://<app domain>/__/firebase/init.json
.Oto przykładowa implementacja serwera, która umożliwia pobieranie i hostowanie plików. Zalecamy okresowe pobieranie i synchronizowanie plików, aby mieć pewność, że korzystasz z najnowszych poprawek błędów i funkcji.
Wykonaj czynności opisane w Opcji 1, aby zaktualizować autoryzowane
redirect_uri
iauthDomain
. Po ponownym wdrożeniu aplikacji dostęp do pamięci z innych domen nie powinien już być możliwy.
Opcja 5. Logowanie przez dostawcę niezależnie
Pakiet SDK usługi Uwierzytelnianie Firebase udostępnia signInWithPopup()
i signInWithRedirect()
jako wygodne metody, dzięki którym opakowują skomplikowaną logikę i eliminują potrzebę korzystania z kolejnego pakietu SDK. Aby uniknąć korzystania z dowolnej z tych metod, musisz niezależnie zalogować się u dostawcy, a następnie użyć signInWithCredential()
do wymiany danych logowania dostawcy na dane uwierzytelniające Firebase.
Możesz na przykład użyć pakietu SDK logowania Google, przykładowego kodu, aby uzyskać dane logowania do konta Google, a następnie utworzyć nowe dane logowania Google, uruchamiając ten kod:
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);
Po wywołaniu signInWithCredential()
reszta aplikacji działa tak samo jak wcześniej.
Instrukcje uzyskiwania certyfikatów Apple można znaleźć tutaj.