google-chrome - 独立模式下的渐进式 Web 应用程序 (PWA) OAuth 错误

Question

在我保存使用 Create React App 构建的 PWA(测试应用程序)之后到主屏幕并在 standalone 中启动应用程序模式开启 安卓使用 Chrome 和 iOS 使用 Safari 。然后在应用程序中我启动 Firebase 方法 signInWithPopup(GoogleProvider)设备询问我是否要使用 Test App 打开操作或安装在设备上的其他浏览器，即 chrome , firefox .如果我选择用我的 Test App 打开弹出窗口打开，我选择了正确的 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) 此外，如果我从主屏幕卸载应用程序并纯粹在浏览器中启动，则 OAuth 流程中的签名工作正常。

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

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

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

Answer 1

阅读谷歌文档:
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”的方法