独立模式下的渐进式 Web 应用程序 (PWA) OAuth 错误答案

【问题标题】：Progressive Web App (PWA) in standalone mode OAuth error独立模式下的渐进式 Web 应用程序 (PWA) OAuth 错误
【发布时间】：2018-04-17 18:31:37
【问题描述】：

在我将使用 Create React App 构建的 PWA（测试应用程序）保存到主屏幕并在 android 上使用 chrome 和 iOS 使用 safari 以 standalone 模式启动应用程序之后.然后在应用程序中，我启动 Firebase 方法signInWithPopup(GoogleProvider)，设备询问我是否要使用Test App 或设备上安装的其他浏览器（即chrome、firefox）打开操作。如果我选择使用Test App 打开弹出窗口，我会选择正确的 Google 帐户。

错误： 选择 google 帐户后，弹出窗口关闭，但从未重定向回我的 Test App。

如果我改为使用 chrome 浏览器而不是我的 Test App 打开 Firebase 方法 signInWithPopup(GoogleProvider)，则会打开弹出窗口以选择 google 帐户，在我选择 google 帐户后，弹出窗口将关闭并重定向回 Test App一会儿，然后

错误： 指向chrome 选项卡，该选项卡在显示加载指示器时要求选择 google 帐户，然后就挂在那里。

没有出现控制台错误或警告。

注意1：如果我使用Version 64.0.3259.0 (Official Build) canary (64-bit)将应用程序添加到Windows 10 x64机器上的主屏幕并作为独立窗口启动，也会出现弹出窗口未关闭并停留在加载中的错误。

注意 2：signInWithPopup(Facebookprovider) 和 signInWithPopup(Twitterprovider) 也会出现该错误 此外，如果我从主屏幕卸载应用程序并纯粹在浏览器中启动，则登录 OAuth 流程可以正常工作。强>

注意 3： 在进一步排除故障后，当 OAuth 弹出窗口中需要用户输入时，似乎更具体地发生了错误。即，例如，如果用户之前通过 Facebook 授予了Test App 权限，则流程工作正常并且弹出窗口关闭。此外，如果仅检测到单个 google 帐户并且之前已授予应用 OAuth 权限，则弹出窗口将正常工作。但是如果设备上存在多个 google 帐户，则用户必须通过 --> 输入选择要登录的帐户，这会再次导致前面提到的错误。并且使用 Twitter OAuth 每次都会发生错误，因为 twitter 弹出窗口要求用户每次都选择 Authorize App。

更新：我相信这可能与 google chrome 最近从 Webview 对 OAuth 的更改有关。

GIf 在 windows 机器上的错误：注意 twitter auth 的弹出窗口永远不会关闭，即使在授权应用程序之后，google 和 facebook OAuth 也会发生同样的事情。

【问题讨论】：

Firebase / angularFire2 v5 authentication issue on mobile的可能重复
我得到了与使用 Ionic 3 构建的 PWA 完全相同的行为。令人失望...
此人找到了使用重定向的解决方法...stackoverflow.com/questions/46261453/…
bugs.chromium.org/p/chromium/issues/detail?id=771418

标签： google-chrome service-worker create-react-app progressive-web-apps sw-precache

【解决方案1】：

好消息，已在 Chrome Canary 中修复 https://bugs.chromium.org/p/chromium/issues/detail?id=771418#c84

【讨论】：

【解决方案2】：

您可以稳定在应用程序“display:standalone”的清单中，然后像这样检测启动模式

function isRunningStandalone() {
    return (window.matchMedia('(display-mode: standalone)').matches);
}
...
if (isRunningStandalone()) {
    /* This code will be executed if app is running standalone */
}

【讨论】：

【解决方案3】：

阅读谷歌文档：

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

使用 Google 提供程序对象向 Firebase 进行身份验证。您可以通过打开一个弹出窗口或重定向到登录页面来提示您的用户使用他们的 Google 帐户登录。在移动设备上首选重定向方法。

所以你有两个选择：

firebase.auth().signInWithPopup(provider)
firebase.auth().signInWithRedirect(provider)

第二个必须在您使用移动设备时使用。

所以问题是：当我遇到移动设备时如何检测？

代码必须类似于：

  if ( isInMobileDevice) {

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

  }
  else {

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

对不起，我仍在寻找将正确值（真/假）放入“isInMobileDevice”的方法

【讨论】：