渐进式Web应用程序（PWA）处于独立模式OAuth错误 [英] Progressive Web App (PWA) in standalone mode OAuth error

问题描述

将我使用创建React应用程序构建的PWA（测试应用程序）保存到主屏幕后，并在独立模式在 android 上使用chrome和 iOS 使用Safari浏览器。然后在应用程序中启动Firebase方法 signInWithPopup（GoogleProvider）设备询问我是否打算使用测试应用程序或其他安装在设备上的浏览器，例如 chrome ， firefox 。如果我选择使用测试应用程序打开，弹出窗口将打开，并选择正确的Google帐户。

错误：在Google帐户选择后，弹出窗口会关闭而不会重定向到我的测试应用程序。

如果我用 chrome 打开Firebase方法 signInWithPopup（GoogleProvider） code>浏览器，而不是我的测试应用程序弹出窗口打开用于Google帐户选择，当我选择Google帐户后弹出窗口关闭并重定向回到测试应用程序然后



错误：指向 chrome 标签在哪里要求谷歌帐户选择，同时显示一个加载指标，并挂在那里。





没有出现控制台错误或警告。注意1：如果我将应用添加到主屏幕的<$ c $中，弹出不会关闭并停留在加载中的错误也会发生。 c> Windows 10 x64 使用版本64.0.3259.0（官方版本）canary（64位）的机器，并作为独立窗口启动。 注意2： signInWithPopup（Facebookprovider）和<$ c $ c> signInWithPopup（Twitterprovider） 另外如果我从主屏幕卸载应用程序并纯粹在浏览器中启动，OAuth流程中的签名就可以正常工作。

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

更新：我认为这可能与Google Chrome最近对Webview中的OAuth所做的更改有关。

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

解决方案

<阅读Google文档：

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

使用Google对Firebase进行身份验证提供者对象。您可以提示您的用户使用其Google帐户登录，方法是打开弹出式窗口或重定向到登录页面。在移动设备上首选重定向方式。

所以你有两个选择：

1. firebase.auth（）。signInWithPopup（provider）


2. firebase.auth（）。signInWithRedirect（provider）

当您进入移动设备时，必须使用第二种。

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

代码必须是这样的：

  if（isInMobileDevice）{
 
 firebase.auth（）。getRedirectResult（）。then（function（result）{....} 
 
} 
 else {
 
 firebase.auth（）。signInWithPopup（provider）.then（function（result）{....} 
} 
  
 
 
对不起，我仍然在寻找正确的值（真/假）到 isInMobileDevice 的方式
 
After I saved my PWA (Test App) built using Create React App to homescreen and launched the app in standalone mode on android using chrome and iOS using safari. Then in the app I initiate Firebase method signInWithPopup(GoogleProvider) the device asks me if I want to open the action with Test App or other browsers installed on device i.e chrome, firefox. If I select to open with my Test App the popup opens and I select the correct Google account. 

Error: After the google account selection the popup closes without ever redirecting back to my Test App. 

If I instead to open the Firebase method signInWithPopup(GoogleProvider) with chrome browser and not my Test App the popup opens for google account selection and after I select the google account the popup closes and redirects back to the Test App momentarily and then 

Error:  directs back to chrome tab where is asks for google account to select while showing a loading indicator, and just hangs there. 

There are no console error or warnings that come up . 

Note 1: The error of popup not closing and staying in loading also occurs if I add the App to homescreen on a Windows 10 x64 machine using Version 64.0.3259.0 (Official Build) canary (64-bit) and launch as a standalone window. 

Note 2: The error also occurs for signInWithPopup(Facebookprovider) and signInWithPopup(Twitterprovider) Also If I uninstall app from Homescreen and launch purely in browser the signing in OAuth flow works fine. 

Note 3: After further troubleshooting it seems the error more specifically occurs when user input is required in the OAuth popup. 
i.e If for example if user has previously given the Test App permissions through Facebook, the flow works fine and the popup closes. Also if only a single google account is detected and it has previously given app OAuth permissions then the popup works as it should. But If multiple google accounts exists on device then the user has to input a selection of which account to sign in through  --> this leads to the previously mentioned error again. And using Twitter OAuth the error occurs every-time because twitter popup requires user to select Authorize App every-time.     

UPDATE: I believe this may have something to do with google chrome recent changes to OAuth from Webview.  

GIf of the error on windows machine: notice the popup for twitter auth never closes, even after authorizing the app, same thing occurs for google and facebook OAuth. 

解决方案
Reading Google documentation:

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

Authenticate with Firebase using the Google provider object. You can prompt your users to sign in with their Google Accounts either by opening a pop-up window or by redirecting to the sign-in page. The redirect method is preferred on mobile devices. 

So you have 2 options:

firebase.auth().signInWithPopup(provider)
firebase.auth().signInWithRedirect(provider)
The second must be used when you are into a mobile device.

So the question is:  How I detect when I running into a mobile device ?

Code must be something like:
  if ( isInMobileDevice) {

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

  }
  else {

  firebase.auth().signInWithPopup(provider).then(function(result) { .... }
}
Sorry, Im still searching the way to get the correct value (true/false) into "isInMobileDevice"

                        
这篇关于渐进式Web应用程序（PWA）处于独立模式OAuth错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！