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.openoder window.showModalDialogvon diesen blockiert werden, blockiert werden?

Die allgemeine Regel lautet, dass Popup-Blocker aktiviert werden, wenn window.openoder ähnliches aus Javascript aufgerufen wird, das nicht durch direkte Benutzeraktionen aufgerufen wird . Das heißt, Sie können als window.openReaktion 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.

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:

1. Erstellen Sie sofort ein leeres Popup für Benutzeraktionen

   var importantStuff = window.open('', '_blank');

   Optional: Fügen Sie eine wartende Info-Nachricht hinzu. Beispiele:

   a) Eine externe HTML-Seite: Ersetzen Sie die obige Zeile durch

   var importantStuff = window.open('http://example.com/waiting.html', '_blank');

   b) Text: Fügen Sie die folgende Zeile unter der obigen ein:

   importantStuff.document.write('Loading preview...');

2. Füllen Sie es mit Inhalt, wenn Sie bereit sind (z. B. wenn der AJAX-Aufruf zurückgegeben wird).

   importantStuff.location.href = 'http://shrib.com';

Bereichern Sie den Anruf window.openmit 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 _blankBit hilft übrigens dabei, dass die Mailto-Umleitung auf Mobilgeräten funktioniert.

Deine Erfahrung? Wie kann man das verbessern?

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:

$scope.gotClick = function(){

  var myNewTab = browserService.openNewTab();
  someService.getUrl().then(
    function(res){
        browserService.updateTabLocation(res.url, myNewTab);

    }
  );
};

browserService:

this.openNewTab = function(){
     var newTabWindow = $window.open();
     return newTabWindow;
}

this.updateTabLocation = function(tabLocation, tab) {
     if(!tabLocation){
       tab.close();
     }
     tab.location.href = tabLocation;
}

Auf diese Weise können Sie mithilfe der Versprechen-Antwort einen neuen Tab öffnen und den Popup-Blocker nicht aufrufen.

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:

function pop(url,w,h) {
    n=window.open(url,'_blank','toolbar=0,location=0,directories=0,status=1,menubar=0,titlebar=0,scrollbars=1,resizable=1,width='+w+',height='+h);
    if(n==null) {
        return true;
    }
    return false;
}

Wenn das Popup blockiert ist, gibt window.open null zurück. Die Funktion gibt also false zurück.

Stellen Sie sich als Beispiel vor, Sie rufen diese Funktion direkt von einem beliebigen Link mit auf target="_blank": Wenn das Popup erfolgreich geöffnet wurde, falseblockiert die Rückgabe die Verknüpfungsaktion. Wenn das Popup blockiert ist, truelässt die Rückgabe das Standardverhalten (neues _leeres Fenster öffnen) und fährt fort .

<a href="http://whatever.com" target="_blank" onclick='return pop("http://whatever.com",300,200);' >

Auf diese Weise erhalten Sie ein Popup, wenn es funktioniert, und ein _blank-Fenster, wenn nicht.

Wenn das Popup nicht geöffnet wird, können Sie:

• Öffnen Sie ein leeres Fenster wie im Beispiel und fahren Sie fort
• öffne ein gefälschtes Popup (ein Iframe innerhalb der Seite)
• Informieren Sie den Benutzer ("Bitte erlauben Sie Popups für diese Site")
• Öffnen Sie ein leeres Fenster und informieren Sie den Benutzer usw.

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

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;

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 :

function submitAndRedirect {
  apiCall.then(({ redirect }) => {
      const a = document.createElement('a');
      a.href = redirect;
      a.target = '_blank';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
  });
}

Der einfachste Weg, dies loszuwerden, ist:

1. Verwenden Sie nicht document.open ().
2. Verwenden Sie stattdessen this.document.location.href = location; Dabei ist Speicherort die zu ladende URL

Ex :

<script>
function loadUrl(location)
{
this.document.location.href = location;
}</script>

<div onclick="loadUrl('company_page.jsp')">Abc</div>

Das hat bei mir sehr gut funktioniert. Prost