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

In diesem Dokument werden Best Practices für die Verwendung von Weiterleitungsanmeldungen in Browsern beschrieben, die Drittanbieter-Cookies blockieren. Sie müssen eine der hier aufgeführten Optionen verwenden, damit signInWithRedirect() in Produktionsumgebungen in allen Browsern wie vorgesehen funktioniert.

Hinweis: Ab dem 24. Juni 2024 muss eine der Optionen implementiert werden, damit die Anmeldung über eine Weiterleitung in Google Chrome M115 und höher funktioniert. Dies ist bereits für Firefox 109 und höher sowie für Safari 16.1 und höher erforderlich.

Übersicht

Damit der signInWithRedirect()-Vorgang für Sie und Ihre Nutzer reibungslos abläuft, verwendet das Firebase Authentication JavaScript SDK einen plattformübergreifenden Iframe, der eine Verbindung zur Firebase-Hostingdomain Ihrer App herstellt. Dieser Mechanismus funktioniert jedoch nicht mit Browsern, die den Speicherzugriff von Drittanbietern blockieren.

Da es selten möglich ist, Nutzer zu bitten, Speicherpartitionierungsfunktionen im Browser zu deaktivieren, sollten Sie stattdessen eine der folgenden Einrichtungsoptionen auf Ihre App anwenden, je nach den Besonderheiten Ihres Anwendungsfalls.

• Wenn Sie Ihre App mit Firebase Hosting auf einer Subdomain von firebaseapp.com hosten, sind Sie von diesem Problem nicht betroffen und müssen nichts unternehmen.
• Wenn Sie Ihre App mit Firebase Hosting auf einer benutzerdefinierten Domain oder einer Subdomain von web.app hosten, 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: Firebase-Konfiguration so aktualisieren, dass Ihre benutzerdefinierte Domain als authDomain

Wenn Sie Ihre App mit Firebase Hosting und einer benutzerdefinierten Domain hosten, können Sie das Firebase SDK so konfigurieren, dass Ihre benutzerdefinierte Domain als authDomain verwendet wird. So wird sichergestellt, dass Ihre App und der Authentifizierungs-Iframe dieselbe Domain verwenden, wodurch das Anmeldeproblem verhindert wird. Wenn Sie Firebase Hosting nicht verwenden, müssen Sie eine andere Option verwenden. Die benutzerdefinierte Domain muss in dem Projekt eingerichtet sein, das Sie für die Authentifizierung verwenden.

So aktualisieren Sie Ihre Firebase-Konfiguration, damit Ihre benutzerdefinierte Domain als Authentifizierungsdomain verwendet wird:

1. Konfigurieren Sie das Firebase JS SDK so, dass Ihre benutzerdefinierte Domain als authDomain verwendet wird:

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

Wichtig :Normalerweise sollten Sie keine anderen Felder im Firebase-Konfigurationsobjekt ändern. Weitere Informationen zum Firebase-Konfigurationsobjekt

1. Fügen Sie die neue authDomain der Liste der autorisierten Weiterleitungs-URIs Ihres OAuth-Anbieters hinzu. Wie Sie das tun, hängt vom Anbieter ab. Im Abschnitt „Vorbereitung“ finden Sie jedoch bei jedem Anbieter eine genaue Anleitung (z. B. beim Facebook-Anbieter). Der aktualisierte URI, der autorisiert werden soll, sieht so 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 die neue authDomain der SAML-ACS-URL (Assertion Consumer Service) hinzu.

2. Achte darauf, dass deine continue_uri in der Liste der autorisierten Domains aufgeführt ist.

3. Stellen Sie die App bei Bedarf noch einmal mit Firebase Hosting bereit, um die aktuelle Firebase-Konfigurationsdatei abzurufen, die unter /__/firebase/init.json gehostet wird.

Option 2: Zu „signInWithPopup()“ wechseln

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

Webversion 9

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

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

Webversion 8

  // 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 Anmeldung über Pop-ups ist nicht immer ideal für Nutzer. Pop-ups werden gelegentlich vom Gerät oder der Plattform blockiert und die Abläufe sind für mobile Nutzer weniger reibungslos. Wenn die Verwendung von Pop-ups für Ihre App ein Problem darstellt, müssen Sie eine der anderen Optionen verwenden.

Option 3: Proxy-Authentifizierungsanfragen an firebaseapp.com

Der signInWithRedirect-Vorgang beginnt mit einer Weiterleitung von Ihrer App-Domain zur Domain, die im authDomain-Parameter in der Firebase-Konfiguration angegeben ist (standardmäßig .firebaseapp.com). authDomain hostet den Anmelde-Hilfecode, der zur Weiterleitung an den Identitätsanbieter dient, der bei Erfolg wieder zur App-Domain weiterleitet.

Wenn der Authentifizierungsablauf zu Ihrer App-Domain zurückkehrt, wird auf den Browserspeicher der Domain für die Anmeldehilfe zugegriffen. Mit dieser Option und der folgenden Option (zum Self-Hosten des Codes) wird der speicherübergreifende Zugriff entfernt, der andernfalls von Browsern blockiert wird.

1. Richten Sie einen Reverse-Proxy auf Ihrem App-Server ein, damit GET-/POST-Anfragen an https://<app domain>/__/auth/ an https://<project>.firebaseapp.com/__/auth/ weitergeleitet werden. Diese Weiterleitung muss für den Browser transparent sein. Dies ist nicht über eine 302-Weiterleitung möglich.

   Wenn Sie nginx zum Bereitstellen Ihrer benutzerdefinierten Domain verwenden, sieht die Reverse-Proxy-Konfiguration so aus:

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

2. Führe die Schritte unter Option 1 aus, um die autorisierte redirect_uri, die ACS-URL und deine authDomain zu aktualisieren. Nach der Neubereitstellung Ihrer App sollte der ursprungsübergreifende Speicherzugriff nicht mehr erfolgen.

Option 4: Helper-Code für die Anmeldung selbst in Ihrer Domain hosten

Eine weitere Möglichkeit, den speicherübergreifenden Zugriff zu vermeiden, besteht darin, den Firebase-Hilfecode für die Anmeldung selbst zu hosten. Dieser Ansatz funktioniert jedoch nicht für die Anmeldung über Apple oder SAML. Verwenden Sie diese Option nur, wenn die Reverse-Proxy-Einrichtung in Option 3 nicht möglich ist.

So hostest du den Hilfscode:

1. Laden Sie die Dateien, die Sie hosten möchten, von <project>.firebaseapp.com herunter. Führen Sie dazu die folgenden Befehle aus:

   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. Hosten Sie die oben genannten Dateien unter Ihrer App-Domain. Ihr Webserver muss auf https://<app domain>/__/auth/<filename> und https://<app domain>/__/firebase/init.json reagieren können.

   Hier ist eine Beispielserverimplementierung, die die Dateien herunterlädt und hostet. Wir empfehlen, die Dateien regelmäßig herunterzuladen und zu synchronisieren, damit die neuesten Fehlerkorrekturen und Funktionen übernommen werden.

3. Führen Sie die Schritte unter Option 1 aus, um die autorisierten redirect_uri und Ihre authDomain zu aktualisieren. Nach der Neubereitstellung Ihrer App sollte der ursprungsübergreifende Speicherzugriff nicht mehr erfolgen.

Option 5: Anmeldung beim Anbieter unabhängig verarbeiten

Wichtig :Dies ist ein komplexer Ansatz, bei dem zusätzliche SDKs verwendet werden. Er kann für SAML-Anbieter sehr aufwendig sein.

Das Firebase Authentication SDK bietet die Methoden signInWithPopup() und signInWithRedirect() als praktische Methoden, um komplizierte Logik zu verpacken und die Einbindung eines anderen SDKs zu vermeiden. Sie können beide Methoden vollständig vermeiden, indem Sie sich unabhängig bei Ihrem Anbieter anmelden und dann mit signInWithCredential() die Anmeldedaten des Anbieters gegen Anmeldedaten für die Firebase-Authentifizierung austauschen. Sie können beispielsweise das Google Sign In SDK und den Beispielcode verwenden, um Anmeldedaten für ein Google-Konto abzurufen, und dann mit dem folgenden Code eine neue Google-Anmeldedateninstanz erstellen:

Webversion 9

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

Webversion 8

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

Eine Anleitung zum Abrufen von Apple-Anmeldedaten findest du hier.