Saya sedang mengembangkan alur otentikasi OAuth murni dalam JavaScript dan saya ingin menunjukkan kepada pengguna jendela "beri akses" dalam sembulan, tetapi diblokir.

Bagaimana saya bisa mencegah jendela sembulan yang dibuat oleh window.openatau window.showModalDialogdiblokir oleh pemblokir pop-up browser yang berbeda?

Aturan umum adalah bahwa pemblokir popup akan terlibat jika window.openatau serupa dipanggil dari javascript yang tidak dipanggil oleh tindakan pengguna langsung . Artinya, Anda dapat menelepon window.opensebagai respons terhadap klik tombol tanpa terkena popup blocker, tetapi jika Anda memasukkan kode yang sama dalam acara penghitung waktu, itu akan diblokir. Kedalaman rantai panggilan juga merupakan faktor - beberapa browser lama hanya melihat penelepon langsung, browser yang lebih baru dapat mundur sedikit untuk melihat apakah penelepon penelepon adalah klik mouse, dll. Simpan semurah mungkin untuk menghindari pemblokir popup.

Berdasarkan Jason Sebring Ini tip yang sangat berguna , dan pada hal-hal yang dibahas di sini dan di sana , saya menemukan solusi sempurna untuk kasus saya:

Kode semu dengan cuplikan Javascript:

1. segera buat popup kosong pada aksi pengguna

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

   Opsional: tambahkan beberapa pesan info "menunggu". Contoh:

   a) Halaman HTML eksternal: ganti baris di atas dengan

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

   b) Teks: tambahkan baris berikut di bawah yang di atas:

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

2. isi dengan konten saat siap (ketika panggilan AJAX dikembalikan, misalnya)

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

Perkaya panggilan untuk window.open dengan opsi tambahan apa pun yang Anda butuhkan.

Saya sebenarnya menggunakan solusi ini untuk pengalihan mailto, dan itu berfungsi pada semua browser saya (windows 7, Android). Itu_blank bit membantu untuk mailto redirection untuk bekerja pada ponsel, btw.

Pengalamanmu? Adakah cara untuk meningkatkan ini?

Selain posting Swiss Mister, dalam kasus saya window.open diluncurkan di dalam janji, yang mengaktifkan pemblokir popup, solusi saya adalah: dalam sudut:

$scope.gotClick = function(){

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

    }
  );
};

layanan browser:

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

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

ini adalah bagaimana Anda dapat membuka tab baru menggunakan respons janji dan tidak memanggil pemblokir popup.

Sebagai praktik yang baik, saya pikir itu ide yang baik untuk menguji apakah popup diblokir dan mengambil tindakan untuk berjaga-jaga. Anda perlu tahu bahwa window.open memiliki nilai kembali, dan nilai itu mungkin nol jika tindakan gagal. Misalnya, dalam kode berikut:

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

jika popup diblokir, window.open akan mengembalikan nol. Jadi fungsinya akan mengembalikan false.

Sebagai contoh, bayangkan memanggil fungsi ini langsung dari tautan apa pun dengan target="_blank": jika popup berhasil dibuka, kembali falseakan memblokir tindakan tautan, jika tidak, popup diblokir, kembali trueakan membiarkan perilaku default (buka jendela _blank baru) dan lanjutkan .

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

Dengan cara ini Anda akan memiliki popup jika berfungsi, dan jendela _blank jika tidak.

Jika popup tidak terbuka, Anda dapat:

• buka jendela kosong seperti pada contoh dan lanjutkan
• buka sembulan palsu (iframe di dalam laman)
• informasikan kepada pengguna ("perkenankan popup untuk situs ini")
• buka jendela kosong lalu beri tahu pengguna dll.

dari API JavaScript Google oauth:

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

Lihat area di mana tertulis:

Menyiapkan Otentikasi

Implementasi klien dari OAuth 2.0 menggunakan jendela sembulan untuk meminta pengguna untuk masuk dan menyetujui aplikasi. Panggilan pertama ke gapi.auth.authorize dapat memicu pemblokir popup, karena membuka jendela popup secara tidak langsung. Untuk mencegah pemblokir popup memicu panggilan auth, panggil gapi.auth.init (panggilan balik) saat klien memuat. Callback yang disediakan akan dieksekusi ketika perpustakaan siap untuk melakukan panggilan auth.

Saya kira itu berkaitan dengan jawaban nyata di atas dalam cara menjelaskan jika ada tanggapan langsung, itu tidak akan trip alarm popup. "Gapi.auth.init" membuatnya sehingga api segera terjadi.

Aplikasi praktis

Saya membuat microservice otentikasi open source menggunakan paspor simpul pada npm dan berbagai paket paspor untuk setiap penyedia. Saya menggunakan pendekatan pengalihan standar ke pihak ke-3 yang memberikan URL pengalihan untuk kembali ke. Ini terprogram sehingga saya dapat memiliki tempat yang berbeda untuk mengarahkan kembali ke jika login / mendaftar dan pada halaman tertentu.

github.com/sebringj/athu

passportjs.org

Saya mencoba beberapa solusi, tetapi hanya dia yang benar-benar bekerja untuk saya di semua browser

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

Saya tidak ingin membuat halaman baru kecuali panggilan balik berhasil kembali, jadi saya melakukan ini untuk mensimulasikan klik pengguna:

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

Cara termudah untuk menghilangkan ini adalah dengan:

1. Jangan gunakan document.open ().
2. Alih-alih gunakan this.document.location.href = lokasi; di mana lokasi adalah url yang akan dimuat

Mis:

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

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

Ini bekerja sangat baik untuk saya. Bersulang