KaiOS+Preact应用AppAuth-JS对接OpenID后重定向异常求助

针对你遇到的动态回调URL无法通过manifest静态redirects匹配的问题，这里提供几个可行的解决方案：

方案1：创建专用回调处理页面（推荐） #

这种方式将回调逻辑独立出来，避免和主应用路由冲突，处理更清晰：

步骤1：创建callback.html页面 #

在应用根目录新建该文件，负责处理认证回调并跳转回主应用：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>认证回调处理</title>
  <script type="module">
    // 导入AppAuth相关依赖
    import { RedirectRequestHandler, LocalStorageBackend, NoHashQueryStringUtils, DefaultCrypto } from '@openid/appauth';
    
    // 初始化和主应用一致的请求处理器
    const authHandler = new RedirectRequestHandler(
      new LocalStorageBackend(),
      new NoHashQueryStringUtils(),
      window.location,
      new DefaultCrypto()
    );

    window.addEventListener('load', async () => {
      try {
        // 完成认证请求处理
        await authHandler.completeAuthorizationRequestIfPossible();
        // 处理完成后跳转到仪表盘页面
        window.location.href = '/index.html/#/dashboard';
      } catch (err) {
        console.error('回调处理失败:', err);
        // 失败时跳转回登录页
        window.location.href = '/index.html/#/';
      }
    });
  </script>
</head>
<body>
  <div>正在处理认证...</div>
</body>
</html>

步骤2：修改AppAuth配置中的redirect_uri #

将认证请求的回调地址指向新建的页面：

const authRequest = new AuthorizationRequest({
  client_id: "xxx-xxx",
  redirect_uri: "/callback.html", // 替换为新的回调页面路径
  scope: "xxx",
  response_type: AuthorizationRequest.RESPONSE_TYPE_CODE,
  state: undefined,
});

步骤3：配置manifest的通配符redirect #

使用通配符匹配所有动态回调请求：

"redirects": [
  {
    "from": "http://abc.com/callback*",
    "to": "/callback.html"
  }
]

方案2：利用主应用路由处理回调 #

如果不想单独创建页面，可以在Preact路由中添加回调路由组件：

步骤1：添加回调路由组件 #

import { useEffect } from 'preact/hooks';
import { authorizationHandler } from './auth'; // 复用全局的auth处理器

export const AuthCallback = () => {
  useEffect(() => {
    const processCallback = async () => {
      try {
        await authorizationHandler.completeAuthorizationRequestIfPossible();
        window.location.href = '/index.html/#/dashboard';
      } catch (err) {
        console.error('回调处理失败:', err);
        window.location.href = '/index.html/#/';
      }
    };
    processCallback();
  }, []);

  return <div>认证处理中...</div>;
};

步骤2：更新路由配置 #

import { Router } from 'preact-router';
import Authentication from './Authentication';
import Dashboard from './Dashboard';
import AuthCallback from './AuthCallback';

function App() {
  return (
    <Router>
      <Authentication path="/" />
      <Dashboard path="/dashboard" />
      <AuthCallback path="/callback" />
    </Router>
  );
}

步骤3：配置manifest重定向 #

"redirects": [
  {
    "from": "http://abc.com/callback*",
    "to": "/index.html/#/callback"
  }
]

方案3：使用KaiOS应用URL Scheme（更可靠） #

KaiOS应用支持app://<你的应用ID>的URL Scheme，直接将OpenID回调地址配置为该Scheme，无需依赖manifest redirects：

1. 在OpenID提供商后台添加回调URL：app://your-app-id/callback.html（替换为你的应用ID）
2. 修改AppAuth的redirect_uri：

const authRequest = new AuthorizationRequest({
  client_id: "xxx-xxx",
  redirect_uri: "app://your-app-id/callback.html",
  scope: "xxx",
  response_type: AuthorizationRequest.RESPONSE_TYPE_CODE,
  state: undefined,
});

3. 无需配置manifest的redirects，认证完成后直接回到应用内的回调页面处理。

关键注意事项 #

• 确保AppAuth的RedirectRequestHandler配置在主应用和回调页面/组件中完全一致，尤其是queryStringUtils和存储后端
• 必须在OpenID提供商后台正确配置允许的回调URL，否则会出现认证错误
• 测试时注意KaiOS应用的权限配置，确保允许外部URL跳转回应用

内容的提问来源于stack exchange，提问作者akhilesh