Best Practices für die Verwendung von `signInWithRedirect` in Browsern, die den Zugriff auf Drittanbieterspeicher blockieren

In diesem Dokument werden die 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 und in allen Browsern wie vorgesehen funktioniert.

Übersicht

Damit der signInWithRedirect() Ablauf für Sie und Ihre Nutzer reibungslos funktioniert, verwendet das Firebase Authentication JavaScript SDK ein ursprungsübergreifendes iFrame, das mit der Firebase Hosting-Domain Ihrer App verbunden ist. Dieser Mechanismus funktioniert jedoch nicht mit Browsern, die den Zugriff auf Drittanbieterspeicher blockieren.

Da es selten eine Option ist, Nutzer zu bitten, die Funktionen zur Speicherpartitionierung 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 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 mit einem anderen Dienst als Firebase hosten, verwenden Sie Option 2, Option 3, Option 4, oder Option 5.

Option 1: Firebase-Konfiguration aktualisieren, um Ihre benutzerdefinierte Domain als authDomain zu verwenden

Wenn Sie Ihre App mit Firebase Hosting auf 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 das Auth-iFrame dieselbe Domain verwenden, wodurch das Anmeldeproblem verhindert wird. Wenn Sie Firebase Hosting nicht verwenden, müssen Sie eine andere Option verwenden. Achten Sie darauf, dass Sie die benutzerdefinierte Domain für dasselbe Projekt eingerichtet haben, das Sie für die Authentifizierung verwenden.

So aktualisieren Sie Ihre Firebase-Konfiguration, um Ihre benutzerdefinierte Domain als Auth-Domain zu verwenden:

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

  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 Allgemeinen können Sie jedoch der Anleitung im Abschnitt „Vorbereitung“ eines beliebigen Anbieters folgen, um genaue Anweisungen zu erhalten (z. B. für den Facebook-Anbieter). Der aktualisierte URI für die Autorisierung sieht so aus: https://<the-domain-that-serves-your-app>/__/auth/handler — das nachgestellte /__/auth/handler ist wichtig.

    Wenn Sie einen SAML-Anbieter verwenden, fügen Sie die neue authDomain der ACS-URL für den SAML Assertion Consumer Service hinzu.

  2. Achten Sie darauf, dass sich Ihre continue_uri in der Liste der autorisierten Domains befindet.

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

Option 2: Zu `signInWithPopup()` wechseln

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

Web version 9 

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

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

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

Option 3: Auth-Anfragen an firebaseapp.com weiterleiten

Der -Ablauf beginnt mit einer Weiterleitung von Ihrer App-Domain zu der Domain, die im Parameter in der Firebase-Konfiguration angegeben ist (".firebaseapp.com" standardmäßig).signInWithRedirectauthDomain authDomain hostet den Anmelde-Helper-Code, der zum Identitätsanbieter weiterleitet, der bei Erfolg wieder zur App-Domain weiterleitet.

Wenn der Authentifizierungsablauf zur App-Domain zurückkehrt, wird auf den Browserspeicher der Anmelde-Helper-Domain zugegriffen. Mit dieser und der folgenden Option (zum Selbsthosten des Codes) wird der ursprungsübergreifende Speicherzugriff verhindert, 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. Achten Sie darauf, dass diese Weiterleitung für den Browser transparent ist. Dies kann nicht über eine 302-Weiterleitung erfolgen.

    Wenn Sie nginx verwenden, um Ihre benutzerdefinierte Domain bereitzustellen, 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. Folgen Sie der Anleitung unter Option 1 , um die autorisierte redirect_uri, die ACS-URL und Ihre authDomain zu aktualisieren. Nachdem Sie Ihre App noch einmal bereitgestellt haben, sollte der ursprungsübergreifende Speicherzugriff nicht mehr erfolgen.

Option 4: Anmelde-Helper-Code in Ihrer Domain selbst hosten

Eine weitere Möglichkeit, den ursprungsübergreifenden Speicherzugriff zu verhindern, besteht darin, den Firebase-Anmelde-Helper-Code 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 möglich ist.

Das Hosten des Helper-Codes umfasst die folgenden Schritte:

  1. Laden Sie die zu hostenden Dateien vom Speicherort <project>.firebaseapp.com herunter, 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
wget https://<project>.firebaseapp.com/__/auth/links
wget https://<project>.firebaseapp.com/__/auth/links.js
wget https://<project>.firebaseapp.com/__/firebase/init.json

  2. Hosten Sie die oben genannten Dateien unter Ihrer App-Domain. Achten Sie darauf, dass Ihr Webserver auf https://<app domain>/__/auth/<filename> und https://<app domain>/__/firebase/init.json antworten kann.

    Hier ist eine Beispielserverimplementierung, die die Dateien herunterlädt und hostet. Wir empfehlen, die Dateien regelmäßig herunterzuladen und zu synchronisieren, um sicherzustellen, dass die neuesten Fehlerkorrekturen und Funktionen verwendet werden.

  3. Folgen Sie der Anleitung unter Option 1 um die autorisierte redirect_uri und Ihre authDomain zu aktualisieren. Nachdem Sie Ihre App noch einmal bereitgestellt haben, sollte der ursprungsübergreifende Speicherzugriff nicht mehr erfolgen.

Option 5: Anbieteranmeldung unabhängig verarbeiten

Das Firebase Authentication SDK bietet signInWithPopup() und signInWithRedirect() als praktische Methoden, um komplizierte Logik zu kapseln und die Einbeziehung eines anderen SDK zu vermeiden. Sie können beide Methoden vollständig vermeiden, indem Sie sich unabhängig bei Ihrem Anbieter anmelden und dann signInWithCredential() verwenden, um die Anmeldedaten des Anbieters gegen Anmeldedaten für die Firebase Authentication einzutauschen. Sie können beispielsweise das Google Log-in SDKverwenden, Beispielcode zum Abrufen von Anmeldedaten für ein Google-Konto zu erhalten, und dann mit dem folgenden Code neue Google-Anmeldedaten instanziieren:

Web version 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);

Web version 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 finden Sie hier.