Best Practices für die Verwendung von „signInWithWeiterleitung“ in Browsern, die den Zugriff auf Drittanbieterspeicher blockieren

In diesem Dokument werden die Best Practices für die Weiterleitungsanmeldung in Browsern beschrieben, die Cookies von Drittanbietern blockieren. Sie müssen eine der hier aufgeführten Optionen ausführen, damit signInWithRedirect() in den 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 mit Browsern, die den Zugriff von Drittanbieter-Speichern blockieren.

Da es selten sinnvoll ist, Ihre Nutzer aufzufordern, Funktionen zur Speicherpartitionierung im Browser zu deaktivieren, sollten Sie 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 Sie 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 über eine benutzerdefinierte 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, wodurch das Anmeldeproblem vermieden wird. Wenn Sie Firebase Hosting nicht verwenden, müssen Sie eine andere Option verwenden. Achten Sie darauf, dass Sie die benutzerdefinierte Domain in dem Projekt eingerichtet haben, das Sie für die Authentifizierung 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>"
};

  1. Fügen Sie der Liste der autorisierten Weiterleitungs-URIs Ihres OAuth-Anbieters das neue authDomain 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. bei dem Facebook-Anbieter). Der aktualisierte URI, der autorisiert werden soll, 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 ACS-URL (SAML Assertion Consumer Service) ebenfalls den neuen authDomain hinzu.

  2. Prüfen Sie, ob sich continue_uri in der Liste der autorisierten Domains befindet.

  3. Stellen 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 Codes Ihrer Anwendung bleibt gleich, das Objekt „UserCredential“ 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 von der Plattform blockiert und der Ablauf ist für mobile Nutzer weniger reibungslos. Wenn die Verwendung von Pop-ups bei Ihrer App ein Problem darstellt, müssen Sie einer der anderen Optionen folgen.

Option 3: Proxy-Authentifizierungsanfragen an firebaseapp.com

Der signInWithRedirect-Ablauf beginnt mit der Weiterleitung von der App-Domain zu der Domain, die in der Firebase-Konfiguration im Parameter authDomain angegeben ist (standardmäßig .firebaseapp.com). authDomain hostet den Hilfscode für die Anmeldung, der zum Identitätsanbieter weiterleitet, der im Erfolgsfall zur Domain der Anwendung zurückgeleitet wird.

Wenn der Authentifizierungsvorgang zur Anwendungsdomain zurückkehrt, wird auf den Browserspeicher der Hilfsdomain für die Anmeldung zugegriffen. Mit dieser und der folgenden Option (zum Selbsthosten des Codes) wird der ursprungsübergreifende Speicherzugriff eliminiert, 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 App neu bereitstellen, sollte der ursprungsübergreifende Speicherzugriff nicht mehr erfolgen.

Option 4: Hilfecode für die Anmeldung 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. Dieser Ansatz funktioniert jedoch nicht mit Apple-Anmeldung oder SAML. Verwenden Sie diese Option nur, wenn die Reverse-Proxy-Einrichtung in Option 3 nicht möglich ist.

Das Hosting des Hilfscodes umfasst folgende 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
wget https://<project>.firebaseapp.com/__/firebase/init.json

  2. Hosten Sie die oben genannten Dateien unter Ihrer App-Domain. Sorgen Sie dafür, dass Ihr Webserver auf https://<app domain>/__/auth/<filename> und https://<app domain>/__/firebase/init.json 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, um sicherzustellen, dass die neuesten Fehlerkorrekturen und Funktionen verfügbar sind.

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

Option 5: Anbieteranmeldung unabhängig voneinander durchführen

Das Firebase Authentication SDK bietet signInWithPopup() und signInWithRedirect() als praktische Methoden, um komplizierte Logik zu verpacken und auf andere SDKs zu verzichten. Sie können diese Methoden vollständig 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 das Google Sign In SDK, einen Beispielcode, um Anmeldedaten für ein Google-Konto abzurufen, und dann neue Google-Anmeldedaten instanziieren, indem du den folgenden Code ausführst:

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 Anmeldedaten von Apple erhalten, finden Sie hier.