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

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

Überblick

Um den Ablauf von signInWithRedirect() für Sie und Ihre Benutzer reibungslos zu gestalten, verwendet das Firebase Authentication JavaScript SDK einen ursprungsübergreifenden Iframe, der eine Verbindung zur Firebase Hosting-Domäne Ihrer App herstellt. Dieser Mechanismus funktioniert jedoch nicht mit Browsern, die den Speicherzugriff Dritter blockieren.

Da die Aufforderung an Ihre Benutzer, Speicherpartitionierungsfunktionen im Browser zu deaktivieren, selten eine Option ist, sollten Sie abhängig von den Besonderheiten Ihres Anwendungsfalls stattdessen eine der folgenden Setup-Optionen 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 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: Aktualisieren Sie Ihre Firebase-Konfiguration, um Ihre benutzerdefinierte Domäne als authDomain zu verwenden

Wenn Sie Ihre App mit Firebase Hosting unter Verwendung einer benutzerdefinierten Domäne hosten, können Sie das Firebase SDK so konfigurieren, dass Ihre benutzerdefinierte Domäne als authDomain verwendet wird. Dadurch wird sichergestellt, dass Ihre App und der Authentifizierungs-Iframe dieselbe Domäne verwenden, wodurch Anmeldeprobleme vermieden werden. (Wenn Sie Firebase Hosting nicht verwenden, müssen Sie eine andere Option verwenden.)

Gehen Sie wie folgt vor, um Ihre Firebase-Konfiguration so zu aktualisieren, dass Ihre benutzerdefinierte Domäne als Authentifizierungsdomäne verwendet wird:

  1. Konfigurieren Sie das Firebase JS SDK so, dass Ihre benutzerdefinierte Domäne 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 die neue authDomain zur Liste der autorisierten Weiterleitungs-URIs Ihres OAuth-Anbieters hinzu. Wie Sie dies tun, hängt vom Anbieter ab, aber im Allgemeinen können Sie dem Abschnitt „Bevor Sie beginnen“ bei jedem Anbieter folgen, um genaue Anweisungen zu erhalten (z. B. beim Facebook-Anbieter ). Der aktualisierte URI für die Autorisierung sieht wie folgt 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 die neue authDomain ebenfalls zur URL des SAML Assertion Consumer Service (ACS) hinzu.

  3. Stellen Sie sicher, dass Ihre continue_uri in der Liste der autorisierten Domänen enthalten ist.

  4. Führen Sie bei Bedarf eine erneute Bereitstellung mit Firebase Hosting durch, um die aktuellste Firebase-Konfigurationsdatei abzurufen, die unter /__/firebase/init.json gehostet wird.

Option 2: Wechseln Sie zu signInWithPopup()

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

Modulare Web-API

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

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

Web-Namespace-API

  // 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 für Benutzer nicht immer ideal – Popups werden gelegentlich vom Gerät oder der Plattform blockiert und der Ablauf ist für mobile Benutzer weniger reibungslos. Wenn die Verwendung von Popups für Ihre App ein Problem darstellt, müssen Sie einer der anderen Optionen folgen.

Option 3: Proxy-Authentifizierungsanfragen an firebaseapp.com

Der signInWithRedirect Fluss beginnt mit der Umleitung von Ihrer App-Domäne zu der Domäne, die im authDomain Parameter in der Firebase-Konfiguration angegeben ist (" .firebaseapp.com“ standardmäßig). authDomain hostet den Anmeldehilfscode, der zum Identitätsanbieter umleitet, der bei Erfolg zurück zur App-Domäne umleitet.

Wenn der Authentifizierungsfluss zu Ihrer App-Domäne zurückkehrt, wird auf den Browserspeicher der Anmeldehilfsdomäne zugegriffen. Diese und die folgende Option (den Code selbst zu hosten) eliminieren den ursprungsübergreifenden Speicherzugriff, der andernfalls von Browsern blockiert wird.

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

    Wenn Sie Nginx verwenden, um Ihre benutzerdefinierte Domäne bereitzustellen, sieht die Reverse-Proxy-Konfiguration folgendermaßen aus:

    # reverse proxy for signin-helpers for popup/redirect sign in.
    location /__/auth {
      proxy_pass https://<project>.firebaseapp.com;
    }
    
  2. Befolgen Sie die Schritte in Option 1 , um autorisierte redirect_uri , ACS-URL und Ihre authDomain zu aktualisieren. Sobald Sie Ihre App erneut bereitstellen, sollte der ursprungsübergreifende Speicherzugriff nicht mehr erfolgen.

Option 4: Hosten Sie den Anmeldehilfscode selbst in Ihrer Domain

Eine weitere Möglichkeit, den ursprungsübergreifenden Speicherzugriff zu eliminieren, besteht darin, den Firebase-Anmeldehilfscode 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 Dateien vom Speicherort <project>.firebaseapp.com auf den Host 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. Stellen Sie sicher, 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 Fehlerbehebungen und Funktionen übernommen werden.

  3. Befolgen Sie die Schritte in Option 1 , um autorisierte redirect_uri und Ihre authDomain zu aktualisieren. Sobald Sie Ihre App erneut bereitstellen, sollte der ursprungsübergreifende Speicherzugriff nicht mehr erfolgen.

Option 5: Anbieteranmeldung unabhängig durchführen

Das Firebase Authentication SDK stellt signInWithPopup() und signInWithRedirect() als praktische Methoden bereit, um komplizierte Logik zu umschließen und die Notwendigkeit zu vermeiden, ein weiteres SDK einzubeziehen. Sie können die Verwendung beider Methoden vollständig vermeiden, indem Sie sich unabhängig bei Ihrem Anbieter anmelden und dann signInWithCredential() verwenden, um die Anmeldeinformationen des Anbieters gegen Anmeldeinformationen für die Firebase-Authentifizierung auszutauschen. Sie können beispielsweise das Google Sign In SDK verwenden, einen Beispielcode, um Anmeldeinformationen für ein Google-Konto abzurufen, und anschließend neue Google-Anmeldeinformationen instanziieren, indem Sie den folgenden Code ausführen:

Modulare Web-API

  // `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-Namespace-API

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

Anweisungen zum Erhalten eines Apple-Anmeldedatensatzes finden Sie hier .