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

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

Überblick

Damit der signInWithRedirect()-Ablauf für Sie und Ihre Nutzer nahtlos ist, 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 mit Browsern, die den Zugriff auf Speicher durch Drittanbieter blockieren.

Da es selten eine Option ist, Ihre Nutzer aufzufordern, die Speicherpartitionierungsfunktionen im Browser zu deaktivieren, sollten Sie stattdessen je nach Anwendungsfall 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 weiter unternehmen.
  • Wenn Sie Ihre Anwendung mit Firebase Hosting auf einer benutzerdefinierten Domain oder einer Subdomain von web.app hosten, verwenden Sie Option 1.
  • Wenn Sie Ihre Anwendung 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 Anwendung mit Firebase Hosting unter Verwendung einer benutzerdefinierten Domain 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, was das Anmeldeproblem verhindert. Wenn Sie Firebase Hosting nicht nutzen, müssen Sie eine andere Option verwenden.

So aktualisieren Sie die 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>"
};

  2. Fügen Sie den neuen authDomain der Liste der autorisierten Weiterleitungs-URIs Ihres OAuth-Anbieters hinzu. Wie Sie dies tun, hängt vom Anbieter ab. Im Allgemeinen können Sie jedoch bei jedem Anbieter dem Abschnitt „Vorbereitung“ folgen, um eine genaue Anleitung zu erhalten (z. B. für den Facebook-Anbieter). Der aktualisierte URI für die Autorisierung hat das Format 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 ACS-URL (SAML Assertion Consumer Service) ebenfalls den neuen authDomain hinzu.

Option 2: Zu signInWithPopup() wechseln

Verwenden Sie signInWithPopup() anstelle von signInWithRedirect(). Der Rest des Anwendungscodes bleibt gleich, 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 Ablauf ist für mobile Nutzer weniger reibungslos. Wenn die Verwendung von Pop-ups für Ihre App ein Problem darstellt, müssen Sie einer der anderen Optionen folgen.

Option 3: Proxy-Authentifizierungsanfragen an firebaseapp.com

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

Wenn der Authentifizierungsvorgang zu Ihrer Anwendungsdomain zurückkehrt, wird auf den Browserspeicher der Anmeldehilfsdomain zugegriffen. Diese und die folgende Option (zum Selbsthosten des Codes) beseitigt den ursprungsübergreifenden Speicherzugriff, 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. Stelle 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. Sobald Sie Ihre Anwendung wieder bereitstellen, sollte der ursprungsübergreifende Speicherzugriff nicht mehr erfolgen.

Option 4: Hilfscode zur Anmeldung selbst in Ihrer Domain hosten

Eine weitere Möglichkeit, den ursprungsübergreifenden Speicherzugriff zu vermeiden, besteht darin, den Firebase-Hilfscode für die 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 möglich ist.

Das Hosten des Hilfscodes umfasst die folgenden Schritte:

  1. Laden Sie die zu hostenden Dateien vom Speicherort <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

  2. Hosten Sie die oben genannten Dateien in Ihrer App-Domain. Sorgen Sie dafür, dass Ihr Webserver auf https://<app domain>/__/auth/<filename> antworten kann.

    Hier sehen Sie ein Beispiel für eine Serverimplementierung, bei der die Dateien heruntergeladen und gehostet werden. Wir empfehlen, die Dateien regelmäßig herunterzuladen und zu synchronisieren, damit Sie von den neuesten Fehlerkorrekturen und Funktionen profitieren.

  3. Führen Sie die Schritte in Option 1 aus, um den autorisierten redirect_uri und Ihre authDomain zu aktualisieren. Sobald Sie Ihre Anwendung wieder bereitstellen, sollte der ursprungsübergreifende Speicherzugriff nicht mehr erfolgen.

Option 5: Anbieteranmeldung unabhängig

Das Firebase Authentication SDK bietet signInWithPopup() und signInWithRedirect() als praktische Methoden, um komplizierte Logik zusammenzufassen und auf ein anderes SDK zu verzichten. Sie können die Anwendung beider Methoden ganz vermeiden. Melden Sie sich dazu unabhängig bei Ihrem Anbieter an und verwenden Sie dann signInWithCredential(), um die Anmeldedaten des Anbieters gegen Firebase Authentication-Anmeldedaten auszutauschen. Du kannst beispielsweise mit dem Google Sign In SDK einen Beispielcode verwenden, um Anmeldedaten für ein Google-Konto abzurufen und dann mithilfe des folgenden Codes neue Google-Anmeldedaten zu 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 der Anwendung wie zuvor.

Eine Anleitung dazu, wie Sie Apple-Anmeldedaten erhalten, finden Sie hier.