Best Practices für die Verwendung von „signInWithWeiterleitung“ bei Browsern, die den Zugriff auf Drittanbieter-Speicher blockieren

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

Überblick

Damit signInWithRedirect() für Sie und Ihre Nutzer nahtlos funktioniert, verwendet das Firebase Authentication JavaScript SDK einen ursprungsübergreifenden iFrame, der eine Verbindung zur Firebase Hosting-Domain Ihrer App herstellt. Dieser Mechanismus funktioniert jedoch nicht bei Browsern, die den Speicherzugriff von Drittanbietern blockieren.

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

  • Wenn Sie Ihre App mit Firebase Hosting auf einer Subdomain von firebaseapp.com hosten, sind Sie von diesem Problem nicht betroffen und Sie 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 über eine benutzerdefinierte Domain mit Firebase Hosting hosten, können Sie das Firebase SDK so konfigurieren, dass Ihre benutzerdefinierte Domain als authDomain verwendet wird. Dadurch wird sichergestellt, dass Ihre Anwendung 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 demselben Projekt eingerichtet sein, das Sie für die Authentifizierung verwenden.

So aktualisieren Sie Ihre Firebase-Konfiguration, um Ihre benutzerdefinierte Domain als Authentifizierungsdomain 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 das neue authDomain der Liste der autorisierten Weiterleitungs-URIs Ihres OAuth-Anbieters hinzu. Wie Sie dabei vorgehen müssen, hängt vom jeweiligen Anbieter ab. Im Allgemeinen können Sie jedoch dem Abschnitt „Vorbereitung“ eines beliebigen Anbieters folgen, um eine genaue Anleitung zu erhalten (z. B. beim Facebook-Anbieter). Der aktualisierte URI, der autorisiert werden muss, sieht so aus: https://<the-domain-that-serves-your-app>/__/auth/handler – der nachgestellte /__/auth/handler ist wichtig.

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

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

  3. Stellen Sie sie 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 Anwendungscodes bleibt unverändert, das UserCredential-Objekt wird jedoch 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 Pop-up-Anmeldung ist für Nutzer nicht immer ideal. Pop-ups werden gelegentlich vom Gerät oder der Plattform blockiert und der Vorgang für mobile Nutzer ist weniger flüssig. Wenn die Verwendung von Pop-ups für deine App ein Problem darstellt, musst du einer der anderen Optionen folgen.

Option 3: Authentifizierungsanfragen über firebaseapp.com weiterleiten

Der signInWithRedirect-Ablauf beginnt mit einer Weiterleitung von Ihrer App-Domain an die Domain, die im Parameter authDomain in der Firebase-Konfiguration angegeben ist (standardmäßig .firebaseapp.com). authDomain hostet den Anmeldehilfecode, der an den Identitätsanbieter weiterleitet, der ihn im Erfolgsfall zurück zur Anwendungsdomain weiterleitet.

Wenn der Authentifizierungsvorgang zu Ihrer Anwendungsdomain zurückkehrt, wird auf den Browserspeicher der Anmeldehilfedomain zugegriffen. Mit dieser und der folgenden Option (zum eigenständigen Hosten des Codes) wird der ursprungsübergreifende Speicherzugriff entfernt, der ansonsten von Browsern blockiert wird.

  1. Richten Sie auf Ihrem Anwendungsserver einen Reverse-Proxy ein, damit GET/POST-Anfragen 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 Ihre benutzerdefinierte Domain mit nginx bereitstellen, 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ühren Sie die Schritte in Option 1 aus, um die autorisierte redirect_uri, die ACS-URL und Ihre authDomain zu aktualisieren. Nachdem Sie Ihre Anwendung neu bereitgestellt haben, sollte der ursprungsübergreifende Speicherzugriff nicht mehr erfolgen.

Option 4: Anmeldehilfecode in Ihrer Domain selbst hosten

Eine weitere Möglichkeit, den ursprungsübergreifenden Speicherzugriff zu eliminieren, besteht darin, den Firebase-Hilfscode für die Anmeldung selbst zu hosten. Diese Vorgehensweise 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 Hilfscodes 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/__/firebase/init.json

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

    Hier ist ein Beispiel für eine Serverimplementierung, mit der die Dateien heruntergeladen und gehostet werden. Wir empfehlen Ihnen, die Dateien regelmäßig herunterzuladen und zu synchronisieren, damit Sie die neuesten Fehlerbehebungen und Funktionen nutzen können.

  3. Führe die Schritte in Option 1 aus, um die autorisierte redirect_uri und dein authDomain zu aktualisieren. Nachdem Sie Ihre Anwendung neu bereitgestellt haben, sollte der ursprungsübergreifende Speicherzugriff nicht mehr erfolgen.

Option 5: Anmeldung über Anbieter unabhängig verarbeiten

Das Firebase Authentication SDK bietet signInWithPopup() und signInWithRedirect() als praktische Methoden, um komplizierte Logik zu umschließen und die Notwendigkeit eines weiteren 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 Firebase Authentication-Anmeldedaten auszutauschen. Sie können beispielsweise das Google Log-in SDK (Beispielcode) verwenden, um Anmeldedaten für ein Google-Konto abzurufen und dann neue Google-Anmeldedaten zu instanziieren. Dazu führen Sie den folgenden Code aus:

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 der Anwendung genauso wie zuvor.

Eine Anleitung zum Erhalt von Apple-Anmeldedaten finden Sie hier.