Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

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

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

Übersicht

Damit der signInWithRedirect()-Vorgang für Sie und Ihre Nutzer nahtlos abläuft, verwendet das Firebase Authentication JavaScript SDK einen ursprungsübergreifenden iFrame, der mit der Firebase Hosting-Domain Ihrer App verbunden ist. Dieser Mechanismus funktioniert jedoch nicht mit Browsern, die den Zugriff von Drittanbietern auf Speicher blockieren.

Da Sie die Nutzer selten bitten, die Speicherpartitionierung im Browser zu deaktivieren, sollten Sie je nach Anwendungsfall stattdessen 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 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 App 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. Auf diese Weise wird sichergestellt, dass Ihre Anwendung und der Authentifizierungs-Iframe dieselbe Domain verwenden. Dadurch wird das Problem bei der Anmeldung verhindert. (Wenn Sie Firebase Hosting nicht verwenden, müssen Sie eine andere Option 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>"
    };
    
  2. Fügen Sie das neue authDomain der Liste autorisierter Weiterleitungs-URIs Ihres OAuth-Anbieters hinzu. Wie Sie dabei vorgehen, hängt vom Anbieter ab. Im Allgemeinen finden Sie aber genaue Anweisungen für jeden Anbieter (z. B. Facebook-Anbieter). Der aktualisierte URI für die Autorisierung 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-URL) das neue authDomain hinzu.

Option 2: Zu signInWithPopup() wechseln

Verwenden Sie signInWithPopup() anstelle von signInWithRedirect(). Der Rest des Anwendungscodes bleibt gleich, 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 Pop-up-Anmeldung ist nicht immer ideal für Nutzer – Pop-ups werden gelegentlich vom Gerät oder von der Plattform blockiert und der Vorgang für mobile Nutzer ist weniger reibungslos. Wenn die Verwendung von Pop-ups für Ihre Anwendung ein Problem darstellt, müssen Sie eine der anderen Optionen verwenden.

Option 3: Proxy-Authentifizierungsanfragen an firebaseapp.com

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

Wenn der Authentifizierungsablauf zu Ihrer Anwendungsdomain zurückkehrt, wird der Browserspeicher der Anmeldehilfedomain aufgerufen. Diese Option und die folgende (zum Selbsthosten des Codes) verhindern den ursprungsübergreifenden Speicherzugriff, der andernfalls von Browsern blockiert wird.

  1. Richten Sie auf Ihrem Anwendungsserver einen Reverse-Proxy ein, sodass 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 ist über eine 302-Weiterleitung nicht möglich.

    Wenn Sie Ihre benutzerdefinierte Domain mit nginx bereitstellen, sieht die umgekehrte Proxykonfiguration 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 die Anwendung wieder bereitgestellt haben, sollte der ursprungsübergreifende Speicherzugriff nicht mehr möglich sein.

Option 4: Anmeldehilfecode in Ihrer Domain selbst hosten

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

Zum Hosten des Hilfscodes sind folgende Schritte erforderlich:

  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. Achten Sie darauf, dass Ihr Webserver auf https://<app domain>/__/auth/<filename> reagieren kann.

    Hier ist eine Beispielserverimplementierung, mit der die Dateien heruntergeladen und gehostet werden.

  3. Führen Sie die Schritte in Option 1 aus, um die autorisierten redirect_uri und die authDomain zu aktualisieren. Nachdem Sie die Anwendung wieder bereitgestellt haben, sollte der ursprungsübergreifende Speicherzugriff nicht mehr möglich sein.

Option 5: Anbieteranmeldung einzeln verwalten

Das Firebase Authentication SDK bietet signInWithPopup() und signInWithRedirect() als bequeme Logik, um komplizierte Logik zu umschließen und die Notwendigkeit eines anderen SDKs zu vermeiden. Sie können die Verwendung einer der beiden Methoden vermeiden, indem Sie sich unabhängig bei Ihrem Anbieter anmelden und dann signInWithCredential() verwenden, um die Anmeldedaten des Anbieters mit den Firebase Authentication-Anmeldedaten auszutauschen. Sie können beispielsweise mit dem Google Log-in-SDK, Beispielcode, Anmeldedaten für ein Google-Konto abrufen und dann neue Google-Anmeldedaten instanziieren. Führen Sie dazu den folgenden Code aus:

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

Hier finden Sie eine Anleitung dazu, wie Sie die entsprechenden Anmeldedaten erhalten.