云枢多项目共用 · 认证 UI 组件库

一套认证 UI,
多项目即插即用

对接云枢认证服务,覆盖登录、注册、找回密码、改密码、MFA、社交登录全流程。 CSS 变量主题、路由无关、跨端复用,预设包机制让每个项目 5 分钟接入。

能力清单

覆盖认证全流程,每个模块可独立开关

🔐

登录

邮箱+密码登录,内置 CAPTCHA 验证码

  • 记住账号 / 记住密码
  • 多账号管理(最多 5 个)
  • 二次验证(MFA)
📝

注册

邮箱注册,可选手机号、验证码、推荐码

  • 邮箱验证码(注册前发送)
  • 手机短信验证码
  • 推荐码字段
  • 同意条款勾选
🔑

找回密码

三阶段流程:输入账号 → 验证身份 → 设置新密码

  • 邮箱 / 手机双渠道验证
  • 单渠道时自动跳过选择
  • 账号掩码显示
🔄

修改密码

已登录状态下的密码修改

  • 旧密码验证
  • 新密码 + 确认密码
  • 密码强度校验
🌐

社交登录

OAuth 三方登录,支持 Web 和桌面端

  • 支付宝
  • Google
  • 微信、GitHub(可扩展)
  • Tauri / Electron 桌面端适配
🎨

主题定制

CSS 变量驱动,零运行时样式引擎

  • 深色 / 浅色模式
  • 主色 / 背景色 / 卡片色 / 发光色
  • 字体 / 圆角 / 间距 / 阴影
  • 5 种卡片变体 + 4 种按钮效果
  • 5 种背景装饰(极光/网格/扫描线/光束/星空)

技术特性

为多项目复用而生,不绑定具体框架或平台

CSS 变量主题

所有颜色/字体/圆角使用 --authui-* 变量,通过 Provider 注入或纯 CSS 覆盖,零运行时样式引擎

路由无关

跳转通过 navigation 回调交给消费方,不绑定 react-router-dom,适配任意路由方案

Core / React 分层

Core 层纯 TypeScript 无 DOM 依赖,可跨端复用(Web/Tauri/Electron/RN);React 层依赖 React DOM

Token 存储可注入

TokenStorage 接口 + Memory/LocalStorage 实现,Tauri secure storage / Electron safeStorage 可自定义

预设包机制

每个项目一个预设包,封装主题 + 模块开关 + 装饰效果 + 页面组件,发布为独立 NPM 包

Headless Hooks

useLoginForm / useMFAForm / useRegisterForm 等 hooks 支持完全自定义 UI,不强制使用内置组件

模块化导入

支持子路径导出,按需引入页面或组件,tree-shaking 友好

JWT RS256 签发

云枢认证服务签发 JWT RS256,云枢中继服务验签传输,不再依赖 Casdoor

架构定位

认证链路一览

云枢认证 UI
前端 UI
云枢认证服务
认证服务 · Go
云枢认证 UI
存 token
云枢中继服务
验签 JWT

云枢认证 UI 负责前端认证 UI 和 token 管理 · 云枢认证服务负责签发 JWT RS256 · 云枢中继服务负责验签和中继

预设包

每个项目一个预设包,封装定制配置,独立发布

Trade Client 预设包

@fatal_blow/auth-ui-trade-client

交易客户端定制,含支付宝 + Google 社交登录、记住密码、推荐码

社交登录 记住密码 推荐码 MFA

Chat Gateway 预设包

@fatal_blow/auth-ui-chat-gateway

聊天网关定制,无社交登录,含邮箱验证码、预配置认证页

邮箱验证码 预配置页面 无社交登录

自定义预设包

@fatal_blow/auth-ui-<your-project>

根据客户需求创建专属预设包,选择主题、模块开关、装饰效果

主题定制 模块开关 装饰效果 页面组件

客户对接流程

从展示到上线,四种协作模式

1

展示 Demo

客户体验本站 Demo,挑选组件和效果组合

2

填写信息表

客户提供应用路径、认证配置、服务器信息

3

创建预设包

根据需求创建专属预设包并发布

4

构建部署

全包 / 构建不发 / 只发预设包,按需选择