Estoy desarrollando un flujo de autenticación OAuth puramente en JavaScript y quiero mostrarle al usuario la ventana "conceder acceso" en una ventana emergente, pero se bloquea.

¿Cómo puedo evitar que las ventanas emergentes creadas por cualquiera window.openo que window.showModalDialogsean bloqueadas por los bloqueadores de ventanas emergentes de los diferentes navegadores?

La regla general es que los bloqueadores de ventanas emergentes se activarán si window.opense invoca o similar desde JavaScript que no es invocado por la acción directa del usuario . Es decir, puede llamar window.openen respuesta a un clic en el botón sin ser golpeado por el bloqueador de ventanas emergentes, pero si coloca el mismo código en un evento de temporizador, se bloqueará. La profundidad de la cadena de llamadas también es un factor: algunos navegadores antiguos solo miran a la persona que llama inmediatamente, los navegadores más nuevos pueden retroceder un poco para ver si la persona que llamó fue un clic del mouse, etc. Manténgalo lo más superficial posible para evitar los bloqueadores de ventanas emergentes.

Sobre la base de Jason Sebring 's consejo muy útil , y en las cosas cubiertos aquí y allí , he encontrado una solución perfecta para mi caso:

Pseudocódigo con fragmentos de Javascript:

1. crear inmediatamente una ventana emergente en blanco en la acción del usuario

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

   Opcional: agregue algún mensaje de información "en espera". Ejemplos:

   a) Una página HTML externa: reemplace la línea anterior con

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

   b) Texto: agregue la siguiente línea debajo de la anterior:

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

2. llénelo con contenido cuando esté listo (cuando se devuelve la llamada AJAX, por ejemplo)

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

Enriquezca la llamada window.opencon cualquier opción adicional que necesite.

De hecho, uso esta solución para una redirección de mailto, y funciona en todos mis navegadores (Windows 7, Android). El _blankbit ayuda a que la redirección de mailto funcione en dispositivos móviles, por cierto.

¿Tu experiencia? ¿Alguna forma de mejorar esto?

Además, la publicación Swiss Mister, en mi caso, el window.open se lanzó dentro de una promesa, que activó el bloqueador de ventanas emergentes, mi solución fue: en angular:

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

así es como puede abrir una nueva pestaña utilizando la respuesta de promesa y no invocando el bloqueador de ventanas emergentes.

Como buena práctica, creo que es una buena idea probar si una ventana emergente fue bloqueada y tomar medidas por si acaso. Debe saber que window.open tiene un valor de retorno, y ese valor puede ser nulo si la acción falla. Por ejemplo, en el siguiente código:

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

si la ventana emergente está bloqueada, window.open devolverá nulo. Entonces la función devolverá falso.

Como ejemplo, imagine llamar a esta función directamente desde cualquier enlace con target="_blank": si la ventana emergente se abre con éxito, el retorno falsebloqueará la acción del enlace; de ​​lo contrario, si la ventana emergente está bloqueada, el retorno truepermitirá el comportamiento predeterminado (abrir una nueva ventana en blanco) y continuar .

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

De esta manera, tendrá una ventana emergente si funciona, y una ventana _blank si no.

Si la ventana emergente no se abre, puede:

• abra una ventana en blanco como en el ejemplo y continúe
• abrir una ventana emergente falsa (un iframe dentro de la página)
• informar al usuario ("permita ventanas emergentes para este sitio")
• abra una ventana en blanco y luego informe al usuario, etc.

de la API de JavaScript oauth de Google:

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

Vea el área donde se lee:

Configuración de autenticación

La implementación del cliente de OAuth 2.0 utiliza una ventana emergente para solicitar al usuario que inicie sesión y apruebe la aplicación. La primera llamada a gapi.auth.authorize puede activar bloqueadores de ventanas emergentes, ya que abre la ventana emergente indirectamente. Para evitar que el bloqueador de ventanas emergentes se active en llamadas de autenticación, llame a gapi.auth.init (devolución de llamada) cuando se carga el cliente. La devolución de llamada suministrada se ejecutará cuando la biblioteca esté lista para realizar llamadas de autenticación.

Supongo que está relacionado con la respuesta real anterior en cómo explica que si hay una respuesta inmediata, no activará la alarma emergente. El "gapi.auth.init" está haciendo que la API ocurra de inmediato.

Aplicación práctica

Hice un microservicio de autenticación de código abierto usando el pasaporte de nodo en npm y los diversos paquetes de pasaportes para cada proveedor. Utilicé un enfoque de redireccionamiento estándar para la tercera parte, dándole una URL de redireccionamiento para volver. Esto fue programático, por lo que podría tener diferentes lugares para redirigir de nuevo si inicio de sesión / registro y en páginas particulares.

github.com/sebringj/athu

passportjs.org

Probé varias soluciones, pero esta es la única que realmente funcionó para mí en todos los navegadores.

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

No quería hacer la nueva página a menos que la devolución de llamada devuelve correctamente, así que hice esto para simular el clic del usuario:

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

La forma más fácil de deshacerse de esto es:

1. No use document.open ().
2. En su lugar, use this.document.location.href = location; donde ubicación es la url que se cargará

Ej:

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

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

Esto funcionó muy bien para mí. Salud