javascript - 在渐进式网络应用程序中重定向到 Google OAuth 流程

coder 2024-05-08 原文

我一直在使用 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 流程？

最佳答案

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

问题出在 manifest meta 标签上，似乎 webkit (safari) 使用旧规范实现了它(Chromium 有同样的问题并在最新版本中修复了它)。

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

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

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 脚本和您的“ list ”元标记做一个小的“修改”，方法是用任何标识符替换元标记的名称，例如，在您的 index.html 中:

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

manifest.json 包含您的标准 manifest.json 声明，以及您的网络应用程序的名称、图标和样式。

js/pwacompat.js，包含来自谷歌的 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 < 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>

关于javascript - 在渐进式网络应用程序中重定向到 Google OAuth 流程，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51993155/

渐进式渐进 code section manifest javascript oauth google-oauth progressive-web-apps

有关javascript - 在渐进式网络应用程序中重定向到 Google OAuth 流程的更多相关文章

ruby - 将差异补丁应用于字符串/文件 - 2
对于具有离线功能的智能手机应用程序，我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl
ruby-on-rails - Rails 应用程序之间的通信 - 2
我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此
ruby - 无法运行 Rails 2.x 应用程序 - 2
我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r
ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗？ - 2
刚入门rails，开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗？有哪些用例。您如何为Rails应用程序使用应用程序Controller？我不想在那里放太多代码，因为据我了解，每个请求都会调用此Controller。这是真的？最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度，尽管在某些情况下ApplicationContr
ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby 变量的内容？ - 2
我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。最佳答案您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R
ruby - 将 spawn() 的标准输出/标准错误重定向到 Ruby 中的字符串 - 2
我想使用spawn(针对多个并发子进程)在Ruby中执行一个外部进程，并将标准输出或标准错误收集到一个字符串中，其方式类似于使用Python的子进程Popen.communicate()可以完成的操作。我尝试将:out/:err重定向到一个新的StringIO对象，但这会生成一个ArgumentError，并且临时重新定义$stdxxx会混淆子进程的输出。最佳答案如果你不喜欢popen，这是我的方法:r,w=IO.pipepid=Process.spawn(command,:out=>w,:err=>[:child,:out])
ruby-on-rails - 如何在 Gem 中获取 Rails 应用程序的根目录 - 2
是否可以在应用程序中包含的gem代码中知道应用程序的Rails文件系统根目录？这是gem来源的示例:moduleMyGemdefself.included(base)putsRails.root#returnnilendendActionController::Base.send:include,MyGem谢谢，抱歉我的英语不好最佳答案我发现解决类似问题的解决方案是使用railtie初始化程序包含我的模块。所以，在你的/lib/mygem/railtie.rbmoduleMyGemclassRailtie使用此代码，您的模块将在
世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2
无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD
叮咚买菜基于 Apache Doris 统一 OLAP 引擎的应用实践 - 2
导读：随着叮咚买菜业务的发展，不同的业务场景对数据分析提出了不同的需求，他们希望引入一款实时OLAP数据库，构建一个灵活的多维实时查询和分析的平台，统一数据的接入和查询方案，解决各业务线对数据高效实时查询和精细化运营的需求。经过调研选型，最终引入ApacheDoris作为最终的OLAP分析引擎，Doris作为核心的OLAP引擎支持复杂地分析操作、提供多维的数据视图，在叮咚买菜数十个业务场景中广泛应用。作者｜叮咚买菜资深数据工程师韩青叮咚买菜创立于2017年5月，是一家专注美好食物的创业公司。叮咚买菜专注吃的事业，为满足更多人“想吃什么”而努力，通过美好食材的供应、美好滋味的开发以及美食品牌的孵
【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2
在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList()Obt

javascript - 在渐进式网络应用程序中重定向到 Google OAuth 流程

有关javascript - 在渐进式网络应用程序中重定向到 Google OAuth 流程的更多相关文章

随机推荐