Z tego dokumentu dowiesz się, jak korzystać z przekierowań podczas logowania w przeglądarkach, które blokują pliki cookie innych firm. Aby element signInWithRedirect() działał zgodnie z przeznaczeniem w środowiskach produkcyjnych we wszystkich przeglądarkach, musisz skorzystać z jednej z tych opcji.
Przegląd
Aby proces signInWithRedirect() był płynny dla Ciebie i Twoich użytkowników, pakiet SDK Uwierzytelnianie Firebase w JavaScript używa ramki iframe z innej domeny, która łączy się z domeną Firebase Hosting Twojej aplikacji.
Ten mechanizm nie działa jednak w przeglądarkach, które blokują dostęp do pamięci zewnętrznej.
Prośba o wyłączenie funkcji podziału pamięci w przeglądarce jest rzadko możliwa, dlatego zamiast tego zastosuj w aplikacji jedną z tych opcji konfiguracji, w zależności od konkretnego przypadku użycia.
- Jeśli hostujesz aplikację w Hostingu Firebase w subdomenie
firebaseapp.com, ten problem Cię nie dotyczy i nie musisz podejmować żadnych działań. - Jeśli hostujesz aplikację w Hostingu Firebase w domenie niestandardowej lub w subdomenie
web.app, użyj opcji 1. - Jeśli hostujesz aplikację w usłudze innej niż Firebase, skorzystaj z 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 tak, aby używał domeny niestandardowej jako authDomain. Dzięki temu aplikacja i element iframe do uwierzytelniania używają tej samej domeny, co zapobiega problemom z logowaniem. (Jeśli nie używasz Hostingu Firebase, musisz skorzystać z innej opcji). Upewnij się, że domena niestandardowa została skonfigurowana w tym samym projekcie, którego używasz do uwierzytelniania.
Aby zaktualizować konfigurację Firebase i używać domeny niestandardowej jako domeny uwierzytelniania, wykonaj te czynności:
Skonfiguruj pakiet Firebase JS SDK, aby używać domeny niestandardowej 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 adres
authDomaindo listy autoryzowanych adresów URI przekierowania dostawcy OAuth. Sposób wykonania tej czynności zależy od dostawcy, ale ogólnie możesz postępować zgodnie z instrukcjami w sekcji „Zanim zaczniesz” w przypadku dowolnego dostawcy (np. dostawcy Facebooka). Zaktualizowany identyfikator URI do autoryzacji wygląda tak:https://<the-domain-that-serves-your-app>/__/auth/handler– końcowy znak/__/auth/handlerjest ważny.Jeśli korzystasz z dostawcy SAML, dodaj nowy znak
authDomaindo adresu URL usługi ACS (Assertion Consumer Service) SAML.Sprawdź, czy Twój
continue_uriznajduje się na liście autoryzowanych domen.W razie potrzeby ponownie wdróż za pomocą Hostingu Firebase, aby pobrać najnowszy plik konfiguracji Firebase hostowany pod adresem
/__/firebase/init.json.
Opcja 2. Przełącz na signInWithPopup()
Używaj signInWithPopup() zamiast signInWithRedirect(). Pozostała część kodu 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());
```
Logowanie w wyskakującym okienku nie zawsze jest idealne dla użytkowników – wyskakujące okienka są czasami blokowane przez urządzenie lub platformę, a proces logowania jest mniej płynny w przypadku użytkowników urządzeń mobilnych. Jeśli korzystanie z wyskakujących okienek stanowi problem w przypadku Twojej aplikacji, musisz skorzystać z innej opcji.
Opcja 3. Przekazywanie żądań uwierzytelniania do firebaseapp.com
Proces signInWithRedirect rozpoczyna się od przekierowania z domeny aplikacji do domeny określonej w parametrze authDomain w konfiguracji Firebase (domyślnie „authDomain hostuje kod pomocnika logowania, który przekierowuje do dostawcy tożsamości, a ten po udanym logowaniu przekierowuje z powrotem do domeny aplikacji.
Gdy proces uwierzytelniania powróci do domeny aplikacji, nastąpi dostęp do pamięci przeglądarki domeny pomocniczej logowania. Ta opcja i następna (dotycząca samodzielnego hostowania kodu) eliminują dostęp do pamięci masowej z innego źródła, który w przeciwnym razie jest blokowany przez przeglądarki.
Skonfiguruj serwer proxy zwrotny 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 przekierowanie jest niewidoczne dla przeglądarki. Nie można tego zrobić za pomocą przekierowania 302.Jeśli do obsługi domeny niestandardowej używasz serwera nginx, konfiguracja 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; }Postępuj zgodnie z instrukcjami w opcji 1, aby zaktualizować autoryzowany znak
redirect_uri, adres URL usługi ACS i znakauthDomain. Po ponownym wdrożeniu aplikacji dostęp do pamięci z innego źródła nie powinien już występować.
Opcja 4. Samodzielne hostowanie kodu pomocnika logowania w domenie
Innym sposobem na wyeliminowanie dostępu do pamięci z innej domeny jest samodzielne hostowanie kodu pomocniczego logowania w Firebase. To podejście nie działa jednak w przypadku logowania przez Apple ani SAML. Tej opcji używaj tylko wtedy, gdy konfiguracja serwera proxy zwrotnego w opcji 3 jest niemożliwa.
Proces hostowania kodu pomocniczego obejmuje te czynności:
Pobierz pliki na 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/__/auth/links wget https://<project>.firebaseapp.com/__/auth/links.js wget https://<project>.firebaseapp.com/__/firebase/init.jsonHostuj powyższe pliki w domenie aplikacji. Sprawdź, czy 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 pobiera i hostuje pliki. 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_uriiauthDomain. Po ponownym wdrożeniu aplikacji dostęp do pamięci z innego źródła nie powinien już występować.
Opcja 5. Niezależne obsługiwanie logowania u dostawcy
Pakiet SDK usługi Uwierzytelnianie Firebase udostępnia metody signInWithPopup() i signInWithRedirect(), które upraszczają złożoną logikę i eliminują konieczność używania innego pakietu SDK. Możesz całkowicie uniknąć korzystania z obu tych metod, logując się niezależnie u dostawcy, a następnie używając funkcji signInWithCredential() do wymiany danych logowania dostawcy na dane logowania usługi Uwierzytelnianie Firebase.
Możesz na przykład użyć pakietu Google Sign-In SDK i przykładowego kodu, aby uzyskać dane logowania 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 funkcji signInWithCredential() reszta aplikacji działa tak samo jak wcześniej.
Instrukcje uzyskiwania poświadczeń Apple znajdziesz tutaj.