Sto sviluppando un flusso di autenticazione OAuth esclusivamente in JavaScript e voglio mostrare all'utente la finestra "concedi accesso" in un popup, ma viene bloccato.

Come posso impedire che le finestre pop-up create da entrambi window.openo window.showModalDialogvengano bloccate dai blocchi popup dei diversi browser?

La regola generale è che i blocchi popup si attiveranno se window.openinvocati da javascript o simili non vengono richiamati dall'azione diretta dell'utente . Cioè, puoi chiamare window.openin risposta a un clic sul pulsante senza essere colpito dal blocco dei popup, ma se inserisci lo stesso codice in un evento timer verrà bloccato. Anche la profondità della catena di chiamate è un fattore: alcuni browser più vecchi guardano solo il chiamante immediato, i browser più recenti possono tornare indietro per vedere se il chiamante era un clic del mouse, ecc. Mantenerlo il più basso possibile per evitare i blocchi popup.

Sulla base di Jason Sebring 's punta molto utile , e sulle cose coperto qua e là , ho trovato una soluzione perfetta per il mio caso:

Pseudo codice con frammenti Javascript:

1. creare immediatamente un popup vuoto sull'azione dell'utente

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

   Opzionale: aggiungi un messaggio informativo "in attesa". Esempi:

   a) Una pagina HTML esterna: sostituire la riga sopra con

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

   b) Testo: aggiungi la seguente riga sotto quella sopra:

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

2. riempilo di contenuto quando è pronto (ad esempio, quando viene restituita la chiamata AJAX)

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

Arricchisci la chiamata window.opencon tutte le opzioni aggiuntive di cui hai bisogno.

In realtà utilizzo questa soluzione per un reindirizzamento mailto e funziona su tutti i miei browser (Windows 7, Android). Il _blankbit aiuta il reindirizzamento mailto a funzionare su dispositivi mobili, tra l'altro.

La tua esperienza? Qualche modo per migliorare questo?

Inoltre, Swiss Mister Post, nel mio caso il window.open è stato lanciato all'interno di una promessa, che ha attivato il blocco dei popup, la mia soluzione era: in angolare:

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

è così che puoi aprire una nuova scheda usando la risposta promessa e non invocare il blocco popup.

Come buona pratica, penso che sia una buona idea verificare se un popup è stato bloccato e agire nel caso. Devi sapere che window.open ha un valore di ritorno e che il valore potrebbe essere nullo se l'azione non è riuscita. Ad esempio, nel seguente codice:

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

se il popup è bloccato, window.open restituirà null. Quindi la funzione restituirà false.

Ad esempio, immagina di chiamare questa funzione direttamente da qualsiasi collegamento con target="_blank": se il popup viene aperto correttamente, il ritorno falsebloccherà l'azione del collegamento, altrimenti se il popup è bloccato, il ritorno trueconsente il comportamento predefinito (apri la nuova finestra _blank) e continua .

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

In questo modo avrai un popup se funziona e una finestra _blank in caso contrario.

Se il popup non si apre, è possibile:

• apri una finestra vuota come nell'esempio e continua
• apri un popup falso (un iframe all'interno della pagina)
• informare l'utente ("si prega di consentire i popup per questo sito")
• aprire una finestra vuota e quindi informare l'utente ecc.

dall'API JavaScript oauth di Google:

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

Vedi l'area dove si legge:

Impostazione dell'autenticazione

L'implementazione di OAuth 2.0 da parte del client utilizza una finestra popup per richiedere all'utente di accedere e approvare l'applicazione. La prima chiamata a gapi.auth.authorize può attivare i blocchi popup, in quanto apre indirettamente la finestra popup. Per impedire che il blocco popup si attivi nelle chiamate di autenticazione, chiamare gapi.auth.init (callback) quando viene caricato il client. Il callback fornito verrà eseguito quando la libreria è pronta per effettuare chiamate di autenticazione.

Immagino che sia relativo alla vera risposta sopra in come spiega se c'è una risposta immediata, non farà scattare l'allarme popup. Il "gapi.auth.init" lo sta facendo in modo che l'API avvenga immediatamente.

Applicazione pratica

Ho realizzato un microservizio di autenticazione open source utilizzando il passaporto del nodo su npm e i vari pacchetti di passaporto per ciascun provider. Ho usato un approccio di reindirizzamento standard alla terza parte assegnandogli un URL di reindirizzamento a cui tornare. Questo era programmatico, quindi potevo avere diversi posti in cui reindirizzare nuovamente in caso di accesso / iscrizione e su pagine particolari.

github.com/sebringj/athu

passportjs.org

Ho provato diverse soluzioni, ma la sua è l'unica che ha funzionato per me in tutti i browser

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

Non volevo creare la nuova pagina a meno che il callback non fosse tornato correttamente, quindi l'ho fatto per simulare il clic dell'utente:

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

Il modo più semplice per sbarazzarsi di questo è:

1. Non usare document.open ().
2. Utilizzare invece this.document.location.href = location; dove location è l'URL da caricare

Es:

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

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

Questo ha funzionato molto bene per me. Saluti