Estou desenvolvendo um fluxo de autenticação OAuth puramente em JavaScript e quero mostrar ao usuário a janela "conceder acesso" em um pop-up, mas ele é bloqueado.

Como impedir que janelas pop-up criadas por um window.openou window.showModalDialogsejam bloqueadas pelos bloqueadores de pop-up dos diferentes navegadores?

A regra geral é que os bloqueadores de pop-up serão ativados se window.open ou semelhante for invocado no javascript que não é invocado pela ação direta do usuário . Ou seja, você pode chamar window.openem resposta a um clique no botão sem ser atingido pelo bloqueador de pop-ups, mas se você colocar o mesmo código em um evento de timer, ele será bloqueado. A profundidade da cadeia de chamadas também é um fator - alguns navegadores mais antigos olham apenas para o chamador imediato, os navegadores mais novos podem voltar um pouco para ver se o chamador foi um clique do mouse etc. Mantenha-o o mais superficial possível para evitar os bloqueadores de pop-up.

Baseado em Jason Sebring é dica muito útil , e sobre o material coberto aqui e lá , eu encontrei uma solução perfeita para o meu caso:

Pseudo-código com trechos de Javascript:

1. crie imediatamente um pop-up em branco na ação do usuário

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

   Opcional: adicione uma mensagem informativa "em espera". Exemplos:

   a) Uma página HTML externa: substitua a linha acima por

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

   b) Texto: adicione a seguinte linha abaixo da linha acima:

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

2. preencha com conteúdo quando estiver pronto (quando a chamada AJAX for retornada, por exemplo)

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

Enriqueça a chamada para window.open com as opções adicionais necessárias.

Na verdade, eu uso essa solução para redirecionar o mailto e funciona em todos os meus navegadores (Windows 7, Android). o_blank bit ajuda o redirecionamento mailto a funcionar em dispositivos móveis.

Sua experiência? Alguma maneira de melhorar isso?

Além disso, o Swiss Mister post, no meu caso, o window.open foi lançado dentro de uma promessa, que ativou o bloqueador de pop-ups, minha solução foi: em 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;
}

é assim que você pode abrir uma nova guia usando a resposta da promessa e não invocando o bloqueador de pop-ups.

Como boa prática, acho que é uma boa ideia testar se um pop-up foi bloqueado e tomar alguma ação. Você precisa saber que window.open tem um valor de retorno e esse valor pode ser nulo se a ação falhar. Por exemplo, no seguinte 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;
}

se o pop-up estiver bloqueado, window.open retornará nulo. Portanto, a função retornará false.

Como exemplo, imagine chamar essa função diretamente de qualquer link com target="_blank": se o pop-up for aberto com êxito, o retorno falsebloqueará a ação do link; caso contrário, se o pop-up for bloqueado, o retorno truepermitirá o comportamento padrão (abrir nova janela _blank) e continuar .

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

Dessa forma, você terá um pop-up, se funcionar, e uma janela em branco, se não estiver.

Se o pop-up não abrir, você pode:

• abra uma janela em branco como no exemplo e continue
• abra um pop-up falso (um iframe dentro da página)
• informe o usuário ("permita pop-ups neste site")
• abra uma janela em branco e informe o usuário etc.

da API JavaScript oauth do Google:

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

Veja a área onde se lê:

Configurando autenticação

A implementação do cliente do OAuth 2.0 usa uma janela pop-up para solicitar que o usuário entre e aprove o aplicativo. A primeira chamada para gapi.auth.authorize pode acionar bloqueadores de pop-up, pois abre indiretamente a janela pop-up. Para impedir que o bloqueador de pop-ups seja acionado em chamadas de autenticação, chame gapi.auth.init (retorno de chamada) quando o cliente carregar. O retorno de chamada fornecido será executado quando a biblioteca estiver pronta para fazer chamadas de autenticação.

Eu acho que está relacionado à resposta real acima, em como ela explica se existe uma resposta imediata, não dispara o alarme pop-up. O "gapi.auth.init" está fazendo com que a API aconteça imediatamente.

Aplicação prática

Fiz um microsserviço de autenticação de código aberto usando o passaporte do nó no npm e os vários pacotes de passaporte para cada provedor. Usei uma abordagem de redirecionamento padrão para terceiros, fornecendo um URL de redirecionamento para o qual retornar. Isso era programático, então eu poderia ter lugares diferentes para redirecionar para o login / inscrição e em páginas específicas.

github.com/sebringj/athu

passportjs.org

Tentei várias soluções, mas a dele é a única que realmente funcionou para mim em todos os navegadores

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

Eu não queria criar a nova página, a menos que o retorno de chamada retornasse com êxito, por isso fiz isso para simular o clique do usuário:

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

A maneira mais fácil de se livrar disso é:

1. Não use document.open ().
2. Em vez disso, use this.document.location.href = location; onde local é o URL a ser carregado

Ex:

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

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

Isso funcionou muito bem para mim. Felicidades