Я разрабатываю поток аутентификации OAuth исключительно на JavaScript и хочу показать пользователю окно «Предоставить доступ» во всплывающем окне, но оно блокируется.

Как я могу предотвратить всплывающие окна, созданные window.openили window.showModalDialogблокируемые всплывающими окнами в разных браузерах?

Общее правило заключается в том, что блокировщики всплывающих окон включаются, если window.openили аналогичный код вызывается из JavaScript, который не вызывается прямым действием пользователя . То есть, вы можете позвонить window.openв ответ на нажатие кнопки, не блокируя всплывающие окна, но если вы добавите тот же код в событие таймера, он будет заблокирован. Глубина цепочки вызовов также является фактором - некоторые старые браузеры смотрят только на непосредственного абонента, новые браузеры могут немного откатить назад, чтобы увидеть, был ли вызывающий абонент щелчком мыши и т. Д. Держите его как можно более мелким, чтобы избежать блокировки всплывающих окон.

На основе Jason Sebring «S очень полезный совет , и на вещи , покрытые здесь и там , я нашел идеальное решение для моего случая:

Псевдокод с фрагментами Javascript:

1. немедленно создать пустое всплывающее окно на действие пользователя

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

   Необязательно: добавьте некоторое «ожидающее» информационное сообщение. Примеры:

   а) Внешняя HTML-страница: замените вышеуказанную строку на

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

   б) Текст: добавьте следующую строку ниже приведенной выше:

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

2. заполните его содержимым, когда будете готовы (например, когда будет возвращен вызов AJAX)

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

Обогатите вызов window.openлюбыми дополнительными опциями, которые вам нужны.

Я на самом деле использую это решение для перенаправления почты, и оно работает во всех моих браузерах (Windows 7, Android). Этот _blankбит помогает перенаправлению почты на мобильный телефон, кстати.

Твой опыт? Есть ли способ улучшить это?

В дополнение к сообщению Swiss Mister, в моем случае window.open был запущен в обещании, которое включало блокировку всплывающих окон, мое решение было: in 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;
}

это то, как вы можете открыть новую вкладку, используя ответ на обещание и не вызывая блокировщик всплывающих окон.

Как хорошая практика, я думаю, что это хорошая идея, чтобы проверить, было ли заблокировано всплывающее окно и принять меры в случае. Вы должны знать, что window.open имеет возвращаемое значение, и это значение может быть нулевым, если действие не выполнено. Например, в следующем коде:

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

если всплывающее окно заблокировано, window.open вернет ноль. Так что функция вернет false.

В качестве примера представьте, что вы вызываете эту функцию напрямую из любой ссылки с помощью target="_blank": если всплывающее окно успешно открыто, возвращение falseзаблокирует действие ссылки, в противном случае всплывающее окно заблокирует trueповедение по умолчанию (откройте новое окно _blank) и продолжит работу. ,

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

Таким образом, у вас будет всплывающее окно, если оно работает, и окно _blank, если нет.

Если всплывающее окно не открывается, вы можете:

• откройте пустое окно, как в примере, и продолжайте
• открыть поддельное всплывающее окно (iframe внутри страницы)
• сообщить пользователю («пожалуйста, разрешите всплывающие окна для этого сайта»)
• откройте пустое окно, а затем сообщите пользователю и т. д.

из JavaScript API Google:

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

Смотрите область, где написано:

Настройка аутентификации

Реализация OAuth 2.0 на клиенте использует всплывающее окно, чтобы предложить пользователю выполнить вход и одобрить приложение. Первый вызов gapi.auth.authorize может вызвать блокировку всплывающих окон, так как он косвенно открывает всплывающее окно. Чтобы запретить блокировку всплывающих окон при вызовах аутентификации, вызовите gapi.auth.init (callback) при загрузке клиента. Предоставленный обратный вызов будет выполнен, когда библиотека будет готова выполнить аутентификационные вызовы.

Я бы предположил, что это связано с реальным ответом выше, в том, как он объясняет, если есть немедленный ответ, он не отключит всплывающую тревогу. «Gapi.auth.init» делает так, чтобы API происходил немедленно.

Практическое применение

Я создал микросервис аутентификации с открытым исходным кодом, используя паспорт узла на npm и различные паспортные пакеты для каждого провайдера. Я использовал стандартный подход перенаправления к третьей стороне, предоставляя ей URL перенаправления для возврата. Это было программно, поэтому я мог иметь различные места для перенаправления обратно, если вход / регистрация и на определенных страницах.

github.com/sebringj/athu

passportjs.org

Я пробовал несколько решений, но это единственное, которое действительно работает для меня во всех браузерах

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

Я не хотел создавать новую страницу, если обратный вызов не был успешно возвращен, поэтому я сделал это для имитации клика пользователя:

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

Самый простой способ избавиться от этого - это:

1. Не используйте document.open ().
2. Вместо этого используйте this.document.location.href = location; где location это URL для загрузки

Пример:

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

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

Это сработало очень хорошо для меня. ура