Auth0 通用登录上下文检查器

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

~ 做什麽 ~

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

1. 安装

npm install @auth0/ul-context-inspector

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

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 • 变点:

{
  "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. 小组上山

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

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

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

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

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

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 (即使是模拟模式)并触发了广播事件.

++ 面板推进器

* * * 样式说明

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

发展

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 或手动切换面板中的数据源.