相关疑难解决方法(0)

我一直在使用React和Next.js开发应用程序,目前正在添加PWA支持.

用户通过Google OAuth流程登录该应用.我最初使用的是JS客户端,它使用弹出窗口,但在PWA中遇到了错误.我现在通过将用户重定向到Google的OAuth网址来使用正常的OAuth流程.

这在浏览器中工作正常.在iOS上的独立PWA中,它会在新的Safari窗口中打开OAuth页面.这意味着OAuth流程在Safari中执行,最后用户在Safari中使用应用程序而不是独立的PWA.

我正在使用这种方法重定向:

export function setHref(newLocation: string) {
  window.location.href = newLocation;
}

这甚至看起来是每个人都建议在重定向PWA时避免弹出窗口的方法.这最近改变了吗？或者是否有另一种方法可以在独立的渐进式Web应用程序中执行重定向/ OAuth流程？

在我使用Create React App主屏幕保存我的PWA(测试应用程序)之后standalone,使用chrome和iOS使用safari 在Android上以模式启动应用程序.然后在应用程序启动我的方法火力地堡的设备问我,如果我要开的动作或安装在设备即其他浏览器,.如果我选择打开我的弹出窗口,我会选择正确的Google帐户.signInWithPopup(GoogleProvider)Test AppchromefirefoxTest App

错误:在选择Google帐户后,弹出窗口关闭,而不会重定向回我的帐户Test App.

如果我改为signInWithPopup(GoogleProvider)使用chrome浏览器打开Firebase方法,而不是我Test App的弹出窗口打开谷歌帐户选择,并在我选择谷歌帐户后,弹出窗口关闭并重定向回到Test App暂时,然后

错误:chrome在显示加载指示符的同时 指向要求Google帐户选择的标签,然后挂起.

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

注意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每次都选择.

更新:我认为这可能与谷歌浏览器最近从Webview对OAuth的更改有关.

Windows机器上的错误的GIf:注意即使在授权应用程序后,twitter auth的弹出窗口也永远不会关闭,谷歌和脸谱OAuth也会发生同样的事情.