在渐进式网络应用中重定向到Google OAuth流程 [英] redirecting to Google OAuth flow in progressive web app

问题描述

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

I've been working on an app using React and Next.js, currently adding PWA support.

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

Users log in to the app via the Google OAuth flow. I was originally using the JS client which utilizes a pop-up window, but that ran into errors in the PWA. I'm now using the normal OAuth flow by redirecting the user to Google's OAuth URL.

这在浏览器中运行良好。在iOS上的独立PWA中，它会在新的Safari窗口中打开OAuth页面。这意味着OAuth流程在Safari中执行，最后用户在Safari中使用应用程序而不是独立的PWA。

This works fine in the browser. In the standalone PWA on iOS, it opens the OAuth page in a new Safari window. This means that the OAuth flow is carried out in Safari, and at the end the user is left using the app in Safari rather than the standalone PWA.

我正在重定向使用此方法：

I'm redirecting using this method:

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

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

This even looks to be the method everyone recommends to avoid pop-ups when redirecting in your PWA. Has this changed recently? Or is there another method to carry out redirects/OAuth flows inside a standalone progressive web app?

推荐答案

我有一个解决方法可以解决ios safari独立网络应用程序上的oauth重定向问题。

I have a workaround that solve the oauth redirection problem on ios safari standalone web app.

问题是清单元标记，似乎webkit（safari）用旧规范实现它（Chromium有相同的问题并在最近的版本中修复它） 。

The problem is the manifest meta tag, it seems that webkit (safari) implemented it with an old specification (Chromium had the same problem and fix it in a recent version).

我通过修改Google的PWACompat Javascript来解决这个问题：

I based the workaround by modifying Google´s PWACompat Javascript you can get on:

https://github.com/GoogleChromeLabs/pwacompat/blob/master/pwacompat.js

PWAcompat js可用于生成正确的html元标记，以
为单位创建一个带有主页图标和启动画面的独立Web应用程序

PWAcompat js is useful to generate the proper html meta tags, in order to have an standalone web app with home icons and an splash screen

你需要在PwaCompat脚本和manifest元标记中做一个小的hack，方法是用任何标识符替换元标记的名称，例如，在你的index.html中：

You need to do a small "hack" on PwaCompat script and in your "manifest" meta tag by replacing the name of the meta tag by any identifier, for example, in your index.html:

<link rel="pwa-setup" href="manifest.json" >
<script async src="js/pwacompat.js"></script>

manifest.json包含您的标准manifest.json声明，包含您的网站的名称，图标和样式app。

manifest.json contains your standard manifest.json declaration, with the name, icons and styling for your web app.

js / pwacompat.js，包含google的pwacompat.js副本，这个小修改（第36行）：

js/pwacompat.js, contains a copy of pwacompat.js from google, with this small modification ( line 36) :

更改：

const manifestEl = document.head.querySelector('link[rel="manifest"]');

by

const manifestEl = document.head.querySelector('link[rel="pwa-setup"]');

这篇关于在渐进式网络应用中重定向到Google OAuth流程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！