OIDC和PWA（添加到主屏幕）

Question

更新：基本上與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()將登錄狀態存儲在localstorage中並導航到my.op.com 請參閱 android my.op.com打開Chrome選項卡，在iOS上my.op.com打開Safari
• 在操作上完成登錄過程
• 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但沒有任何變化。

更新：還嘗試設置啟動到完整域，而不僅僅是相對/ ，仍然沒有變化。

Answer 1

我已經遇到過這個問題而且它幫助了我。 看看它是否有幫助 ！