@authhero/admin (英语)
AuthHero admin UI – a Vite + React 19 SPA 用于管理租户,用户,应用程序,连接,角色,品牌等多个AuthHero部署.
建造在 ra-core (无头半反应-admin)与 阴影/ ui 和"尾风"v4.
快开始
# from the repo root
pnpm install
pnpm admin dev # starts on http://localhost:5173
# or from this directory
pnpm dev
pnpm build # production bundle in ./dist
pnpm type-check
pnpm test
配置
管理员从两个来源阅读其配置,按优先顺序排列:
- 运行时间配置 —— 说
window.__AUTHHERO_ADMIN_CONFIG__(捆绑负载前由主机页面注入). 当同一个静态建筑被服务到多个环境时是有用的. - 构建时的嵌入区 vars —— 说
VITE_*变量在pnpm build时间.
两种路径共享相同的密钥,定义于 src/utils/runtimeConfig.ts。 。 。 .
设置
| 设置 | 新闻 var | 运行时键 | 默认 | 说明 |
|---|---|---|---|---|
| Auth0 域名 | VITE_AUTH0_DOMAIN | domain | —— 说 | 租赁域 @auth0/auth0-spa-js 以登录管理员用户。 当未设定时,会提示用户在第一个负载上选择一个域. |
| Auth0 客户端标识 | VITE_AUTH0_CLIENT_ID | clientId | —— 说 | 管理员本人的 SPA 应用程序客户端ID . |
| 管理 API URL | VITE_AUTH0_API_URL | apiUrl | —— 说 | AuthHero 管理 API 的基础 URL(例如. https://auth.example.com) (中文(简体) ). |
| 观众 | VITE_AUTH0_AUDIENCE | audience | —— 说 | 管理API访问令牌的观众请求. |
| 基础路径 | VITE_BASE_PATH | basePath | "" | 副路径管理员从(例如)服务. /admin) (中文(简体) ). 路由和OAuth召回 荣誉这一点. |
| 应用名称 | VITE_APP_NAME | appName | "AuthHero Admin" | 浏览器标签标题和上栏显示的文字标记(当没有设置标志时). |
| 标记 URL | VITE_APP_LOGO_URL | logoUrl | —— 说 | 图像在顶端的栏上显示,以代替文字标记 。 任何浏览器都可以显示(PNG,SVG,WebP). 建议高度:28px. |
| 费维孔 URL | VITE_APP_FAVICON_URL | faviconUrl | ./favicon.svg | 超越了内在的法相. |
构建时嵌入示例
创建 apps/admin/.env.local数字 :
VITE_AUTH0_DOMAIN=auth.example.com
VITE_AUTH0_CLIENT_ID=your-spa-client-id
VITE_AUTH0_API_URL=https://auth.example.com
VITE_AUTH0_AUDIENCE=https://auth.example.com/api/v2/
VITE_BASE_PATH=/admin
# Whitelabel
VITE_APP_NAME="Acme Identity Console"
VITE_APP_LOGO_URL=https://cdn.example.com/acme-logo.svg
VITE_APP_FAVICON_URL=https://cdn.example.com/acme-favicon.svg
运行时配置示例
在捆绑之前插入到互换设置而不重建 :
<script>
window.__AUTHHERO_ADMIN_CONFIG__ = {
domain: "auth.example.com",
clientId: "your-spa-client-id",
apiUrl: "https://auth.example.com",
audience: "https://auth.example.com/api/v2/",
basePath: "/admin",
appName: "Acme Identity Console",
logoUrl: "https://cdn.example.com/acme-logo.svg",
faviconUrl: "https://cdn.example.com/acme-favicon.svg",
};
</script>
<script type="module" src="/admin/assets/index-<hash>.js"></script>
捆绑条目文件名由Vite在构建时间(例如. index-Ab12Cd.js),因此替换您构建输出中的真实文件名——或使用 window.__AUTHHERO_ADMIN_CONFIG__.basePath 从配置的基础路径构造它.
如果两者都不提供 domain中,管理员在第一个负载上显示一个域拾取器,并将选择存储在通过 src/utils/domainUtils.ts。 。 。 .
白标签
三个品牌设置(appName, (中文(简体) ), logoUrl, (中文(简体) ), faviconUrl)在三个地方读取:
document.title与法网<link>被设定为启动applyBranding()内src/utils/runtimeConfig.ts。 。 。 .- 上面的条子
src/components/admin/layout.tsx调制logoUrl作为<img>设定时,否则appNameword-mark (以两字母首字母为窄宽格字母).
替换默认标记, 设置 VITE_APP_FAVICON_URL 到您自己的资产; 捆绑的默认值为 public/favicon.svg。 。 。 .
部署到云旗页面
管理员是一个静态的SPA,所以任何静态主机都有效. Cloudflare Pages是推荐的目标.
在云浮仪表板, 工人页 – 创建页 – 连接到 Git,则:
| 设置 | 数值 |
|---|---|
| 构建命令 | pnpm install --no-frozen-lockfile && pnpm --filter "@authhero/admin..." build |
| 构建输出目录 | dist |
| 根目录( 高级) | apps/admin |
| 环境变量 | NODE_VERSION=20, (中文(简体) ), ENABLE_EXPERIMENTAL_COREPACK=1,加上 VITE_* 从上表设置 |
线索 ... 需要pnpm过滤器——它构建管理员的工作空间依赖性(特别是 @authhero/adapter-interfaces)在管理本身之前。 没有它,Vite就无法解决 @authhero/adapter-interfaces 因为共通软件包没有构建 dist/。 。 。 .
对于SPA客户端路由,添加 public/_redirects数字 :
/* /index.html 200
多个 Cloudflare 账户
Cloudflare的"Git"集成将回放绑入了单一Cloudflare账户. 要在多个账户中部署相同的代码库,你有两种选择:
- GitHub 动作 + Wrangler 将 Pages Git 集成和部署从CI 与
cloudflare/wrangler-action,提供每个账户的CLOUDFLARE_API_TOKEN财务报告和审定财务报表CLOUDFLARE_ACCOUNT_ID作为独立的 GitHub 秘密。 构建一次, 通过矩阵任务部署 N 次 。 每个账户VITE_*值可以在构建时设定为工作流程内存, 或者使用运行时window.__AUTHHERO_ADMIN_CONFIG__运送一件文物. - 每个环境的叉子 ——将回放分出到Cloudflare账户的每个组织中,并将每个分出分出分出分出分出分出的项目与自己的分出分出分出分出. 更低的设置成本,其代价是必须进行上游合并并保持叉的同步.
结构说明
- 双路由器: 位于
src/index.tsx处理域选择( t)/租户管理/tenants/*),按租户计的管理人员/:tenantId/*)和OAuth调用(/auth-callback) (中文(简体) ). 内部路由器在src/App.tsx是安装在basename="/:tenantId"。 。 。 . - 认证数字 :
@auth0/auth0-spa-js相对于配置domain编号 :clientId编号 :audience提供方居住在src/authProvider.ts。 。 。 . - 数据: 自定义数据提供者
src/auth0DataProvider.ts与AuthHero管理API交谈.
见完整文件 authhero.net/apps/admin/ (英语)。 。 。 .