@dloizides/自动网络

Dloizides.com 组合的可主题,品牌化的 Auth UI ——前端一半 统一自动计划.

每个应用程序都有一个 本土、品牌登录经验: 登录 / 忘记 / 重置表单在应用程序的前端内直播; 用户是 从未重定向 到 Keycloak 的主机登录 UI。所有证书交换都发生在服务器侧 a 每个应用程序 妇女事务局 (单位:千美元)bff-katalogos, (中文(简体) ), bff-erevna(中文(简体) ). 这个包只讲 发源地 /bff/* —— 说 没有秘密,没有象征性的处理,没有Keycloak的电话 在浏览器中.

建造在 @dloizides/auth-client, (中文(简体) ), 提供低级 BffAuthClient。 。 。 .

安装

npm install @dloizides/auth-web

同伴依赖性 : react, (中文(简体) ), react-native (可选), @tanstack/react-query, (中文(简体) ), @dloizides/auth-client (单位:千美元)>=3.0.0) (中文(简体) ).

食用它有两个方法

1. 现成主题组件

import {
  AuthThemeProvider,
  LoginForm,
  createBffAuthClient,
  resolvePostLoginRoute,
} from '@dloizides/auth-web';

import { katalogosAuthTheme } from './theme';      // your AuthTheme token bag
import { roleRoutes } from './roleRoutes';          // your RoleRouteTable
import { authLabels } from './authLabels';          // your localised labels

const client = createBffAuthClient();               // same-origin /bff/*

function LoginScreen() {
  const router = useRouter();
  return (
    <AuthThemeProvider theme={katalogosAuthTheme}>
      <LoginForm
        client={client}
        labels={authLabels.login}
        onForgotPassword={() => router.push('/forgot-password')}
        onSuccess={(user) => {
          const route = resolvePostLoginRoute(user, roleRoutes);
          router.replace(route ?? '/no-access');
        }}
      />
    </AuthThemeProvider>
  );
}

<ForgotPasswordForm> 财务报告和审定财务报表 <ResetPasswordForm> 跟着同样的形状.

电子邮件-OTP 登录 - <OtpForm>

一个本地品牌的"签入代码"表面——用户从未被反弹到 Keycloak主持UI. 这是两步的形式:第一步收集电子邮件并询问 bFF 以电子邮件方式发送一次性代码;步骤2收集代码,验证代码,以及 提供"转发代码" /"使用不同的电子邮件".

import { OtpForm, createBffAuthClient, resolvePostLoginRoute } from '@dloizides/auth-web';

const client = createBffAuthClient();

function OtpLoginScreen() {
  const router = useRouter();
  return (
    <OtpForm
      client={client}
      labels={authLabels.otp}
      onSuccess={(user) => {
        const route = resolvePostLoginRoute(user, roleRoutes);
        router.replace(route ?? '/no-access');
      }}
    />
  );
}

<OtpForm> 同一来源的 POST /bff/otp/request 财务报告和审定财务报表 /bff/otp/verify 终点( 加入 Bff.AspNetCore) (中文(简体) ). 联邦检察官办公室直接对 Keycloak 服务器侧;浏览器只接收 httpOnly 会话 cookie .

事件- PIN 登录 - <PinForm>

一个本地品牌的PIN平台 (门/DJ/媒体关于克菲). 它是一个单步形式: PIN 字段+ “ sign” 在"按钮。 这个 eventExternalId 是一个道具——事件上下文来自 路由/页面,从未由用户输入。 这个 (event, pin) 单对标识 ; 用户名/密码从不离开浏览器.

import { PinForm, createBffAuthClient, resolvePostLoginRoute } from '@dloizides/auth-web';

const client = createBffAuthClient();

function PinLoginScreen({ eventExternalId }: { eventExternalId: string }) {
  const router = useRouter();
  return (
    <PinForm
      client={client}
      eventExternalId={eventExternalId}
      labels={authLabels.pin}
      onSuccess={(user) => {
        const route = resolvePostLoginRoute(user, roleRoutes);
        router.replace(route ?? '/no-access');
      }}
    />
  );
}

<PinForm> 同一来源的 POST /bff/pin/login 结束点( 加入 Bff.AspNetCore) (中文(简体) ). BFF运行事件范围 PIN 直接赠款对抗 Keycloak 服务器侧;浏览器只接收 httpOnly 会话 cookie .

2. 无头钩(海关布局)

import { useBffAuth, createBffAuthClient } from '@dloizides/auth-web';

const client = createBffAuthClient();

function CustomLogin() {
  const { login, isSubmitting, error } = useBffAuth({ client, probeOnMount: false });
  // ...render your own form, call login({ username, password })
}

对于自定义的检察官办公室版式, useOtpLogin 暴露出双步机:

import { useOtpLogin, OtpLoginStep, createBffAuthClient } from '@dloizides/auth-web';

const client = createBffAuthClient();

function CustomOtpLogin() {
  const otp = useOtpLogin({ client });
  // step 1: otp.requestCode(email)  → otp.step becomes OtpLoginStep.EnterCode
  // step 2: otp.verifyCode(code)    → resolves to the signed-in BffUser
  //         otp.resend() / otp.reset() for the step-2 affordances
}

对于定制的 PIN 版式, usePinLogin 暴露单步流:

import { usePinLogin, createBffAuthClient } from '@dloizides/auth-web';

const client = createBffAuthClient();

function CustomPinLogin({ eventExternalId }: { eventExternalId: string }) {
  const pin = usePinLogin({ client, eventExternalId });
  // pin.submit(pinValue) → resolves to the signed-in BffUser
  // pin.reset()          → clears the error
}

他们

该套装没有品牌. 每个应用程序将自己的主题系统映射到平地上 AuthTheme 代号袋( r)colors, (中文(简体) ), radii, (中文(简体) ), spacing, (中文(简体) ), typography)和用品 它通过 <AuthThemeProvider> 或一个 theme 单个组件的道具. 优先发言: 说明 上下文 defaultAuthTheme。 。 。 .

import { defaultAuthTheme, type AuthTheme } from '@dloizides/auth-web';

export const katalogosAuthTheme: AuthTheme = {
  ...defaultAuthTheme,
  colors: { ...defaultAuthTheme.colors, primary: '#c2410c' },
};

因为三种形式都有一个 useAuthStyles 以符号形式映射, 重装 <LoginForm> 自动重取其他主题.

公开演示证书 - <DemoCredentialsHint>

已公布证书的 OPEN 演示账户产品 (一般在营销网站). 它显示登录时的用户名+密码 因此,非技术评估员从不复制 两个标签之间的密码 .

这个 填满了田地,没有别的了. 登录后会穿越普通路径—— 相同的BFF,相同的Keycloak,相同的会话饼干,相同的角色. 没有认证 绕行和不在此套件内提供证书:主机提供配对 演示账号的爆炸半径是IP授权的.

演示对来自BFF(GET /bff/config → config.demo页:1 客户端 Const——BFF是唯一知道部署是否有 演示已配置, 捆绑的 const 将证书运入每个客户的 自办建筑. useBffLoginConfig 已获取此配置, 所以它也 携带 demo。 。 。 . useDemoCredentials 拥有提示qqform 线程 :

import {
  AuthScreen, DemoCredentialsHint, LoginForm,
  useBffLoginConfig, useDemoCredentials,
} from '@dloizides/auth-web';

function LoginScreen() {
  const { config } = useBffLoginConfig(bffAuthClient);
  // Credentials arrive ASYNC — prefillOnMount honours a late arrival (see below).
  const demo = useDemoCredentials({ credentials: config.demo ?? undefined, prefillOnMount: true });

  return (
    <AuthScreen theme={authTheme}>
      <DemoCredentialsHint
        {...demo.hintProps}
        labels={authLabels.demo}
        testIdPrefix="zygos"
        theme={authTheme}
      />
      <LoginForm
        {...demo.loginFormProps}
        chromeless
        client={bffAuthClient}
        labels={authLabels.login}
        theme={authTheme}
        onSuccess={handleSignedIn}
      />
    </AuthScreen>
  );
}

hintProps 携带 { credentials, onUse }· ; loginFormProps 携带 { initialUsername, initialPassword, prefillNonce, prefillIntent }模块集成 演示工作也一样——通过即可 credentials 改为 config.demo。 。 。 .

要求数 @dloizides/auth-client >= 4.2.0,该表面 demo 打开 BffLoginConfig (从电线上划出) publishedUsername 编号 : publishedPassword) (中文(简体) ). config.demo 实值 DemoCredentials | null。 。 。 .

同步证书 : prefillOnMount 恭敬迟到

因为一对在上山后到达一两个, prefillOnMount 不能倾斜 打开 useState'初始值(仅在第一个渲染时反应读取). 钩子 种子窗体时 config.demo 解决一个可用的对-但作为一个 机会 种子 : <LoginForm> 只在两个字段都还在时才应用 空了,这么晚了 /bff/config 响应从不覆盖用户名真实账户 持卡人同时在打字。 窃听 使用这些证书 是一个 明确 种子并始终适用。 种子按值入门,所以反应平滑回接 返回等值对象不重播. useDemoCredentials 选择 意向通过 prefillIntent 道具; 您只触摸 PrefillIntent 如果你开车 <LoginForm> 没有钩子.

prefillOnMount (默认) false选择行业:

使用 true 只有真正公开的演示表面。 无论是哪种方式, 这样一来就看得到 为什么 田地是人口密集的.

无法关闭

没有证书——或半配置对(空白用户名、空白密码或 字段为 undefined 在运行时间,因为一个env var从未设置)——使 没什么- 零DOM。 - 零DOM。 配置错误的演示文稿永远不能发布空的 全权证书委员会. resolveDemoCredentials 如果需要,则导出 在别处作出决定.

预填是种子 不是绳子

initialUsername 编号 : initialPassword 选择字段“ 开始 价值和 然后让开:每个字段都保持可编辑和可清除,所以是真实的 账户持有者总是可以擦去演示值,并用自己的签名. 这个 为什么 prefillNonce 已存在——反应忽略 useState 关于 重新投降,如此改变 initial* 单枪匹马一无所获,一无所获 窗体"没有非正弦的按钮会让窗体固执地空出. useDemoCredentials 为您管理它;除非您不是,否则您自己驱动它 用钩.

国际化

@dloizides/auth-web 船舶 没有 i18n框架. 每一个用户化字符串是 通过类型提供 labels 道具 (英语). Apps 传送已本地化的字符串 他们自己的 FM() 编号 : t()。每个标签袋是部分的——未指明的密钥 回到英语 DEFAULT_* 常数.

基于角色的登录后路由

import { resolvePostLoginRoute, type RoleRouteTable } from '@dloizides/auth-web';

const roleRoutes: RoleRouteTable = {
  routes: [
    { role: 'superUser', route: '/admin/super' },
    { role: 'admin',     route: '/admin' },
    { role: 'user',      route: '/dashboard' },
  ],
  fallback: '/no-access',
};

// The first table entry whose role the user holds wins — list most privileged first.
const route = resolvePostLoginRoute(user, roleRoutes);

API 表面

许可证

麻省理工学院