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

Ten dokument opisuje sprawdzone metody korzystania z przekierowania logowania 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.

Omówienie

Aby Proces signInWithRedirect() dla Ciebie i Twoich użytkowników pakiet SDK Firebase Authentication JavaScript wykorzystuje międzyźródłowy element iframe, który łączy się z domeną Twojej aplikacji w Hostingu Firebase. Nie działa on jednak w przeglądarkach, które blokują dostępu do pamięci masowej.

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 Opcja 1.
  • Jeśli hostujesz aplikację w usłudze innej niż Firebase, użyj parametru Opcja 2 Opcja 3 Opcja 4, lub Opcja 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ł Twojej domeny niestandardowej jako domeny authDomain. Ten zapewnia, że aplikacja oraz element iframe uwierzytelniania używają tej samej domeny, co uniemożliwia problem z logowaniem. (Jeśli nie korzystasz z Hostingu Firebase, musisz użyć inną opcję). Upewnij się, że w tej samej domenie skonfigurowano niestandardową domenę projektu, którego używasz do uwierzytelniania.

Aby zaktualizować konfigurację Firebase, aby używać domeny niestandardowej jako domeny uwierzytelniania, wykonaj następujące:

  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 nową authDomain do listy autoryzowanych dostawców OAuth identyfikatory URI przekierowania. Sposób, w jaki to zrobisz, zależy od dostawcy, ale ogólnie zapoznaj się z instrukcjami w sekcji „Zanim zaczniesz” u dowolnego dostawcy, aby uzyskać dokładne instrukcji (na przykład dostawca Facebooka). Identyfikator URI został zaktualizowany do autoryzacja wygląda jak https://<the-domain-that-serves-your-app>/__/auth/handler – na końcu /__/auth/handler jest ważny.

    Podobnie, jeśli korzystasz z dostawcy SAML, dodaj nowy authDomain do Adres 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() reszta kodu aplikacji pozostaje bez zmian, ale obiekt UserCredential to pobrane 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. Od czasu do czasu są one blokowane przez od urządzenia lub platformy, przez co proces przebiega mniej płynnie w przypadku użytkowników mobilnych. Jeśli używasz wyskakujące okienka to problem z Twoją aplikacją, musisz zastosować jeden z pozostałych sposobów. .

Opcja 3. Przesyłanie żądań uwierzytelniania serwera proxy do firebaseapp.com

Proces signInWithRedirect rozpoczyna się od przekierowania z domeny aplikacji do domena określona w parametrze authDomain w konfiguracji Firebase (domyślnie „.firebaseapp.com”). authDomain hostuje pomocnik logowania który przekierowuje do dostawcy tożsamości, a potem powodzenie następuje przekierowanie z powrotem z domeną aplikacji.

Gdy proces uwierzytelniania powróci do domeny aplikacji, pamięć przeglądarki domena pomocnicza logowania. Ta opcja oraz (do samodzielnego hostowania kodu) eliminuje 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 do https://<app domain>/__/auth/ są przekazywane do https://<project>.firebaseapp.com/__/auth/. Sprawdź, czy to przekierowanie jest przezroczyste 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 Opcja 1 aby zaktualizować autoryzowane adresy URL redirect_uri, ACS i authDomain. Po ponownym wdrożeniu Twojej aplikacji, dostęp do pamięci z innych domen nie powinien już mieć miejsca.

Opcja 4. Samodzielnie hostuj kod pomocniczy logowania w swojej domenie

Innym sposobem na wyeliminowanie dostępu do pamięci z innych domen jest hostowanie własne kod pomocniczy logowania Firebase. Ta metoda nie działa jednak w przypadku Apple. logowanie się lub SAML. Użyj tej opcji tylko wtedy, gdy konfiguracja odwrotnego serwera proxy jest włączona w opcja 3 jest niemożliwa.

Hosting kodu pomocniczego składa się z tych kroków:

  1. Pobierz pliki do hosta z lokalizacji <project>.firebaseapp.com przez 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. Sprawdź, czy Twój serwer WWW mogą odpowiadać na wiadomości 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 Opcja 1 aby zaktualizować autoryzowane redirect_uri i authDomain. Po ponownym wdrożeniu Twojej aplikacji, dostęp do pamięci z innych domen nie powinien już mieć miejsca.

Opcja 5. Logowanie przez dostawcę niezależnie

Pakiet SDK usługi Uwierzytelnianie Firebase zapewnia signInWithPopup() i signInWithRedirect() jako wygodnych metod, które łączą skomplikowaną logikę i unikają konieczności angażowania się innego pakietu SDK. Aby uniknąć korzystania z dowolnej z tych metod, podpisuj je niezależnie do dostawcy, a potem użyj signInWithCredential() do wymienić dane logowania dostawcy na dane uwierzytelniające Firebase. Na przykład możesz użyć atrybutu Pakiet SDK do logowania Google, przykładowy kod w celu uzyskania danych logowania na konto Google, a następnie utworzenia nowych danych 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 będzie działać jak wcześniej.

Aby uzyskać certyfikat Apple, należy tutaj.