web:PWA 安装支持(manifest + iOS meta + service worker)+ PKCE 改 localStorage
让 web 前端可「添加到主屏幕」以独立窗口启动——iOS 上免证书的类原生体验(也使 Android/桌面出现安装提示)。 - site.webmanifest 补全可安装字段:id / start_url / scope / description / orientation;icons 拆出独立 any 与 maskable 条目。 - index.html 加 iOS 独立窗口 meta:apple-mobile-web-app-capable / status-bar-style / title + application-name(旧版 iOS 仍读这些才无 Safari chrome 启动)。 - public/sw.js(新):仅缓存同源静态壳,**绝不拦截 /api/***(SSE /api/hub/events、剪贴板、信令、中继需要实时不缓冲的网络连接,直接放行);跨源(字体/CDN)也放行。导航走 network-first(新部署即取新 HTML),静态资源 stale-while-revalidate。cdrop 离线无意义,故此 SW 只为可安装 + 秒开壳。 - main.tsx:SW 注册仅在浏览器 + prod;dev 下干扰 Vite HMR、桌面壳(Wails WebView,wails:// / loopback origin)SW 行为不可靠,故 isDesktop() 跳过。 - auth.ts:PKCE verifier / state 从 sessionStorage 改 localStorage。iOS 独立 PWA 可能在独立上下文跑完 OIDC 往返、回跳时重启 PWA 而清空 sessionStorage,导致 verifier 丢失登录失败;localStorage 跨上下文存活。verifier 在 callback 即消费并删除、且无配对 code 无用,落盘窗口的安全代价可忽略。
This commit is contained in:
@@ -64,9 +64,15 @@ export async function fetchAuthConfig(): Promise<AuthConfig>
|
||||
const PKCE_VERIFIER_KEY = "cdrop.pkce_verifier";
|
||||
const OAUTH_STATE_KEY = "cdrop.oauth_state";
|
||||
|
||||
// loginProd kicks off OIDC PKCE: generate verifier+challenge+state, stash the
|
||||
// secrets in sessionStorage, navigate the browser to the provider's
|
||||
// /authorize endpoint. The callback page completes the flow.
|
||||
// loginProd kicks off OIDC PKCE: generate verifier+challenge+state, stash them
|
||||
// in localStorage, navigate the browser to the provider's /authorize endpoint.
|
||||
// The callback page completes the flow.
|
||||
//
|
||||
// localStorage (not sessionStorage): a standalone PWA on iOS may run the
|
||||
// provider round-trip in a separate context and relaunch the PWA on the redirect
|
||||
// back, which wipes sessionStorage and breaks login. localStorage survives that.
|
||||
// The verifier is consumed + removed immediately on callback and is useless
|
||||
// without the matching auth code, so persisting it for the round-trip is fine.
|
||||
export async function loginProd(): Promise<void>
|
||||
{
|
||||
const cfg = await fetchAuthConfig();
|
||||
@@ -83,8 +89,8 @@ export async function loginProd(): Promise<void>
|
||||
const challenge = await sha256Base64url(verifier);
|
||||
const state = generateRandomBase64url(16);
|
||||
|
||||
sessionStorage.setItem(PKCE_VERIFIER_KEY, verifier);
|
||||
sessionStorage.setItem(OAUTH_STATE_KEY, state);
|
||||
localStorage.setItem(PKCE_VERIFIER_KEY, verifier);
|
||||
localStorage.setItem(OAUTH_STATE_KEY, state);
|
||||
|
||||
const params = new URLSearchParams({
|
||||
client_id: cfg.client_id,
|
||||
@@ -111,7 +117,7 @@ interface ExchangeResp
|
||||
// proxy, and stamps the store with the user identity.
|
||||
//
|
||||
// Idempotent:若 store 中已有 user + accessToken(典型场景:useEffect 在 React
|
||||
// 渲染管线中重入,首次已成功 setAuth + 消耗 sessionStorage,二次入场不能再被
|
||||
// 渲染管线中重入,首次已成功 setAuth + 消耗 localStorage,二次入场不能再被
|
||||
// "PKCE verifier missing" / "state mismatch" 当作失败处理)→ 当作 noop 直接
|
||||
// resolve,由上层 navigate 接管。
|
||||
export async function completeOAuthLogin(code: string, state: string): Promise<void>
|
||||
@@ -122,12 +128,12 @@ export async function completeOAuthLogin(code: string, state: string): Promise<v
|
||||
return;
|
||||
}
|
||||
|
||||
const expectedState = sessionStorage.getItem(OAUTH_STATE_KEY);
|
||||
const expectedState = localStorage.getItem(OAUTH_STATE_KEY);
|
||||
if (!expectedState || state !== expectedState)
|
||||
{
|
||||
throw new Error("OAuth state mismatch (possible CSRF or stale tab)");
|
||||
}
|
||||
const verifier = sessionStorage.getItem(PKCE_VERIFIER_KEY);
|
||||
const verifier = localStorage.getItem(PKCE_VERIFIER_KEY);
|
||||
if (!verifier)
|
||||
{
|
||||
throw new Error("PKCE verifier missing — restart the login flow");
|
||||
@@ -145,8 +151,8 @@ export async function completeOAuthLogin(code: string, state: string): Promise<v
|
||||
}
|
||||
const data = await r.json() as ExchangeResp;
|
||||
|
||||
sessionStorage.removeItem(PKCE_VERIFIER_KEY);
|
||||
sessionStorage.removeItem(OAUTH_STATE_KEY);
|
||||
localStorage.removeItem(PKCE_VERIFIER_KEY);
|
||||
localStorage.removeItem(OAUTH_STATE_KEY);
|
||||
|
||||
useAppStore.getState().setAuth({
|
||||
accessToken: data.access_token,
|
||||
|
||||
Reference in New Issue
Block a user