Прогрессивное веб-приложение (PWA) в автономном режиме Ошибка OAuth

После того, как я сохранил свое PWA (тестовое приложение), созданное с использованием Create React App на домашний экран и запустил приложение в standalone Режим на Android с использованием Chrome и iOS с использованием Safari. Затем в приложении я запускаю метод Firebase signInWithPopup(GoogleProvider) устройство спрашивает меня, хочу ли я открыть действие с Test App или другие браузеры, установленные на устройстве, т.е. chrome, firefox, Если я выберу, чтобы открыть с моим Test App откроется всплывающее окно, и я выберу правильный аккаунт Google.

Ошибка: после выбора учетной записи Google всплывающее окно закрывается, не перенаправляя обратно на мой Test App,

Если я вместо этого открыть метод Firebase signInWithPopup(GoogleProvider) с chrome браузер а не мой Test App открывается всплывающее окно для выбора учетной записи Google, а после выбора учетной записи Google всплывающее окно закрывается и перенаправляется обратно в Test App на мгновение, а затем

Ошибка: направляет обратно к chrome вкладка где просит гугл аккаунт выбрать при отображении индикатора загрузки и просто там висит.

Нет никаких ошибок консоли или предупреждений, которые появляются.

Примечание 1: ошибка, связанная с тем, что всплывающее окно не закрывается и остается в загрузке, также возникает, если я добавляю приложение на домашний экран на Windows 10 x64 использование машины Version 64.0.3259.0 (Official Build) canary (64-bit) и запустить как отдельное окно.

Примечание 2: ошибка также возникает для signInWithPopup(Facebookprovider) а также signInWithPopup(Twitterprovider) Также, если я удаляю приложение из Homescreen и запускаю исключительно в браузере, подпись в потоке OAuth работает нормально.

Примечание 3: После дальнейшего устранения неполадок кажется, что ошибка более конкретно возникает, когда пользовательский ввод требуется во всплывающем окне OAuth. т.е. если, например, если пользователь ранее дал Test App разрешения через фейсбук, поток работает нормально и всплывающее окно закрывается. Также, если только один google Учетная запись обнаружена, и ранее ей были даны разрешения OAuth приложения, после чего всплывающее окно работает должным образом. Но если на устройстве существует несколько учетных записей Google, то пользователь должен ввести выбор учетной записи для входа в систему -> это снова приводит к ранее упомянутой ошибке. И при использовании Twitter OAuth ошибка возникает каждый раз, потому что всплывающее окно Twitter требует от пользователя выбора Authorize App каждый раз.

ОБНОВЛЕНИЕ: я полагаю, что это может иметь какое-то отношение к недавним изменениям Google Chrome в OAuth из Webview.

Если ошибка на машине с Windows: обратите внимание, что всплывающее окно для проверки подлинности в Твиттере никогда не закрывается, даже после авторизации приложения, то же самое происходит для Google и Facebook OAuth.

введите описание изображения здесь

Источник

3 ответа

Чтение документации Google:

https://firebase.google.com/docs/auth/web/google-signin

Выполните аутентификацию с помощью Firebase, используя объект провайдера Google. Вы можете предложить своим пользователям войти в систему с помощью их учетных записей Google, открыв всплывающее окно или перенаправив на страницу входа. Метод перенаправления является предпочтительным на мобильных устройствах.

Итак, у вас есть 2 варианта:

  1. firebase.auth (). signInWithPopup (поставщик)
  2. firebase.auth (). signInWithRedirect (поставщик)

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

Итак, вопрос: как я могу определить, когда я работаю на мобильном устройстве?

Код должен быть примерно таким:

  if ( isInMobileDevice) {

   firebase.auth().getRedirectResult().then(function(result) { .... }

  }
  else {

  firebase.auth().signInWithPopup(provider).then(function(result) { .... }
}

Извините, я все еще ищу способ получить правильное значение (true/false) в " isInMobileDevice "

Источник

Вы можете сделать это в манифесте приложения "display:standalone", а затем определить режим запуска следующим образом

function isRunningStandalone() {
    return (window.matchMedia('(display-mode: standalone)').matches);
}
...
if (isRunningStandalone()) {
    /* This code will be executed if app is running standalone */
}
Источник

Хорошие новости, исправленные в Chrome Canary https://bugs.chromium.org/p/chromium/issues/detail?id=771418

Источник
Другие вопросы по тегам