Ich entwickle einen OAuth-Authentifizierungsablauf ausschließlich in JavaScript und möchte dem Benutzer das Fenster "Zugriff gewähren" in einem Popup anzeigen, das jedoch blockiert wird.
Wie kann ich verhindern, dass Popup-Fenster , die von den Popup-Blockern der verschiedenen Browser erstellt wurden window.open
oder window.showModalDialog
von diesen blockiert werden, blockiert werden?
javascript
popup
modal-dialog
popup-blocker
Pablo Fernandez
quelle
quelle
Antworten:
Die allgemeine Regel lautet, dass Popup-Blocker aktiviert werden, wenn
window.open
oder ähnliches aus Javascript aufgerufen wird, das nicht durch direkte Benutzeraktionen aufgerufen wird . Das heißt, Sie können alswindow.open
Reaktion auf einen Tastenklick aufrufen, ohne vom Popup-Blocker getroffen zu werden. Wenn Sie jedoch denselben Code in ein Timer-Ereignis einfügen, wird dieser blockiert. Die Tiefe der Anrufkette ist ebenfalls ein Faktor - einige ältere Browser sehen nur den unmittelbaren Anrufer an, neuere Browser können ein wenig zurückverfolgen, um festzustellen, ob der Anrufer des Anrufers ein Mausklick war usw. Halten Sie ihn so flach wie möglich, um Popup-Blocker zu vermeiden.quelle
Basierend auf Jason Sebring ‚s sehr nützlichen Tipp , und auf dem Material bedeckt hier und dort fand ich eine perfekte Lösung für meinen Fall:
Pseudocode mit Javascript-Schnipsel:
Erstellen Sie sofort ein leeres Popup für Benutzeraktionen
Optional: Fügen Sie eine wartende Info-Nachricht hinzu. Beispiele:
a) Eine externe HTML-Seite: Ersetzen Sie die obige Zeile durch
b) Text: Fügen Sie die folgende Zeile unter der obigen ein:
Füllen Sie es mit Inhalt, wenn Sie bereit sind (z. B. wenn der AJAX-Aufruf zurückgegeben wird).
Bereichern Sie den Anruf
window.open
mit den zusätzlichen Optionen, die Sie benötigen.Ich verwende diese Lösung tatsächlich für eine Mailto-Umleitung und sie funktioniert in allen meinen Browsern (Windows 7, Android). Das
_blank
Bit hilft übrigens dabei, dass die Mailto-Umleitung auf Mobilgeräten funktioniert.Deine Erfahrung? Wie kann man das verbessern?
quelle
Whatever it is you intend to do, there is a better way than a popup window
lol? Seltsame Verallgemeinerung. Der Client möchte, dass die Seite, auf der er sich authentifiziert hat, geöffnet bleibt und die neue Site / Zielseite nach der Authentifizierung in einem neuen Tab geöffnet wird. Ja, nicht meine Vorstellung von einer hervorragenden Benutzererfahrung ... aber es scheint vernünftigimportantStuff.close
an, um die neue Registerkarte zu schließen und auf der Originalseite eine Benachrichtigung bereitzustellen.Zusätzlich zum Swiss Mister Post, in meinem Fall wurde window.open innerhalb eines Versprechens gestartet, das den Popup-Blocker einschaltete. Meine Lösung war: in eckig:
browserService:
Auf diese Weise können Sie mithilfe der Versprechen-Antwort einen neuen Tab öffnen und den Popup-Blocker nicht aufrufen.
quelle
const tab = window.open(); observable.subscribe(dataUrl => tab.location.href = dataUrl);
.then
Antwort dann nicht gesehen und deshalb war ich so verwirrt: / SRY ...Als gute Praxis halte ich es für eine gute Idee, zu testen, ob ein Popup blockiert wurde, und gegebenenfalls Maßnahmen zu ergreifen. Sie müssen wissen, dass window.open einen Rückgabewert hat. Dieser Wert kann null sein, wenn die Aktion fehlgeschlagen ist. Zum Beispiel im folgenden Code:
Wenn das Popup blockiert ist, gibt window.open null zurück. Die Funktion gibt also false zurück.
Wenn das Popup nicht geöffnet wird, können Sie:
quelle
von Googles oauth JavaScript API:
http://code.google.com/p/google-api-javascript-client/wiki/Authentication
Sehen Sie den Bereich, in dem es liest:
Authentifizierung einrichten
Die Client-Implementierung von OAuth 2.0 verwendet ein Popup-Fenster, um den Benutzer aufzufordern, sich anzumelden und die Anwendung zu genehmigen. Der erste Aufruf von gapi.auth.authorize kann Popup-Blocker auslösen, da das Popup-Fenster indirekt geöffnet wird. Rufen Sie beim Laden des Clients gapi.auth.init (Rückruf) auf, um zu verhindern, dass der Popupblocker bei Authentifizierungsaufrufen ausgelöst wird. Der bereitgestellte Rückruf wird ausgeführt, wenn die Bibliothek bereit ist, Authentifizierungsaufrufe durchzuführen.
Ich würde vermuten, dass es sich auf die eigentliche Antwort oben bezieht, wie es erklärt, wenn es eine sofortige Antwort gibt, wird es den Popup-Alarm nicht auslösen. Die "gapi.auth.init" macht es so, dass die API sofort passiert.
Praktische Anwendung
Ich habe einen Open-Source-Authentifizierungsmikroservice mit dem Knotenpass auf npm und den verschiedenen Passpaketen für jeden Anbieter erstellt. Ich habe einen Standard-Redirect-Ansatz für den Drittanbieter verwendet und ihm eine Redirect-URL gegeben, zu der er zurückkehren kann. Dies war programmatisch, so dass ich verschiedene Orte haben konnte, an die ich zurückmelden konnte, wenn ich mich anmeldete / anmeldete und auf bestimmten Seiten.
github.com/sebringj/athu
passportjs.org
quelle
Ich habe mehrere Lösungen ausprobiert, aber seine ist die einzige, die in allen Browsern für mich funktioniert hat
let newTab = window.open(); newTab.location.href = url;
quelle
url
? es ist nicht zugeordnet.http://example.com
window.open()
neues Fenster nicht programmgesteuert geöffnet werden kann. Wenn dies erforderlich ist, ist diese Antwort eine der Optionen. Mit dernewTab
Variablen, auf die wir verweisen,window.open()
und später können wir sie aufrufen, dieurl
benötigte URL einfügen , in meinem Fall die URL eines Blobs, und die neue Registerkarte wird mit der eingegebenen URL geöffnet.Ich wollte die neue Seite erst erstellen, wenn der Rückruf erfolgreich zurückgegeben wurde. Daher habe ich dies getan, um den Benutzerklick zu simulieren :
quelle
Der einfachste Weg, dies loszuwerden, ist:
Ex :
Das hat bei mir sehr gut funktioniert. Prost
quelle