OIDC和PWA（添加到主屏幕）

Question

更新：基本上与Standalone PWA breaks login相同，但是在iOS上出现了问题。

如果您将Web应用程序添加到主屏幕中，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应用程序的登录回调中重新调用该引用。因此，如果您尝试从在iOS主屏幕中打开的Web应用程序登录，它会在Safari中打开OP（oidc提供程序），然后重定向回Web应用程序的URL，但在Safari而不是在从主屏幕打开的Web应用程序中，所以由于不同的本地存储，您会收到以下错误信息：

No matching state found in storage

如果本地存储在相同域名下无法共享，那么您应该如何使用iOS打开的主屏幕Web应用程序进行oidc？或者当重定向回Web应用程序时，如何让iOS重新打开正确的窗口（从主屏幕打开的窗口）？或者如何使iOS在首次导航到OP（oidc提供程序）时永远不离开全屏应用程序？

编辑：

下面是一段叙述来解释这个问题。

• 打开 my.app.com
• 添加到主屏幕
• 从主屏幕打开应用程序
• 单击登录按钮
• 登录按钮调用 UserManager.signinRedirect()
• UserManager.signinRedirect() 调用 OidcClient.createSigninRequest()
• OidcClient.createSigninRequest() 在本地存储中存储登录状态并导航到 my.op.com 查看 在 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"
    }
  ]
}

还移除了scope，但是没有任何行为上的变化。

更新： 也尝试将起始位置设置为完整域名，而不仅仅是相对路径/，但仍然没有变化。

- William Lohan

Answer 1

我已经遇到过这个问题并找到了解决方法。 看看它是否有帮助！

- rodolfocop