OIDC和PWA(添加到主屏幕) [英] OIDC and PWA (add to home screen)

问题描述

更新:与独立PWA中断登录基本相同，但在iOS上.

Update: Basically the same issue as Standalone PWA breaks login but on iOS.

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

If you add a web app to the home screen, Chrome on android shares the local storage with the same domain in the browser. You can test this by going to https://wilfrem.github.io/add_to_homescreen_test/ then adding to home screen and see you have the same id when opened from home screen. (I did Nexus 5x)

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

If you do the same in iOS Safari you get a new id. (i did iPod iOS 12.1.1)

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

The oidc-client-js library sets a session reference in local storage and then recalls that on the web app s signin callback. So if you try to log in from a web app opened from the home screen on iOS, it opens the OP (oidc provider) in Safari, then redirects back the web app's url, but in Safari not the opened from home screen web app, so because of the different local storage you get:

在存储中找不到匹配状态

No matching state found in storage

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

How are you supposed to use oidc with an iOS opened from home screen web app if the local storage isn't shared across the same domain? Or how do I get iOS to reopen the correct window(the one opened from home screen) when redirecting back to the web app? Or how to I get iOS to never leave the fullscreen app when navigating to the OP (oidc provider) in the first place?

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

Here is a narrative to explain the issue.

• 打开my.app.com
• 添加到主屏幕
• 从主屏幕打开应用
• 单击登录按钮
• 登录按钮调用 UserManager.signinRedirect()
• UserManager.signinRedirect()调用 OidcClient.createSigninRequest()
• OidcClient.createSigninRequest()将登录状态存储在本地存储中并导航到my.op.com

• open my.app.com
• add to home screen
• open app from home screen
• click login button
• login button calls UserManager.signinRedirect()
• UserManager.signinRedirect() calls OidcClient.createSigninRequest()
• OidcClient.createSigninRequest() stores signin state in localstorage and navigates to my.op.com see on android my.op.com opens a Chrome tab and on iOS my.op.com opens Safari
• complete signin process on op
• op redirects to my.app.com/signin-callback.html here is the problem

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

On android my.app.com/signin-callback.html opens in the app opened from the home screen, on iOS it stays in Safari. So you get:

在存储中找不到匹配状态

No matching state found in storage

根据所发生的错误，我没有遇到任何错误，完全可以预料到该错误，只是我不知道如何使Safari以与库兼容的方式运行.

I'm not having difficulty with the error, based on what is happening the error is completely expected, I just don't know how to get Safari to behave in a way that will work with the library.

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

If its relevant this is my 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，但行为没有任何变化.

add also removed scope but didn't have any change, in behavior.

更新: 还尝试将开始设置为完整域，而不仅仅是相对的/，仍然没有更改.

update: also tried setting start to full domain, not just relative /, still no change.

推荐答案

我已经遇到了这个问题，它对我有帮助. 看看它是否帮助！

I have already experienced this problem and it has helped me. See if it helps!

这篇关于OIDC和PWA(添加到主屏幕)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！