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.open
lub window.showModalDialog
przed ich blokowaniem?
javascript
popup
modal-dialog
popup-blocker
Pablo Fernandez
źródło
źródło
Odpowiedzi:
Ogólna zasada jest taka, że blokowanie wyskakujących okienek włącza się, jeśli
window.open
lub 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.open
w 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.źródło
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:
natychmiast utwórz puste okienko po akcji użytkownika
Opcjonalnie: dodaj „oczekującą” wiadomość informacyjną. Przykłady:
a) Zewnętrzna strona HTML: zamień powyższy wiersz na
b) Tekst: dodaj następujący wiersz poniżej powyższego:
wypełnij go treścią, gdy jest gotowy (na przykład, gdy zostanie zwrócone połączenie AJAX)
Wzbogać połączenie
window.open
z 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).
_blank
Nieco pomaga na mailto przekierowanie do pracy na urządzeniach mobilnych, btw.Twoje doświadczenie? Jakiś sposób, aby to poprawić?
źródło
Whatever it is you intend to do, there is a better way than a popup window
lol? Dziwne uogólnienie. Klient chciałby, aby strona, na której się uwierzytelnił, pozostała otwarta, a nowa witryna / strona docelowa po uwierzytelnieniu otwierała się w nowej karcie. Tak, nie mój pomysł na doskonałe wrażenia użytkownika ... ale wydaje się rozsądnyimportantStuff.close
aby zamknąć nową kartę i podać i zaalarmować na oryginalnej stronie.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:
przeglądarka internetowa:
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.
źródło
const tab = window.open(); observable.subscribe(dataUrl => tab.location.href = dataUrl);
.then
on-a i dlatego tak się pogubiłem: / SRY ...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:
jeśli wyskakujące okienko jest zablokowane, window.open zwróci wartość null. Więc funkcja zwróci false.
Jeśli wyskakujące okienko się nie otworzy, możesz:
źródło
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
źródło
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;
źródło
url
? nie jest przypisany.http://example.com
window.open()
nie można programowo otworzyć nowego okna i jeśli zajdzie taka potrzeba, ta odpowiedź jest jedną z opcji. Za pomocąnewTab
zmiennej, do której się odwołujemy,window.open()
a później możemy ją wywołać, wstawićurl
potrzebny, w moim przypadku adres URL jakiegoś obiektu blob, a nowa karta zostanie otwarta na podanym adresie 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:
źródło
Najłatwiejszym sposobem na pozbycie się tego jest:
Np .:
To działało bardzo dobrze dla mnie. Twoje zdrowie
źródło