Opracowuję przepływ uwierzytelniania OAuth wyłącznie w JavaScript i chcę pokazać użytkownikowi okno „udziel dostępu” w wyskakującym okienku, ale zostaje ono zablokowane.

Jak mogę zapobiec wyskakującym okienkom utworzonym przez blokowanie wyskakujących okienek w różnych przeglądarkach window.openlub window.showModalDialogprzed ich blokowaniem?

Ogólna zasada jest taka, że ​​blokowanie wyskakujących okienek włącza się, jeśli window.openlub podobnie jest wywoływane z javascript, który nie jest wywoływany przez bezpośrednie działanie użytkownika . Oznacza to, że możesz zadzwonić window.openw odpowiedzi na kliknięcie przycisku bez uderzenia przez blokadę wyskakujących okienek, ale jeśli umieścisz ten sam kod w zdarzeniu licznika czasu, zostanie on zablokowany. Głębokość łańcucha połączeń również ma znaczenie - niektóre starsze przeglądarki patrzą tylko na bezpośredniego dzwoniącego, nowsze przeglądarki mogą trochę cofnąć się, aby sprawdzić, czy dzwoniącym było kliknięcie myszą itp. Utrzymuj to tak płytko, jak to tylko możliwe, aby uniknąć blokowania wyskakujących okienek.

Na podstawie Jason Sebring „s bardzo przydatnych końcówkę , a na rzeczy pokryte tu i tam znalazłem idealne rozwiązanie dla mojego przypadku:

Pseudokod z fragmentami kodu JavaScript:

1. natychmiast utwórz puste okienko po akcji użytkownika

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

   Opcjonalnie: dodaj „oczekującą” wiadomość informacyjną. Przykłady:

   a) Zewnętrzna strona HTML: zamień powyższy wiersz na

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

   b) Tekst: dodaj następujący wiersz poniżej powyższego:

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

2. wypełnij go treścią, gdy jest gotowy (na przykład, gdy zostanie zwrócone połączenie AJAX)

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

Wzbogać połączenie window.openz dowolnymi dodatkowymi opcjami, których potrzebujesz.

Właściwie używam tego rozwiązania do przekierowania mailto i działa na wszystkich moich przeglądarkach (Windows 7, Android). _blankNieco pomaga na mailto przekierowanie do pracy na urządzeniach mobilnych, btw.

Twoje doświadczenie? Jakiś sposób, aby to poprawić?

Dodatkowo Swiss Mister post, w moim przypadku window.open został uruchomiony wewnątrz obietnicy, która włączyła blokadę wyskakujących okienek, moje rozwiązanie brzmiało: w kątowym:

$scope.gotClick = function(){

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

    }
  );
};

przeglądarka internetowa:

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

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

w ten sposób możesz otworzyć nową kartę, używając odpowiedzi na obietnicę i nie wywołując funkcji blokowania wyskakujących okienek.

Jako dobrą praktykę uważam, że dobrym pomysłem jest sprawdzenie, czy wyskakujące okienko zostało zablokowane i podjęcie działań w przypadku. Musisz wiedzieć, że window.open ma wartość zwracaną i ta wartość może być pusta, jeśli akcja się nie powiedzie. Na przykład w poniższym kodzie:

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;
}

jeśli wyskakujące okienko jest zablokowane, window.open zwróci wartość null. Więc funkcja zwróci false.

Jako przykład, wyobraź sobie wywołanie tej funkcji bezpośrednio z dowolnego linku z target="_blank": jeśli wyskakujące okienko zostanie pomyślnie otwarte, powrót falsezablokuje działanie linku, w przeciwnym razie, jeśli wyskakujące okienko zostanie zablokowane, powrót truepozwoli na zachowanie domyślne (otwiera nowe _puste okno) i kontynuuje .

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

W ten sposób będziesz mieć wyskakujące okienko, jeśli to działa, i _blank okno, jeśli nie.

Jeśli wyskakujące okienko się nie otworzy, możesz:

• otwórz puste okno, jak w przykładzie i kontynuuj
• otwórz fałszywe wyskakujące okienko (iframe wewnątrz strony)
• poinformuj użytkownika („proszę zezwolić na wyświetlanie wyskakujących okienek w tej witrynie”)
• otwórz puste okno, a następnie poinformuj użytkownika itp.

z Google oauth JavaScript API:

http://code.google.com/p/google-api-javascript-client/wiki/Authentication

Zobacz obszar, w którym brzmi:

Konfigurowanie uwierzytelniania

Implementacja OAuth 2.0 na kliencie wykorzystuje wyskakujące okienko, aby monitować użytkownika o zalogowanie się i zatwierdzenie aplikacji. Pierwsze wywołanie gapi.auth.authorize może wywołać blokowanie wyskakujących okienek, ponieważ pośrednio otwiera je. Aby zapobiec uruchamianiu się programu blokującego wyskakujące okienka przy wywołaniach autoryzacji, wywołaj gapi.auth.init (wywołanie zwrotne) podczas ładowania klienta. Dostarczone wywołanie zwrotne zostanie wykonane, gdy biblioteka będzie gotowa do wykonywania wywołań uwierzytelniania.

Domyślam się, że ma to związek z prawdziwą odpowiedzią powyżej, ponieważ wyjaśnia, czy istnieje natychmiastowa odpowiedź, nie wywoła wyskakującego alarmu. „Gapi.auth.init” sprawia, że ​​api następuje natychmiast.

Praktyczne zastosowanie

Zrobiłem mikrousługę uwierzytelniania typu open source przy użyciu paszportu węzła na npm i różnych pakietów paszportów dla każdego dostawcy. Użyłem standardowego przekierowania do strony trzeciej, podając adres URL przekierowania, do którego można wrócić. To było zautomatyzowane, więc mogłem mieć różne miejsca, do których przekierowałem z powrotem podczas logowania / rejestracji i na określonych stronach.

github.com/sebringj/athu

passportjs.org

Wypróbowałem wiele rozwiązań, ale jego jest jedynym, które faktycznie działało dla mnie we wszystkich przeglądarkach

let newTab = window.open(); newTab.location.href = url;

Nie chciałem tworzyć nowej strony, chyba że wywołanie zwrotne powróciło pomyślnie, więc zrobiłem to, aby zasymulować kliknięcie użytkownika:

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);
  });
}

Najłatwiejszym sposobem na pozbycie się tego jest:

1. Nie używaj document.open ().
2. Zamiast tego użyj this.document.location.href = location; gdzie lokalizacja to adres URL do załadowania

Np .:

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

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

To działało bardzo dobrze dla mnie. Twoje zdrowie