相关疑难解决方法(0)

OIDC和PWA(添加到主屏幕)

更新:基本上与Standalone PWA相同的问题会破坏登录但在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应用程序的signin回调中调用它.因此,如果您尝试从iOS主屏幕上打开的Web应用程序登录,它会在Safari中打开OP(oidc提供程序),然后重定向回Web应用程序的URL,但在Safari中不是从主屏幕Web应用程序打开的,因此,您可以获得不同的本地存储空间:

存储中找不到匹配状态

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

编辑:

这是解释问题的叙述.

  • 打开 my.app.com
  • 添加到主屏幕
  • 从主屏幕打开应用程序
  • 单击登录按钮
  • 登录按钮电话 UserManager.signinRedirect()
  • UserManager.signinRedirect() 电话 OidcClient.createSigninRequest()
  • OidcClient.createSigninRequest()在本地存储中存储登录状态并导航以在Androidmy.op.com 查看 打开Chrome选项卡,并在iOS上打开Safarimy.op.commy.op.com
  • 在操作上完成登录过程
  • op重定向到my.app.com/signin-callback.html 这里是问题所在

my.app.com/signin-callback.html主屏幕上打开的应用程序中打开Android ,在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", …
Run Code Online (Sandbox Code Playgroud)

iphone-standalone-web-app openid-connect progressive-web-apps oidc-client-js

6
推荐指数
1
解决办法
475
查看次数