7

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

错误：在 google 帐户选择后，弹出窗口关闭，而没有重定向回我的Test App.

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

错误： 返回到chrome选项卡，在显示加载指示器时要求选择谷歌帐户，然后就挂在那里。

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

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

注意 2：如果我从主屏幕卸载应用程序并纯粹在浏览器中启动，则该错误也会发生，signInWithPopup(Facebookprovider)并且OAuth 流程的签名工作正常。signInWithPopup(Twitterprovider)

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

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

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

在此处输入图像描述

4

3 回答 3

2

阅读谷歌文档：

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

使用 Google 提供程序对象向 Firebase 进行身份验证。您可以通过打开一个弹出窗口或重定向到登录页面来提示您的用户使用他们的 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) { .... }
}

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

于 2018-01-08T17:40:48.433 回答
0

您可以在应用程序“显示：独立”的清单中稳定，然后像这样检测启动模式

function isRunningStandalone() {
    return (window.matchMedia('(display-mode: standalone)').matches);
}
...
if (isRunningStandalone()) {
    /* This code will be executed if app is running standalone */
}
于 2018-04-16T14:58:04.480 回答
0

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

于 2018-04-20T22:09:51.410 回答