OIDC和PWA(添加到主屏幕)

时间:2018-12-27 17:46:38

标签: progressive-web-apps oidc iphone-standalone-web-app oidc-client-js

更新:与Standalone PWA breaks login基本上相同,但在iOS上。

如果您将网络应用添加到主屏幕,则Android上的Chrome浏览器会与浏览器中的同一域共享本地存储。您可以通过以下方法进行测试:转到https://wilfrem.github.io/add_to_homescreen_test/,然后添加到主屏幕,并从主屏幕打开时看到相同的ID。 (我使用的是Nexus 5x)

如果您在iOS Safari中执行相同的操作,则会获得新的ID。 (我使用的是iPod iOS 12.1.1)

oidc-client-js库在本地存储中设置会话引用,然后在Web应用程序上调用该引用 s登录回调。因此,如果您尝试通过从iOS的主屏幕打开的网络应用登录,则会在Safari中打开OP(oidc提供程序),然后重定向回该网络应用的网址,但在Safari中,不是从主屏幕打开的网络应用,因此,由于本地存储不同,您可以获得:

  

在存储中找不到匹配状态

如果未在同一域中共享本地存储,应该如何在从主屏幕Web应用程序打开的iOS上使用oidc?还是当重定向回Web应用程序时,如何使iOS重新打开正确的窗口(从主屏幕打开的窗口)?还是首先让我导航到OP(oidc提供程序)时如何使iOS永不离开全屏应用程序?

编辑:

这里有一个叙述来解释这个问题。

  • 打开my.app.com
  • 添加到主屏幕
  • 从主屏幕打开应用
  • 单击登录按钮
  • 登录按钮调用UserManager.signinRedirect()
  • UserManager.signinRedirect()呼叫OidcClient.createSigninRequest()
  • OidcClient.createSigninRequest()将登录状态存储在本地存储中,并导航至my.op.com see 在Android my.op.com上打开Chrome标签,在iOS my.op.com上打开Safari
  • 在op上完成登录过程
  • op重定向到my.app.com/signin-callback.html 这是问题所在

在android my.app.com/signin-callback.html上,从主屏幕打开的应用中打开,在iOS上,它保留在Safari中。这样您就会得到:

  

在存储中找不到匹配状态

基于所发生的错误,我没有遇到任何错误,完全可以预期该错误,但我只是不知道如何使Safari以与库兼容的方式运行。

如果相关,这是我的manifest.json

{
  "name": "omitted",
  "short_name": "omitted",
  "theme_color": "#omitted",
  "background_color": "#omitted",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "omitted",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "omitted",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

add还删除了scope,但在行为上没有任何变化。

更新: 还尝试将开始设置为完整域,而不仅仅是相对/,仍然没有变化。

1 个答案:

答案 0 :(得分:0)

我已经遇到了这个问题,对我有帮助。 看看是否helps