Sprawdzone metody korzystania z funkcji signInWithRedirect w przeglądarkach, które blokują dostęp do pamięci masowej innych firm

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:

  1. 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>"
};

  1. 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.

  2. Upewnij się, że continue_uri jest na liście autoryzowanych domen.

  3. 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 Modular API 

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

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

Interfejs API internetowej przestrzeni nazw 

  // 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 .firebaseapp.com). 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.

  1. Skonfiguruj odwrotny serwer proxy na serwerze aplikacji, aby żądania GET/POST wysyłane do https://<app domain>/__/auth/ były przekazywane do https://<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;
}

  2. Wykonaj czynności opisane w Opcjach 1, aby zaktualizować autoryzowane adresy URL redirect_uri, ACS i authDomain. 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:

  1. 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

  2. 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> i https://<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.

  3. Wykonaj czynności opisane w Opcji 1, aby zaktualizować autoryzowane redirect_uri i authDomain. 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 Modular API 

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

Interfejs API internetowej przestrzeni nazw 

  // `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.