Best Practices für die Verwendung von signInWithRedirect in Browsern, die den Speicherzugriff von Drittanbietern blockieren

In diesem Dokument werden die Best Practices für die Verwendung von Umleitungsanmeldungen in Browsern beschrieben, die Cookies von Drittanbietern blockieren.

Überblick

Damit der signInWithRedirect() Fluss für Sie und Ihre Benutzer reibungslos verläuft, verwendet das JavaScript-SDK für die Firebase-Authentifizierung einen Cross-Origin-Iframe, der eine Verbindung mit der Firebase-Hosting-Domain Ihrer App herstellt. Dieser Mechanismus funktioniert jedoch nicht mit Browsern, die den Speicherzugriff von Drittanbietern blockieren.

Da es selten eine Option ist, Ihre Benutzer aufzufordern, Speicherpartitionierungsfunktionen im Browser zu deaktivieren, sollten Sie stattdessen je nach den Besonderheiten Ihres Anwendungsfalls eine der folgenden Einrichtungsoptionen auf Ihre App anwenden.

• Wenn Sie Ihre App mit Firebase Hosting auf einer Subdomain von firebaseapp.com hosten, sind Sie von diesem Problem nicht betroffen und es sind keine Maßnahmen erforderlich.
• Wenn Sie Ihre App mit Firebase Hosting auf einer benutzerdefinierten Domäne oder einer Unterdomäne von web.app , verwenden Sie Option 1 .
• Wenn Sie Ihre App bei einem anderen Dienst als Firebase hosten, verwenden Sie Option 2 , Option 3 , Option 4 oder Option 5 .

Option 1: Aktualisieren Sie Ihre Firebase-Konfiguration, um Ihre benutzerdefinierte Domäne als authDomain zu verwenden

Wenn Sie Ihre App mit Firebase Hosting unter Verwendung einer benutzerdefinierten Domäne hosten, können Sie das Firebase SDK so konfigurieren, dass Ihre benutzerdefinierte Domäne als authDomain . Dadurch wird sichergestellt, dass Ihre App und der Authentifizierungs-Iframe dieselbe Domäne verwenden, wodurch das Anmeldeproblem verhindert wird. (Wenn Sie Firebase Hosting nicht verwenden, müssen Sie eine andere Option verwenden.)

Gehen Sie wie folgt vor, um Ihre Firebase-Konfiguration so zu aktualisieren, dass Ihre benutzerdefinierte Domäne als Authentifizierungsdomäne verwendet wird:

1. Konfigurieren Sie das Firebase JS SDK so, dass Ihre benutzerdefinierte Domäne als authDomain :

   const firebaseConfig = {
     apiKey: "<api-key>",
     authDomain: "<the-domain-that-serves-your-app>",
     databaseURL: "<database-url>",
     projectId: "<project-id>",
     appId: "<app-id>"
   };
   

2. Fügen Sie die neue authDomain zur Liste der autorisierten Weiterleitungs-URIs Ihres OAuth-Anbieters hinzu. Wie Sie dies tun, hängt vom Anbieter ab, aber im Allgemeinen können Sie dem Abschnitt „Bevor Sie beginnen“ bei jedem Anbieter für genaue Anweisungen folgen (z. B. der Facebook-Anbieter ). Der aktualisierte URI zur Autorisierung sieht wie folgt aus https://<the-domain-that-serves-your-app>/__/auth/handler – das abschließende /__/auth/handler ist wichtig.

   Wenn Sie einen SAML-Anbieter verwenden, fügen Sie entsprechend die neue authDomain zur URL des SAML Assertion Consumer Service (ACS) hinzu.

Option 2: Wechseln Sie zu signInWithPopup()

Verwenden Sie signInWithPopup() anstelle von signInWithRedirect() . Der Rest des Codes Ihrer App bleibt gleich, aber das UserCredential-Objekt wird anders abgerufen.

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

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

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

Die Popup-Anmeldung ist nicht immer ideal für Benutzer – Popups werden gelegentlich vom Gerät oder der Plattform blockiert, und der Ablauf ist für mobile Benutzer weniger reibungslos. Wenn die Verwendung von Popups für Ihre App ein Problem darstellt, müssen Sie eine der anderen Optionen befolgen.

Option 3: Proxy-Authentifizierungsanfragen an firebaseapp.com

Der signInWithRedirect -Fluss beginnt mit der Umleitung von Ihrer App-Domäne zu der Domäne, die im authDomain Parameter in der Firebase-Konfiguration angegeben ist (" .firebaseapp.com". authDomain hostet den Hilfscode für die Anmeldung, der zum Identitätsanbieter umleitet, der bei Erfolg zurück zur App-Domäne umleitet.

Wenn der Authentifizierungsfluss zu Ihrer App-Domäne zurückkehrt, wird auf den Browserspeicher der Anmeldehilfedomäne zugegriffen. Diese und die folgende Option (um den Code selbst zu hosten) eliminieren den ursprungsübergreifenden Speicherzugriff, der sonst von Browsern blockiert wird.

1. Richten Sie auf Ihrem App-Server einen Reverse-Proxy ein, sodass GET/POST-Anforderungen an https://<app domain>/__/auth/ an https://<project>.firebaseapp.com/__/auth/ weitergeleitet werden. Stellen Sie sicher, dass diese Weiterleitung für den Browser transparent ist; Dies kann nicht über eine 302-Weiterleitung erfolgen.

   Wenn Sie nginx verwenden, um Ihre benutzerdefinierte Domäne bereitzustellen, sieht die Reverse-Proxy-Konfiguration folgendermaßen aus:

   # reverse proxy for signin-helpers for popup/redirect sign in.
   location /__/auth {
     proxy_pass https://<project>.firebaseapp.com;
   }
   

2. Befolgen Sie die Schritte in Option 1 , um die autorisierte redirect_uri -URI, die ACS-URL und Ihre authDomain zu aktualisieren. Sobald Sie Ihre App erneut bereitstellen, sollte der ursprungsübergreifende Speicherzugriff nicht mehr stattfinden.

Option 4: Hosten Sie den Hilfscode für die Anmeldung selbst in Ihrer Domäne

Eine andere Möglichkeit, den ursprungsübergreifenden Speicherzugriff zu eliminieren, besteht darin, den Hilfscode für die Firebase-Anmeldung selbst zu hosten. Dieser Ansatz funktioniert jedoch nicht für die Apple-Anmeldung oder SAML. Verwenden Sie diese Option nur, wenn die Reverse-Proxy-Einrichtung in Option 3 nicht durchführbar ist.

Das Hosten des Hilfscodes umfasst die folgenden Schritte:

1. Laden Sie die zu hostenden Dateien vom Speicherort <project>.firebaseapp.com , indem Sie die folgenden Befehle ausführen:

   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
   

2. Hosten Sie die oben genannten Dateien unter Ihrer App-Domain. Stellen Sie sicher, dass Ihr Webserver auf https://<app domain>/__/auth/<filename> antworten kann.

   Hier ist eine Beispielserverimplementierung , die die Dateien herunterlädt und hostet.

3. Führen Sie die Schritte in Option 1 aus, um die autorisierte redirect_uri -URI und Ihre authDomain zu aktualisieren. Sobald Sie Ihre App erneut bereitstellen, sollte der ursprungsübergreifende Speicherzugriff nicht mehr stattfinden.

Option 5: Anbieteranmeldung unabhängig verarbeiten

Das Firebase Authentication SDK stellt signInWithPopup() und signInWithRedirect() als praktische Methoden bereit, um komplizierte Logik zu umschließen und die Notwendigkeit zu vermeiden, ein anderes SDK einzubeziehen. Sie können beide Methoden vollständig vermeiden, indem Sie sich unabhängig bei Ihrem Anbieter anmelden und dann signInWithCredential() verwenden, um die Anmeldeinformationen des Anbieters gegen Anmeldeinformationen für die Firebase-Authentifizierung auszutauschen. Sie können beispielsweise das Google Sign In SDK , Beispielcode, verwenden , um Anmeldeinformationen für ein Google-Konto abzurufen, und dann neue Google-Anmeldeinformationen instanziieren, indem Sie den folgenden Code ausführen:

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

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

Nachdem Sie signInWithCredential() aufgerufen haben, funktioniert der Rest Ihrer App genauso wie zuvor.

Anweisungen zum Erhalt einer Apple-Berechtigung finden Sie hier .