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 nutzen, 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 bei Browsern, die
Speicherzugriff.
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 Sie 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 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 über eine benutzerdefinierte Domain mit Firebase Hosting hosten, können Sie
Konfigurieren Sie das Firebase SDK so, dass Ihre benutzerdefinierte Domain als authDomain
verwendet wird. Dieses
dass Ihre Anwendung und der
auth-iFrame dieselbe Domain verwenden,
das Anmeldeproblem. 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:
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>" };
Füge das neue
authDomain
zur Liste der autorisierten OAuth-Anbieter hinzu. Weiterleitungs-URIs. 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 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)-URLAchten Sie darauf, dass sich Ihre
continue_uri
in der Liste der autorisierten Domains befindet.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 App-Codes bleibt gleich, aber das UserCredential-Objekt ist
unterschiedlich abgerufen werden.
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 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 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.
Richten Sie auf Ihrem Anwendungsserver einen Reverse-Proxy ein, sodass GET/POST-Anfragen an
https://<app domain>/__/auth/
werden anhttps://<project>.firebaseapp.com/__/auth/
weitergeleitet. Stellen Sie sicher, dass diese Weiterleitung für den Browser transparent ist. kann dies 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; }
Folgen Sie der Anleitung in Option 1 um die autorisierte
redirect_uri
, die ACS-URL und IhreauthDomain
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 ursprungsübergreifenden Speicherzugriff zu eliminieren, ist das eigene Hosten. Firebase Log-in-Hilfscode 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:
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
Hosten Sie die oben genannten Dateien unter Ihrer App-Domain. Achten Sie darauf, dass Ihr Webserver kann auf
https://<app domain>/__/auth/<filename>
reagieren undhttps://<app domain>/__/firebase/init.json
.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.
Folgen Sie der Anleitung in Option 1 zum Aktualisieren autorisierter
redirect_uri
undauthDomain
. Nach der erneuten Bereitstellung sollte der ursprungsübergreifende Speicherzugriff nicht mehr erfolgen.
Option 5: Anmeldung über 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 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, nutzt der Rest Ihrer App die
wie vorher.
Anweisungen zum Erhalt eines Apple-Anmeldeinformationsnachweises sind hier.