在渐进式网络应用程序中重定向到 Google OAuth 流
Posted
技术标签:
【中文标题】在渐进式网络应用程序中重定向到 Google OAuth 流【英文标题】：redirecting to Google OAuth flow in progressive web app 【发布时间】：2019-01-30 06:24:58 【问题描述】：我一直在使用 React 和 Next.js 开发一个应用程序，目前正在添加 PWA 支持。
用户通过 Google OAuth 流程登录应用。我最初使用的是使用弹出窗口的 JS 客户端，但在 PWA 中遇到了错误。我现在通过将用户重定向到 Google 的 OAuth URL 来使用正常的 OAuth 流程。
这在浏览器中运行良好。在 ios 上的独立 PWA 中，它会在新的 Safari 窗口中打开 OAuth 页面。这意味着 OAuth 流程是在 Safari 中执行的，最终用户只能在 Safari 中使用应用程序，而不是独立的 PWA。
我正在使用这种方法进行重定向：
export function setHref(newLocation: string)
window.location.href = newLocation;
这甚至看起来是每个人都建议在 PWA 中重定向时避免弹出窗口的方法。这最近有变化吗？或者是否有另一种方法可以在独立的渐进式 Web 应用程序中执行重定向/OAuth 流程？
【问题讨论】：
【参考方案1】：我有一个解决方法可以解决 ios safari 独立网络应用程序上的 oauth 重定向问题。
问题是清单元标记，似乎 webkit (safari) 使用旧规范实现了它（Chromium 有同样的问题并在最近的版本中修复它）。
我通过修改 Google 的 PWACompat javascript 来解决这个问题：
https://github.com/GoogleChromeLabs/pwacompat/blob/master/pwacompat.js
PWAcompat js 可用于生成正确的 html 元标记，以便 拥有一个带有主页图标和闪屏的独立网络应用程序
您需要在 PwaCompat 脚本和“清单”元标记中做一个小的“修改”，方法是用任何标识符替换元标记的名称，例如，在 index.html 中：
<link rel="pwa-setup" href="manifest.json" >
<script async src="js/pwacompat.js"></script>
manifest.json 包含您的标准 manifest.json 声明，以及您的网络应用程序的名称、图标和样式。
js/pwacompat.js，包含来自 google 的 pwacompat.js 的副本，进行了小修改（第 36 行）：
改变：
const manifestEl = document.head.querySelector('link[rel="manifest"]');
通过
const manifestEl = document.head.querySelector('link[rel="pwa-setup"]');
其中 pwa-setup 是您放置在元标记上的名称，就是这样，您在同一个独立上下文中解释了 manifest.json 和 oauth 重定向?
更新： 从 IOS 13 及更高版本开始，不再需要此解决方法。无论如何，如果您想保持与 IOS
<script>
var iOS = (/iP(hone|od|ad)/.test(navigator.userAgent));
if (iOS)
var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
var iOSversion = parseInt(v[1], 10);
console.log(iOSversion);
if(iOSversion < 13)
document.querySelector('link[rel="manifest"]').setAttribute("rel", "no-on-ios");
</script>
【讨论】：
我应该在我的manifest.json 中设置什么display？ standalone（我所期望的）不适用于 Firebase Auth (OAuth) - 它重定向到 Safari，但不会重定向回来，并且不记得身份验证 cookie..
是的，您必须设置 display :standalone。您是否更改了清单元标记？您在创建 oauth 客户端时是否将 oauth 方法更改为“重定向”？默认情况下 oauth2 客户端处于弹出模式。
我设置了standalone 我更改了 manifest 和 pwa.js 脚本，根据指令。重定向方法……我查过了，其实你是对的，我没有改，还是设置为signInWithPopup。所以下次我应该尝试重定向看看它是否改变了任何东西。但即使使用popup 作为一种方法，它仍然会“重定向”，它打开了一个新的 safari 窗口。所以，我会再试一次......
Jakemmarsh，因为这是一种解决方法，旨在修复独立网络应用程序上错误的 safari 行为（Chromium 有同样的问题，但谷歌在几个版本前修复了它），确实 chrome 无法解析manifest.json，但不用担心，pwcompat 可以完成这项工作。在 Apple 为其发布错误修复程序之前，我们必须通过这种解决方法生存（我按照苹果指南报告了错误，我仍在等待包含问题修复程序的版本）
干得好！ github.com/firebase/firebase-js-sdk/issues/…【参考方案2】：
目前最好的解决方案是通过pwacompat 破解它。但在 android 上，将 manifest rel 属性更改为“pwa-setup”不符合 webapp 要求，因此不会出现 install to home 弹出窗口。
<link rel="pwa-setup" href="manifest.json" >
<script async src="js/pwacompat.js"></script>
换行#36
const manifestEl = document.head.querySelector('link[rel="pwa-setup"]');
更好的解决方案是识别webapp是在ios还是android上渲染，然后在“runtime”中更改rel属性
<link rel="manifest" href="manifest.json">
<link rel="pwa-setup" href="manifest.json">
<script src="pwacompat.js"></script>
<script>
var iOS = !!navigator.platform && /iPhone|iPod/.test(navigator.platform);
if(iOS)
document.querySelector('link[rel="manifest"]').setAttribute("rel", "no-on-ios");
</script>
【讨论】：
【参考方案3】：我将@Lester 的答案与@Roysh 和更多的答案结合起来，使其在iOS 上更容易被PWA 替换。由于它丢失了清单，它将使用标题作为默认名称，现在打开当前路径而不是清单中的start_url。
<link rel="manifest" href="manifest.webmanifest">
<script>
if (!!navigator.platform && /iP(?:hone|ad|od)/.test(navigator.platform))
document.querySelector(`link[rel="manifest"]`).setAttribute(`rel`, `no-ios`);
document.title = `AppName`; // default app name | simulate short_name
if (`standalone` in window.navigator && window.navigator.standalone && sessionStorage.getItem(`iOS-redirect`) === null)
sessionStorage.setItem(`iOS-redirect`, ``);
window.location = `/`; // simulate start_url
</script>
【讨论】：
我通读了所有线程，复制并粘贴了这个，效果很好！谢谢！一件小事，我将 href 更改为使用 create-react-apps 默认值 - href="%PUBLIC_URL%/manifest.json" 如果有人能快速重复对他/她有用的方法，允许在保存到主屏幕的 iOS 独立网络应用程序中使用带有重定向的 google/fb-login，我将不胜感激。无论我尝试什么解决方案，登录时 PWA 都会离开并且不会返回。以上是关于在渐进式网络应用程序中重定向到 Google OAuth 流的主要内容，如果未能解决你的问题，请参考以下文章