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 Drittanbieter-Cookies blockieren. Sie müssen eine der hier aufgeführten Optionen verwenden, damit signInWithRedirect() in Produktionsumgebungen in allen Browsern wie vorgesehen funktioniert.

Übersicht

Damit die signInWithRedirect()-Ablauf für Sie und Ihre Nutzer reibungslos funktioniert, verwendet das Firebase Authentication JavaScript SDK eine ursprungsübergreifenden iFrame, der eine Verbindung zur Firebase Hosting-Domain Ihrer App herstellt. Dieser Mechanismus funktioniert jedoch nicht mit 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 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 bei 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 und 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 der Authentifizierungs-Iframe dieselbe Domain verwenden, wodurch das Anmeldeproblem verhindert wird. Wenn Sie Firebase Hosting nicht verwenden, müssen Sie eine andere Option.) Richten Sie die benutzerdefinierte Domain auf derselben das Sie für die Authentifizierung verwenden.

Um Ihre Firebase-Konfiguration so zu aktualisieren, dass Ihre benutzerdefinierte Domain als Authentifizierungsdomain verwendet wird, führen Sie Folgendes aus: Folgendes:

  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 dies tun, hängt vom Anbieter ab, aber im Allgemeinen können Sie sich an die eines Anbieters finden Sie Anweisungen (zum Beispiel die Facebook-Anbieter). Der aktualisierte URI zu dass die Autorisierung so aussieht, https://<the-domain-that-serves-your-app>/__/auth/handler – der nachgestellte /__/auth/handler ist wichtig.

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

  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(). Die Der Rest des Codes Ihrer Anwendung bleibt gleich, aber das UserCredential-Objekt ist unterschiedlich abgerufen werden.

Web 

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

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

Web 

  // 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 Anmeldung in einem Pop-up ist für Nutzer nicht immer ideal. an das Gerät oder die Plattform und der Ablauf ist für mobile Nutzende weniger flüssig. Bei Verwendung oder Pop-ups auftreten, müssen Sie einer der anderen Optionen.

Option 3: Authentifizierungsanfragen über firebaseapp.com weiterleiten

Der signInWithRedirect-Ablauf beginnt mit einer Weiterleitung von Ihrer App-Domain an den Domain, die im Parameter authDomain in der Firebase-Konfiguration angegeben ist (standardmäßig .firebaseapp.com) authDomain hostet die Anmeldehilfe der den Nutzer an den Identitätsanbieter weiterleitet, der ihn anschließend wieder mit der App-Domain verknüpfen.

Wenn der Authentifizierungsvorgang zu Ihrer App-Domain zurückkehrt, auf die Anmeldehilfedomain zugegriffen wird. Diese Option und die wird der ursprungsübergreifende Speicherzugriff entfernt, der ansonsten 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. Diese Weiterleitung muss für den Browser transparent sein. Dies ist nicht über eine 302-Weiterleitung möglich.

    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. Befolgen Sie die Schritte in Option 1 um die autorisierte redirect_uri, die ACS-URL und Ihre authDomain zu aktualisieren. Nach der erneuten Bereitstellung sollte der ursprungsübergreifende Speicherzugriff nicht mehr erfolgen.

Option 4: Anmeldehilfecode in Ihrer Domain selbst hosten

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

Das Hosten des Hilfscodes umfasst die folgenden Schritte:

  1. Laden Sie die zu hostenden Dateien vom Speicherort <project>.firebaseapp.com herunter: und führen Sie 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
wget https://<project>.firebaseapp.com/__/firebase/init.json

  2. Hosten Sie die oben genannten Dateien unter Ihrer App-Domain. Ihr Webserver muss auf https://<app domain>/__/auth/<filename> und https://<app domain>/__/firebase/init.json reagieren können.

    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. Befolgen Sie die Schritte in Option 1 zum Aktualisieren autorisierter redirect_uri und authDomain. Nach der Neubereitstellung Ihrer App sollte der ursprungsübergreifende Speicherzugriff nicht mehr erfolgen.

Option 5: Anmeldung beim Anbieter unabhängig verarbeiten

Das Firebase Authentication SDK bietet signInWithPopup() und signInWithRedirect() als um komplizierte Logik zu umschließen und die Notwendigkeit eines anderen SDK. Sie können beide Methoden vollständig vermeiden, indem Sie sich an Ihren Anbieter zu wenden, signInWithCredential() bis Anbieter-Anmeldedaten gegen Firebase Authentication-Anmeldedaten austauschen Sie können beispielsweise die Methode Google Log-in SDK Beispielcode um Anmeldedaten für ein Google-Konto zu erhalten und neue Anmeldedaten von Google zu instanziieren indem Sie den folgenden Code ausführen:

Web 

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

  // `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, nutzt der Rest Ihrer App die wie vorher.

Eine Anleitung zum Abrufen von Apple-Anmeldedaten findest du hier.