Обнаружить ошибку: "popup_blocked_by_browser" для Google auth2 в JavaScript

Question

После долгих поисков не нашел решения, как отловить ошибку блокировщика всплывающих окон для Google auth2.

получение ошибки в консоли: "popup_blocked_by_browser". все, что я хочу, это сказать пользователю, что всплывающее окно должно быть включено для аутентификации.

Сэмплы, использующие window.open(), не годятся, так как открывают бесполезное окно Как я вижу, много людей ищут это.

Любой совет?

Answer 1

В заключение!! Метод signIn() использует JS Promise. Таким образом, код может быть использован:

gapi.auth2.getAuthInstance().signIn().then(function(){}, function(error){ if (error) alert('please allow popup for this app')})

Надеюсь, это поможет!

Answer 2

Была такая же проблема. Кажется, браузер (ы) (или, по крайней мере, Chrome) будет блокировать любой вызов "window.open", который он был вызван не как часть взаимодействия с пользователем.

Обратитесь сюда для более глубокого объяснения.

__

Раньше у меня был следующий код внутри слушателя события click:

gapi.load('auth2', function() {
  var auth2 = gapi.auth2.init({
    client_id: '.apps.googleusercontent.com',
    fetch_basic_profile: true,
    scope: 'profile'
  });
  auth2.signIn()
    .then(function() {
      var profile = auth2.currentUser.get().getBasicProfile();
      ... 
    })
    .catch(function(err) { ... });
});

Обратите внимание на асинхронный способ загрузки 'auth2', как гласит Google Documents.

Я изменил это на:

// way earlier, before click event can happen
// we call the gapi.load method.
gapi.load('auth2', function() {});

Затем, внутри обработчика события клика, мы можем сделать:

var auth2 = gapi.auth2.init({
    client_id: '.apps.googleusercontent.com',
    fetch_basic_profile: true,
    scope: 'profile'
  });
  auth2.signIn()
    .then(function() { ... })
    .catch(function(err) { ... });

... так что браузер не блокирует всплывающее окно входа в Google

Answer 3

Для меня я изменил метод init, чтобы иметь функцию обратного вызова (пустую)... Вот как:

Неверно (всплывающее окно заблокировано браузером) (функция обратного вызова отсутствует):

.init({ client_id: main.clientId })

Правильная работа, как шарм:

.init({ client_id: main.clientId, () => { } })

Answer 4

В вашем конструкторе (сервисе) или ngOnInit (для компонента) сделайте следующее:

 googleAuthService.getAuth().subscribe(
  (auth) => {
    this.googleAuth = auth;
  });

Затем, в вашей функции входа в систему, вызовите:

    this.googleAuth.signIn()
  .then((user) => {
      this.signInSuccessHandler(user as GoogleUser);
    },
    (error) => console.error(error));