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 der signInWithRedirect()-Ablauf für Sie und Ihre Nutzer reibungslos funktioniert, verwendet das Firebase Authentication JavaScript SDK ein ursprungsübergreifendes iFrame, das 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, Nutzer zu bitten, die Funktionen zur Speicherpartitionierung im Browser zu deaktivieren, sollten Sie stattdessen je nach den Besonderheiten Ihres Anwendungsfalls eine der folgenden Einrichtungsoptionen für Ihre App anwenden.
- Wenn Sie Ihre App mit Firebase Hosting auf einer Subdomain von
firebaseapp.comhosten, 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.apphosten, verwenden Sie Option 1. - Wenn Sie Ihre App mit einem anderen Dienst als Firebase hosten, verwenden Sie Option 2, Option 3, Option 4 oder Option 5.
Option 1: Firebase-Konfiguration aktualisieren, damit Ihre benutzerdefinierte Domain als authDomain verwendet wird
Wenn Sie Ihre App mit Firebase Hosting über eine benutzerdefinierte 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 das Auth-iFrame dieselbe Domain verwenden, wodurch das Anmeldeproblem verhindert wird. Wenn Sie Firebase Hosting nicht verwenden, müssen Sie eine andere Option nutzen. Achten Sie darauf, dass Sie die benutzerdefinierte Domain für dasselbe Projekt eingerichtet haben, das Sie für die Authentifizierung verwenden.
So aktualisieren Sie Ihre Firebase-Konfiguration, damit Ihre benutzerdefinierte Domain als Authentifizierungsdomain verwendet wird:
Konfigurieren Sie das Firebase JS SDK so, dass Ihre benutzerdefinierte Domain als
authDomainverwendet wird:const firebaseConfig = { apiKey: "<api-key>", authDomain: "<the-domain-that-serves-your-app>", databaseURL: "<database-url>", projectId: "<project-id>", appId: "<app-id>" };
Fügen Sie die neue
authDomainder Liste der autorisierten Weiterleitungs-URIs Ihres OAuth-Anbieters hinzu. Wie Sie das tun, hängt vom Bereitsteller ab. Im Allgemeinen können Sie der Anleitung im Abschnitt „Bevor Sie beginnen“ eines beliebigen Bereitstellers folgen (z. B. Facebook-Bereitsteller). Der aktualisierte URI für die Autorisierung sieht so aus:https://<the-domain-that-serves-your-app>/__/auth/handler. Das abschließende/__/auth/handlerist wichtig.Wenn Sie einen SAML-Anbieter verwenden, fügen Sie die neue
authDomainder SAML-ACS-URL (Assertion Consumer Service) hinzu.Achten Sie darauf, dass Ihre
continue_uriin der Liste der autorisierten Domains aufgeführt ist.Stellen Sie die App bei Bedarf noch einmal mit Firebase Hosting bereit, um die aktuelle Firebase-Konfigurationsdatei unter
/__/firebase/init.jsonabzurufen.
Option 2: Zu signInWithPopup() wechseln
Verwenden Sie signInWithPopup() anstelle von signInWithRedirect(). Der restliche Code Ihrer App bleibt unverändert, aber das UserCredential-Objekt wird anders abgerufen.
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 Pop-up-Anmeldung ist nicht immer ideal für Nutzer, da Pop-ups gelegentlich vom Gerät oder der Plattform blockiert werden und der Ablauf für mobile Nutzer weniger reibungslos ist. Wenn Pop-ups für Ihre App ein Problem darstellen, müssen Sie eine der anderen Optionen verwenden.
Option 3: Proxy-Authentifizierungsanfragen an firebaseapp.com weiterleiten
Der signInWithRedirect-Ablauf beginnt mit einer Weiterleitung von Ihrer App-Domain zur Domain, die im Parameter authDomain in der Firebase-Konfiguration angegeben ist (standardmäßig „authDomain hostet den Anmelde-Helper-Code, der zum Identitätsanbieter weiterleitet. Bei Erfolg wird wieder zur App-Domain weitergeleitet.
Wenn der Authentifizierungsablauf zur App-Domain zurückkehrt, wird auf den Browserspeicher der Anmelde-Helper-Domain zugegriffen. Bei dieser Option und der folgenden (zum Self-Hosting des Codes) wird der ursprungsübergreifende Speicherzugriff vermieden, der ansonsten von Browsern blockiert wird.
Richten Sie einen Reverse-Proxy auf Ihrem App-Server ein, damit GET-/POST-Anfragen an
https://<app domain>/__/auth/anhttps://<project>.firebaseapp.com/__/auth/weitergeleitet werden. Achten Sie darauf, dass diese Weiterleitung für den Browser transparent ist. Das ist nicht über eine 302-Weiterleitung möglich.Wenn Sie nginx verwenden, um Ihre benutzerdefinierte Domain bereitzustellen, 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; }Folgen Sie der Anleitung in Option 1, um die autorisierte
redirect_uri, die ACS-URL und IhreauthDomainzu aktualisieren. Nachdem Sie Ihre App neu bereitgestellt haben, sollte der ursprungsübergreifende Speicherzugriff nicht mehr erfolgen.
Option 4: Anmelde-Helper-Code auf Ihrer Domain selbst hosten
Eine weitere Möglichkeit, den Zugriff auf Speicher über verschiedene Ursprünge hinweg zu verhindern, besteht darin, den Firebase-Anmelde-Helper-Code 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:
Laden Sie die Dateien, die gehostet werden sollen, vom Speicherort
<project>.firebaseapp.comherunter, 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/__/auth/links wget https://<project>.firebaseapp.com/__/auth/links.js wget https://<project>.firebaseapp.com/__/firebase/init.jsonHosten Sie die oben genannten Dateien in Ihrer App-Domain. Achten Sie darauf, dass Ihr Webserver auf
https://<app domain>/__/auth/<filename>undhttps://<app domain>/__/firebase/init.jsonreagieren kann.Hier finden Sie eine Beispielimplementierung für einen Server, der die Dateien herunterlädt und hostet. Wir empfehlen, die Dateien regelmäßig herunterzuladen und zu synchronisieren, damit die neuesten Fehlerkorrekturen und Funktionen berücksichtigt werden.
Folgen Sie der Anleitung unter Option 1, um die autorisierten
redirect_uriund IhreauthDomainzu aktualisieren. Nachdem Sie Ihre App neu bereitgestellt haben, sollte der ursprungsübergreifende Speicherzugriff nicht mehr erfolgen.
Option 5: Anbieteranmeldung unabhängig verarbeiten
Das Firebase Authentication SDK bietet signInWithPopup() und signInWithRedirect() als praktische Methoden, um komplizierte Logik zu kapseln und die Einbindung eines weiteren SDK zu vermeiden. Sie können beide Methoden vollständig vermeiden, indem Sie sich unabhängig bei Ihrem Anbieter anmelden und dann signInWithCredential() verwenden, um die Anmeldedaten des Anbieters gegen Anmeldedaten für die Firebase-Authentifizierung einzutauschen.
Sie können beispielsweise das Google Log-in SDK und Beispielcode verwenden, um Anmeldedaten für ein Google-Konto abzurufen und dann mit dem folgenden Code eine neue Google-Anmeldedateninstanz zu instanziieren:
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, funktioniert der Rest Ihrer App wie zuvor.
Eine Anleitung zum Abrufen von Apple-Anmeldedaten finden Sie hier.