前端应用

用户账户中心

基于 React 构建的用户注册与账户管理站点,集成 Keycloak 身份认证

客户 内部项目
周期 4个月
时间 Thu Jan 01 2026 08:00:00 GMT+0800 (China Standard Time)

技术栈

ReactTypeScriptViteKeycloak

项目背景

为用户提供自助式的账户管理能力,包括注册、个人信息管理、安全设置、第三方账号绑定等功能。

解决方案

  • 一站式管理:注册、登录、资料修改、安全设置统一入口
  • 多因素认证:支持 TOTP 两步验证
  • 第三方绑定:微信、支付宝账号快速绑定
  • 运行时配置:品牌、主题可通过配置文件修改,无需重新构建

技术实现

采用 React 19 + Vite 构建,TypeScript 保证类型安全。使用 oidc-client-ts 集成 Keycloak 认证,支持 PKCE 流程。CSS Variables 实现主题切换。

项目成果

  • 注册流程 < 3步 完成
  • 支持 中/英 双语
  • 符合 个人信息保护法 要求