# @auth0/ul-context-inspector 中文文档

规范地址：https://npmcn.com/package/%40auth0/ul-context-inspector/

版本：1\.1\.3
npm 元数据更新时间：2026-07-14T10:26:13.149Z
中文译文更新时间：2026-11-07T05:51:19.199Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40auth0/ul-context-inspector
原文对照：https://npmcn.com/package/%40auth0/ul-context-inspector/?lang=original
项目主页：https://github.com/auth0/ul-context-inspector#readme
源码仓库：https://github.com/auth0/ul-context-inspector

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：1.2 MB，39 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=20\.19\.0
- 运行依赖：10 个
- peer 依赖：react ^18\.3\.1 \|\| ^19\.0\.0，react-dom ^18\.3\.1 \|\| ^19\.0\.0
- 首次发布：2025-11-14T16:26:40.787Z
- 最新版本发布：2025-12-01T15:18:44.639Z
- 近 30 天下载量：413625（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：5（近 12 个月 5 个）

## 中文简介

用于检查 Auth0 ACUL 上下文数据的通用登录检查工具 .

## 安装

```sh
npm install @auth0/ul-context-inspector
```

也可以使用：`pnpm add @auth0/ul-context-inspector`、`yarn add @auth0/ul-context-inspector`、`bun add @auth0/ul-context-inspector`

## README

# Auth0 通用登录上下文检查器

![Universal Login Context Inspector screenshot](https://npmcn.com/package/%40auth0/ul-context-inspector/docs/ul-context-inspector.png)

[![npm](https://img.shields.io/npm/v/@auth0/ul-context-inspector)](https://www.npmjs.com/package/@auth0/ul-context-inspector) [![downloads](https://img.shields.io/npm/dm/@auth0/ul-context-inspector)](https://www.npmjs.com/package/@auth0/ul-context-inspector) ![react versions](https://img.shields.io/badge/react-18%20|%2019-61dafb?logo=react) ![node](https://img.shields.io/badge/node-%3E=20.19.0-43853d?logo=node.js) ![typescript](https://img.shields.io/badge/TypeScript-ready-3178c6?logo=typescript) ![license](https://img.shields.io/badge/license-Apache--2.0-blue) ![vite](https://img.shields.io/badge/Built%20with-Vite-646cff?logo=vite)

用于检查和预览通用登录 JSON 语境的开发者面板(`window.universal_login_context`),用于通用登录(ACUL)功能的高级自定义.

* * *

## ~ 做什麽 ~

1.  检测是否存在真实的租户上下文("连接"模式).
2.  如果没有,则允许您使用本地或CDN 显示( “ 已断开” 模式) 预览屏幕和变体 .
3.  让您检查 & sive-edit 模拟上下文 JSON( 播放自定义事件) .
4.  坚持您的选择( 屏幕/ 变量/ 数据源/ 版本) `sessionStorage` 在重装之间.

* * *

## 1\. 安装

```bash
npm install @auth0/ul-context-inspector
```

同伴依赖性( 如果您还没有这种依赖性, 则安装) :

```bash
npm install react react-dom
```

* * *

## & 2. 本地声明和可变文件

当面板以断开模式运行时,它试图在 `GET /manifest.json`数字 :

-   如果请求成功(HTTP 200),数据源会自动切换到"本地开发".
-   如果失败, 面板默认为 Auth0 CDN 显示 .

把你的清单和变体JSON放在下面 `public/` 因此,维特(或你的捆绑者)从根部供给他们

```
public/
  manifest.json
  screens/
    login/
      login/
        default.json
        with-errors.json
    login-id/
      login-id/
        default.json
        with-errors.json
```

### 外观形状

`manifest.json` 包含数组 `screens` 有对象映射 `prompt` → `screen` • 变点:

```jsonc
{
  "screens": [
    {
      "login": {
        "login": { "path": "/screens/login/login", "variants": ["default", "with-errors"] }
      }
    },
    {
      "login-id": {
        "login-id": { "path": "/screens/login-id/login-id", "variants": ["default", "with-errors"] }
      }
    }
  ]
}
```

每个变种文件的加载时间为: `<path>/<variant>.json` (例如:. `/screens/login/login/default.json`) (中文(简体) ).

如果节点省略 `variants`,面板假设单一 `default` 变种.

* * *

## 3\. 小组上山

```tsx
import { UniversalLoginContextPanel } from '@auth0/ul-context-inspector';

export function App() {
  return <UniversalLoginContextPanel defaultScreen="login:login" />;
}
```

`defaultScreen` 用途 `prompt:screen` 格式。 如果省略和CDN模式是活动的,面板可以自动选择一个普通屏幕(例如. `login-id:login-id`) (中文(简体) ).

* * *

## 4\. 订阅上下文更新(可选)

如果您主机在上下文变化时需要重接的话, 请使用订阅钩 :

```tsx
import { useUniversalLoginContextSubscription } from '@auth0/ul-context-inspector';

function Host() {
  const context = useUniversalLoginContextSubscription();
  return <pre>{JSON.stringify(context?.screen, null, 2)}</pre>;
}
```

## 5\. 互动行为

-   连接模式: 如果 `window.universal_login_context` 在挂载时已存在,选择不会凌驾于真实的租户上下文屏幕/变量.
-   已断开模式:屏幕和变体选择重装页面以模拟主机SDK重载.
-   持久性:储存在 `sessionStorage` 有前缀 `ulci:`。 。 。 .
-   本地显示的自动检测在启动时运行一次; 如果找到, 数据源切换到本地 .
-   编辑 JSON: 直接写入 `window.universal_login_context` (即使是模拟模式)并触发了广播事件.

* * *

## ++ 面板推进器

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `defaultScreen` | `string` | `undefined` | 初始预览屏幕( E)`prompt:screen`如果没有前一届会议的选择. |

* * *

## \* \* \* 样式说明

尾风课的前缀为 `uci-`。如果您清理 CSS,则使用类似 regex 的安全列表 `/uci-/`。 。 。 .

* * *

## 发展

```bash
npm install
npm run dev      # Start dev server
npm run build    # Produce dist (JS, types, CSS)
```

* * *

## 许可证

阿帕奇 - 2.0

* * *

## 问 题

**为什么我的本地名单被忽略了?**  
保证 `public/manifest.json` 返回 200并匹配上面的形状;检查 Dev 工具 网络面板.

**我如何强迫CDN模式?**  
删除/重命名本地 `manifest.json` 或手动切换面板中的数据源.

## 常见问题

### @auth0/ul-context-inspector 是什么？

用于检查 Auth0 ACUL 上下文数据的通用登录检查工具 \.

### 如何安装 @auth0/ul-context-inspector？

在项目目录运行 npm install @auth0/ul-context-inspector，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.3\.1 \|\| ^19\.0\.0）、react-dom（^18\.3\.1 \|\| ^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @auth0/ul-context-inspector 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @auth0/ul-context-inspector 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @auth0/ul-context-inspector 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20\.19\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @auth0/ul-context-inspector 可以商用吗？

@auth0/ul-context-inspector 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @auth0/ul-context-inspector 的下载量有多少？

根据 npm 官方下载统计，@auth0/ul-context-inspector 在 2026/10/07 – 2026/11/05 这 30 天内被下载 413,625 次，日均约 13,788 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @auth0/ul-context-inspector 还在维护吗？

最新版本 1\.1\.3 发布于 2025/12/01（11 个月前）；至今共发布 5 个版本，其中过去 12 个月发布了 5 个；首次发布于 2025/11/15。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。