Tamamen JavaScript'te bir OAuth kimlik doğrulama akışı geliştiriyorum ve kullanıcıya bir açılır pencerede "erişim izni ver" penceresini göstermek istiyorum, ancak engelleniyor.

Nasıl yoluyla oluşturulan pencereler açılır önleyebilir window.openveya window.showModalDialogfarklı tarayıcılarda Pop-up engelleyicileri tarafından bloke edilmesinin?

Genel kural, doğrudan kullanıcı eylemiwindow.open tarafından çağrılmayan javascript'ten çağrılırsa veya benzeri bir durumda açılır pencere engelleyicilerin devreye girmesidir . Yani, pop-up engelleyici tarafından vurulmadan bir düğme tıklamasına yanıt olarak çağırabilirsiniz , ancak aynı kodu bir zamanlayıcı etkinliğine koyarsanız engellenir. Çağrı zincirinin derinliği de bir faktördür - bazı eski tarayıcılar sadece anında arayan kişiye bakar, yeni tarayıcılar arayanın arayan kişinin fare tıklaması vb. Olup olmadığını görmek için biraz geriye doğru hareket edebilir.window.open

Dayanarak Jason Sebring 's çok yararlı ipucu ve şeyler üzerinde örtülü burada ve orada , benim durum için mükemmel bir çözüm bulundu:

Javascript snippet'leri ile sözde kod:

1. kullanıcı işleminde hemen boş bir açılır pencere oluşturun

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

   İsteğe bağlı: "bekleyen" bilgi mesajı ekleyin. Örnekler:

   a) Harici bir HTML sayfası: yukarıdaki satırı

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

   b) Metin: yukarıdakinin altına aşağıdaki satırı ekleyin:

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

2. hazır olduğunda içerikle doldur (örneğin AJAX çağrısı döndüğünde)

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

Çağrıyı ihtiyacınız window.openolan diğer seçeneklerle zenginleştirin .

Aslında bu çözümü bir mailto yönlendirmesi için kullanıyorum ve tüm tarayıcılarımda çalışıyor (Windows 7, Android). _blankBiraz btw mobil çalışma için mailto yönlendirme için yardımcı olur.

Deneyiminiz? Bunu geliştirmenin bir yolu var mı?

Buna ek olarak, Swiss Mister yazı, benim durumumda window.open , bir açılır pencere engelleyiciyi açan bir sözün içinde başlatıldı, benim çözümüm: açısal olarak:

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

bu, söz verilen yanıtı kullanarak ve açılır pencere engelleyiciyi çağırmadan yeni bir sekme açabilirsiniz.

İyi bir uygulama olarak, bir pop-up'ın engellenip engellenmediğini test etmek ve harekete geçmek iyi bir fikirdir . Window.open öğesinin bir dönüş değeri olduğunu ve işlem başarısız olursa bu değerin boş olabileceğini bilmeniz gerekir. Örneğin, aşağıdaki kodda:

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

açılır pencere engellenirse, window.open null değerini döndürür. Böylece işlev false değerini döndürür.

Örnek olarak, bu işlevi doğrudan herhangi bir bağlantıdan aradığınızı düşünün target="_blank": açılır pencere başarıyla açılırsa, döndürmek falsebağlantı eylemini engelleyecektir, aksi takdirde açılır pencere engellenirse, döndürmek truevarsayılan davranışa (yeni _blank penceresi aç) izin verir ve devam eder .

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

Bu şekilde, eğer çalışırsa bir pop-up penceresi ve eğer değilse bir _blank penceresi olacaktır.

Açılır pencere açılmazsa şunları yapabilirsiniz:

• örnekteki gibi boş bir pencere açın ve devam edin
• sahte bir açılır pencere açın (sayfanın içinde bir iç çerçeve)
• kullanıcıyı bilgilendirin ("lütfen bu site için açılır pencerelere izin verin")
• boş bir pencere açın ve sonra kullanıcıyı bilgilendirin vb.

Google'ın oauth JavaScript API'sından:

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

Okuduğu bölgeye bakın:

Kimlik Doğrulamayı Ayarlama

İstemcinin OAuth 2.0 uygulaması, kullanıcıdan oturum açmasını ve uygulamayı onaylamasını istemek için bir açılır pencere kullanır. Gapi.auth.authorize'a ilk çağrı, açılır pencereyi dolaylı olarak açtığından açılır pencere engelleyicilerini tetikleyebilir. Açılır pencere engelleyicisinin kimlik doğrulama çağrılarını tetiklemesini önlemek için, istemci yüklendiğinde gapi.auth.init (geri arama) öğesini arayın. Kitaplık kimlik doğrulama çağrıları yapmaya hazır olduğunda, sağlanan geri arama yürütülür.

Ben acil bir tepki varsa nasıl açıklar yukarıdaki açıklar ile ilgili, sanırım açılır alarmı trip olmaz. "Gapi.auth.init", API'nin hemen gerçekleşmesini sağlıyor.

Pratik uygulama

Ben npm üzerinde düğüm pasaportu ve her sağlayıcı için çeşitli pasaport paketleri kullanarak bir açık kaynak kimlik doğrulama mikro hizmet yaptı. 3. tarafa standart bir yönlendirme yaklaşımı kullandım ve geri gelmek için bir yönlendirme URL'si verdim. Bu programlı oldu, bu yüzden giriş / kayıt ve belirli sayfalarda yeniden yönlendirmek için farklı yerler olabilir.

github.com/sebringj/athu

passportjs.org

Birden fazla çözüm denedim, ancak tüm tarayıcılarda benim için çalışan tek çözüm bu

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

Geri arama başarıyla geri dönmediği sürece yeni sayfayı yapmak istemedim, bu yüzden kullanıcı tıklamasını simüle etmek için bunu yaptım :

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

Bundan kurtulmanın en kolay yolu:

1. Document.open () öğesini kullanmayın.
2. Bunun yerine this.document.location.href = location; yüklenecek URL nerede

Örn:

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

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

Bu benim için çok işe yaradı. Şerefe