@liujitcn/kratos-taro-app-core 0.0.29 → 0.0.31

package/README.md

@@ -4,9 +4,11 @@
 
 ## 主要能力
 
-- 账号密码、行为验证码、微信登录、OAuth、Token 刷新和退出。
-- 统一 HTTP、上传、下载、文件预览与 RSA/AES 密码加密。
-- Zustand 用户、配置和导航状态。
+- 账号密码、行为验证码、微信登录、OAuth、MFA（TOTP/WebAuthn/恢复码）、Token 刷新和退出。
+- 统一 HTTP、上传、下载、文件预览、RSA/AES 密码加密和 WebAuthn 工具。
+- Zustand 用户、配置和导航状态，H5 浏览器页签标题使用宿主 HTML 声明的应用名称。
+- 登录阶段支持 TOTP、WebAuthn 和一次性恢复码校验。
+- 公开 Base MFA 请求及通用密码弹窗、绑定面板和恢复码弹窗，供登录页与业务模块复用同一套绑定界面。
 - 接口驱动的逻辑路由、访问模式、自绘 tabBar 和稳定 `viewKey`。
 - 页面静态资源 export、动态资源公共路径解析，以及 H5 默认导航栏兼容框架。
 - 首页、登录、协议、WebView、启动/错误状态页面。
@@ -20,7 +22,7 @@
 - `@liujitcn/kratos-taro-app-core/runner`：Taro 构建装配入口。
 - `api/*`、`components/*`、`rpc/*`、`styles/*`、`utils/*`、`views/*`：白名单子路径。
 
-业务模块只能通过这些 exports 使用底座，不得相对引用 core 源码。RPC 由 `make -C backend ts-taro-app` 生成，不能手工编辑。
+业务模块只能通过这些 exports 使用底座，不得相对引用 core 源码。RPC 由 `make -C frontend ts-taro-app` 生成，不能手工编辑。
 
 ## Runner 协议
 

package/dist/runner.mjs

@@ -447,8 +447,15 @@ function appendPage(manifest, route) {
   const subRoute = rest.join("/");
   if (!subpackage.pages.includes(subRoute)) subpackage.pages.push(subRoute);
 }
+function typescriptStringLiteral(value) {
+  return `'${value.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/\r/g, "\\r").replace(/\n/g, "\\n").replace(/\t/g, "\\t")}'`;
+}
+function pageStyleString(style, key, fallback) {
+  const value = style?.[key];
+  return typeof value === "string" ? value : fallback;
+}
 function createPageWrapper(page) {
-  return `import KratosPage from ${JSON.stringify(`${page.source}.tsx`)}
+  return `import KratosPage from ${typescriptStringLiteral(`${page.source}.tsx`)}
 import { KratosPageFrame } from '@liujitcn/kratos-taro-app-core/components/KratosPageFrame'
 import { KratosTabBar } from '@liujitcn/kratos-taro-app-core/components/KratosTabBar'
 
@@ -457,14 +464,14 @@ export default function KratosPageWrapper() {
   return (
     <>
       <KratosPageFrame
-        navigationStyle=${JSON.stringify(page.style?.navigationStyle ?? "default")}
-        navigationBarTitleText=${JSON.stringify(page.style?.navigationBarTitleText ?? "")}
-        navigationBarBackgroundColor=${JSON.stringify(page.style?.navigationBarBackgroundColor ?? "#f8f8f8")}
-        navigationBarTextStyle=${JSON.stringify(page.style?.navigationBarTextStyle ?? "black")}
+        navigationStyle=${typescriptStringLiteral(pageStyleString(page.style, "navigationStyle", "default"))}
+        navigationBarTitleText=${typescriptStringLiteral(pageStyleString(page.style, "navigationBarTitleText", ""))}
+        navigationBarBackgroundColor=${typescriptStringLiteral(pageStyleString(page.style, "navigationBarBackgroundColor", "#f8f8f8"))}
+        navigationBarTextStyle=${typescriptStringLiteral(pageStyleString(page.style, "navigationBarTextStyle", "black"))}
       >
         <KratosPage />
       </KratosPageFrame>
-      <KratosTabBar route=${JSON.stringify(page.route)} />
+      <KratosTabBar route=${typescriptStringLiteral(page.route)} />
     </>
   )
 }

package/package.json

@@ -7,7 +7,7 @@
     "type": "git",
     "url": "git@github.com:liujitcn/kratos-admin.git"
   },
-  "version": "0.0.29",
+  "version": "0.0.31",
   "type": "module",
   "files": [
     "dist",
@@ -42,6 +42,7 @@
     "@tarojs/taro": "4.2.1",
     "asmcrypto.js": "2.3.2",
     "go-captcha-react": "1.0.5",
+    "qrcode-generator": "^2.0.4",
     "react": "18.3.1",
     "typescript": "5.8.3",
     "zustand": "5.0.6"

package/src/api/base/mfa.ts

@@ -0,0 +1,127 @@
+import { http } from '../../utils/http'
+import type { LoginResponse } from '../../rpc/base/v1/login'
+import type {
+  BeginMfaDisableRequest,
+  BeginMfaDisableResponse,
+  BeginMfaEnrollmentRequest,
+  BeginMfaEnrollmentResponse,
+  BeginMfaSetupRequest,
+  BeginMfaSetupResponse,
+  ConfirmMfaEnrollmentRequest,
+  ConfirmMfaEnrollmentResponse,
+  ConfirmMfaSetupRequest,
+  ConfirmMfaSetupResponse,
+  DisableMfaRequest,
+  GetMfaStatusRequest,
+  MfaService,
+  MfaStatusResponse,
+  RecoveryCodesResponse,
+  RegenerateMfaRecoveryCodesRequest,
+  VerifyMfaRequest,
+} from '../../rpc/base/v1/mfa'
+import type { Empty } from '../../rpc/google/protobuf/empty'
+
+const MFA_URL = '/v1/base/mfa'
+
+/** 多因素认证公共服务。 */
+export class MfaServiceImpl implements MfaService {
+  /** 校验登录阶段多因素认证。 */
+  VerifyMfa(request: VerifyMfaRequest): Promise<LoginResponse> {
+    return http<LoginResponse>({
+      url: `${MFA_URL}/verify`,
+      method: 'POST',
+      authMode: 'none',
+      data: request,
+      header: { Authorization: 'no-auth' },
+    })
+  }
+
+  /** 开始登录阶段的强制多因素认证绑定。 */
+  BeginMfaEnrollment(request: BeginMfaEnrollmentRequest): Promise<BeginMfaEnrollmentResponse> {
+    return http<BeginMfaEnrollmentResponse>({
+      url: `${MFA_URL}/enrollment`,
+      method: 'POST',
+      authMode: 'none',
+      data: request,
+      header: { Authorization: 'no-auth' },
+    })
+  }
+
+  /** 确认登录阶段的强制多因素认证绑定。 */
+  ConfirmMfaEnrollment(
+    request: ConfirmMfaEnrollmentRequest,
+  ): Promise<ConfirmMfaEnrollmentResponse> {
+    return http<ConfirmMfaEnrollmentResponse>({
+      url: `${MFA_URL}/enrollment/confirm`,
+      method: 'POST',
+      authMode: 'none',
+      data: request,
+      header: { Authorization: 'no-auth' },
+    })
+  }
+
+  /** 查询当前用户多因素认证状态。 */
+  GetMfaStatus(request: GetMfaStatusRequest): Promise<MfaStatusResponse> {
+    return http<MfaStatusResponse>({
+      url: MFA_URL,
+      method: 'GET',
+      authMode: 'required',
+      data: request,
+    })
+  }
+
+  /** 开始绑定当前用户的多因素认证方式。 */
+  BeginMfaSetup(request: BeginMfaSetupRequest): Promise<BeginMfaSetupResponse> {
+    return http<BeginMfaSetupResponse>({
+      url: `${MFA_URL}/setup`,
+      method: 'POST',
+      authMode: 'required',
+      data: request,
+    })
+  }
+
+  /** 确认绑定当前用户的多因素认证方式。 */
+  ConfirmMfaSetup(request: ConfirmMfaSetupRequest): Promise<ConfirmMfaSetupResponse> {
+    return http<ConfirmMfaSetupResponse>({
+      url: `${MFA_URL}/setup/confirm`,
+      method: 'POST',
+      authMode: 'required',
+      data: request,
+    })
+  }
+
+  /** 开始禁用 WebAuthn 多因素认证的 Passkey 验证。 */
+  BeginMfaDisable(request: BeginMfaDisableRequest): Promise<BeginMfaDisableResponse> {
+    return http<BeginMfaDisableResponse>({
+      url: `${MFA_URL}/disable/challenge`,
+      method: 'POST',
+      authMode: 'required',
+      data: request,
+    })
+  }
+
+  /** 禁用当前用户的多因素认证。 */
+  DisableMfa(request: DisableMfaRequest): Promise<Empty> {
+    return http<Empty>({
+      url: `${MFA_URL}/disable`,
+      method: 'POST',
+      authMode: 'required',
+      data: request,
+    })
+  }
+
+  /** 重新生成当前用户的多因素认证恢复码。 */
+  RegenerateMfaRecoveryCodes(
+    request: RegenerateMfaRecoveryCodesRequest,
+  ): Promise<RecoveryCodesResponse> {
+    return http<RecoveryCodesResponse>({
+      url: `${MFA_URL}/recovery-codes`,
+      method: 'POST',
+      authMode: 'required',
+      data: request,
+    })
+  }
+}
+
+/** defMfaService 多因素认证公共服务实例。 */
+export const defMfaService = new MfaServiceImpl()

package/src/bootstrap.ts

@@ -6,9 +6,16 @@ import { initializeAppNavigation } from './navigation'
 import {
   registerUserStoreExtension,
   startUserStoreEventBridge,
+  useSettingStore,
   useUserStore,
- useSettingStore } from './stores'
-import { applyLanguageConfig, initializeLocale, registerLocaleChangeHandler, registerLocaleMessages } from './locales'
+} from './stores'
+import {
+  applyLanguageConfig,
+  initializeLocale,
+  registerLocaleChangeHandler,
+  registerLocaleMessages,
+  t,
+} from './locales'
 import { defLanguageService } from './api/base/language'
 
 /** Taro 应用启动参数。 */
@@ -18,6 +25,21 @@ export interface KratosTaroBootstrapOptions {
 }
 
 let bootstrapped = false
+let titleObserver: MutationObserver | undefined
+
+/** 使用宿主声明的应用名称同步 H5 浏览器页签标题。 */
+function syncH5DocumentTitle(): void {
+  if (process.env.TARO_ENV !== 'h5' || typeof document === 'undefined') return
+  const titleElement = document.querySelector('title')
+  const appTitle = titleElement?.dataset.appTitle || t('core.home.main_title')
+  const applyTitle = () => {
+    if (document.title !== appTitle) document.title = appTitle
+  }
+  applyTitle()
+  if (!titleElement || titleObserver) return
+  titleObserver = new MutationObserver(applyTitle)
+  titleObserver.observe(titleElement, { childList: true })
+}
 
 /** 注册模块、认证生命周期和导航运行时。 */
 export function bootstrapKratosTaroApp(options: KratosTaroBootstrapOptions): void {
@@ -34,8 +56,10 @@ export function bootstrapKratosTaroApp(options: KratosTaroBootstrapOptions): voi
     })
   if (bootstrapped) return
   bootstrapped = true
+  syncH5DocumentTitle()
   registerLocaleChangeHandler(initializeAppNavigation)
   registerLocaleChangeHandler(() => useSettingStore.getState().loadData())
+  registerLocaleChangeHandler(syncH5DocumentTitle)
   startUserStoreEventBridge()
   registerUserStoreExtension({
     onLogin: initializeAppNavigation,

package/src/components/KratosTabBar.scss

@@ -13,6 +13,7 @@
 }
 
 .kratos-tab-bar__item {
+  position: relative;
   display: flex;
   flex: 1;
   align-items: center;
@@ -30,6 +31,48 @@
   margin-bottom: 4PX;
 }
 
+.kratos-tab-bar__message-icon {
+  position: relative;
+  width: 22PX;
+  height: 16PX;
+  margin-bottom: 8PX;
+  border: 2PX solid #9aa4b2;
+  border-radius: 3PX;
+  box-sizing: border-box;
+}
+
+.kratos-tab-bar__message-icon::after {
+  position: absolute;
+  top: 1PX;
+  left: 4PX;
+  width: 9PX;
+  height: 9PX;
+  border-right: 2PX solid #9aa4b2;
+  border-bottom: 2PX solid #9aa4b2;
+  content: '';
+  transform: rotate(45deg);
+}
+
+.kratos-tab-bar__message-icon--active,
+.kratos-tab-bar__message-icon--active::after {
+  border-color: #27ba9b;
+}
+
 .kratos-tab-bar__text--active {
   color: #27ba9b;
 }
+
+.kratos-tab-bar__badge {
+  position: absolute;
+  top: 2PX;
+  right: calc(50% - 22PX);
+  min-width: 14PX;
+  height: 14PX;
+  padding: 0 3PX;
+  border-radius: 8PX;
+  background: #e5484d;
+  color: #fff;
+  font-size: 9PX;
+  line-height: 14PX;
+  text-align: center;
+}

package/src/components/KratosTabBar.tsx

@@ -1,6 +1,6 @@
 import { Image, Text, View } from '@tarojs/components'
 import { resolveModuleIcon, resolveStaticView } from '../module'
-import { APP_MENU_ROOT_ID, navigateAppRoute, useAppNavigation } from '../navigation'
+import { APP_MENU_ROOT_ID, navigateAppRoute, useAppMenuBadges, useAppNavigation } from '../navigation'
 import { resolveRootMenuId } from '../navigation-tree.mjs'
 import './KratosTabBar.scss'
 
@@ -13,6 +13,7 @@ export interface KratosTabBarProps {
 export function KratosTabBar({ route }: KratosTabBarProps) {
   const menus = useAppNavigation((state) => state.menus)
   const tabBar = useAppNavigation((state) => state.tabBar)
+  const messageBadge = useAppMenuBadges((state) => state.badges.MESSAGE_INBOX ?? 0)
   const routeMenu = menus.find((menu) => resolveStaticView(menu.viewKey) === route)
   const tabMenuId = routeMenu
     ? resolveRootMenuId(menus, routeMenu.id, APP_MENU_ROOT_ID)
@@ -34,6 +35,10 @@ export function KratosTabBar({ route }: KratosTabBarProps) {
             {icon ? (
               <Image className='kratos-tab-bar__icon' src={icon} mode='aspectFit' />
             ) : null}
+            {!icon && item.viewKey === 'MESSAGE_INBOX' ? (
+              <View className={`kratos-tab-bar__message-icon${active ? ' kratos-tab-bar__message-icon--active' : ''}`} />
+            ) : null}
+            {item.viewKey === 'MESSAGE_INBOX' && messageBadge ? <Text className='kratos-tab-bar__badge'>{messageBadge}</Text> : null}
             <Text className={active ? 'kratos-tab-bar__text--active' : ''}>{item.title}</Text>
           </View>
         )

package/src/components/MfaRecoveryCodesDialog.scss

@@ -0,0 +1,94 @@
+.mfa-recovery-dialog {
+  position: fixed;
+  z-index: 1001;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+  background-color: rgb(0 0 0 / 45%);
+}
+
+.mfa-recovery-dialog__panel {
+  width: min(100%, 640px);
+  overflow: hidden;
+  background-color: #fff;
+  border-radius: 16px;
+  box-shadow: 0 20px 64px rgb(0 0 0 / 20%);
+}
+
+.mfa-recovery-dialog__header {
+  padding: 28px 32px;
+  border-bottom: 1px solid #eee;
+}
+
+.mfa-recovery-dialog__title {
+  color: #222;
+  font-size: 34px;
+  font-weight: 600;
+}
+
+.mfa-recovery-dialog__body {
+  padding: 32px;
+}
+
+.mfa-recovery-dialog__codes {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 220px;
+  margin-bottom: 16px;
+  padding: 20px 24px;
+  color: #222;
+  font-size: 30px;
+  line-height: 1.6;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.mfa-recovery-dialog__copy {
+  width: auto;
+  min-width: 140px;
+  height: 58px;
+  margin: 0;
+  padding: 0 18px;
+  color: #27ba9b;
+  font-size: 24px;
+  line-height: 58px;
+  background-color: #f0fbf8;
+  border: 0;
+  border-radius: 8px;
+}
+
+.mfa-recovery-dialog__copy::after,
+.mfa-recovery-dialog__confirm::after {
+  border: 0;
+}
+
+.mfa-recovery-dialog__warning {
+  display: block;
+  margin-top: 12px;
+  color: #c58b00;
+  font-size: 24px;
+  line-height: 1.5;
+}
+
+.mfa-recovery-dialog__footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 32px 32px;
+}
+
+.mfa-recovery-dialog__confirm {
+  min-width: 160px;
+  height: 72px;
+  margin: 0;
+  padding: 0 24px;
+  color: #fff;
+  font-size: 28px;
+  line-height: 72px;
+  background-color: #27ba9b;
+  border: 0;
+  border-radius: 8px;
+}

package/src/components/MfaRecoveryCodesDialog.tsx

@@ -0,0 +1,61 @@
+import { Button, Text, View } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import { useI18n } from '../locales'
+import './MfaRecoveryCodesDialog.scss'
+
+/** MFA 恢复码弹窗属性。 */
+export interface MfaRecoveryCodesDialogProps {
+  /** 弹窗显示状态。 */
+  open: boolean
+  /** 本次生成的一次性恢复码。 */
+  codes: string[]
+  /** 用户确认已保存恢复码。 */
+  onConfirm: () => void | Promise<void>
+}
+
+/** 统一展示、复制并确认保存 MFA 恢复码。 */
+export default function MfaRecoveryCodesDialog({
+  open,
+  codes,
+  onConfirm,
+}: MfaRecoveryCodesDialogProps) {
+  const { t } = useI18n()
+  if (!open) return null
+
+  const codesText = codes.join('\n')
+
+  /** 复制当前显示的恢复码。 */
+  const copyRecoveryCodes = async () => {
+    if (!codesText) return
+    await Taro.setClipboardData({ data: codesText })
+    await Taro.showToast({ icon: 'none', title: t('core.login.mfa_recovery_codes_copied') })
+  }
+
+  return (
+    <View className='mfa-recovery-dialog'>
+      <View className='mfa-recovery-dialog__panel' onClick={(event) => event.stopPropagation()}>
+        <View className='mfa-recovery-dialog__header'>
+          <Text className='mfa-recovery-dialog__title'>
+            {t('core.login.mfa_recovery_codes_title')}
+          </Text>
+        </View>
+        <View className='mfa-recovery-dialog__body'>
+          <View className='mfa-recovery-dialog__codes'>
+            <Text>{codesText}</Text>
+          </View>
+          <Button className='mfa-recovery-dialog__copy' onClick={() => void copyRecoveryCodes()}>
+            {t('core.login.mfa_copy_recovery_codes')}
+          </Button>
+          <Text className='mfa-recovery-dialog__warning'>
+            {t('core.login.mfa_recovery_codes_warning')}
+          </Text>
+        </View>
+        <View className='mfa-recovery-dialog__footer'>
+          <Button className='mfa-recovery-dialog__confirm' onClick={() => void onConfirm()}>
+            {t('core.login.mfa_recovery_codes_confirm')}
+          </Button>
+        </View>
+      </View>
+    </View>
+  )
+}

package/src/components/MfaSetupPanel.scss

@@ -0,0 +1,70 @@
+.mfa-setup-panel__qr {
+  display: block;
+  width: min(360px, 100%);
+  aspect-ratio: 1;
+  margin: 0 auto 24px;
+}
+
+.mfa-setup-panel__uri {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+  margin-bottom: 20px;
+}
+
+.mfa-setup-panel__uri-text {
+  flex: 1;
+  min-width: 0;
+  color: #666;
+  font-size: 24px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+.mfa-setup-panel__copy {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 58px;
+  min-width: 58px;
+  height: 58px;
+  margin: 0;
+  padding: 0;
+  color: #27ba9b;
+  background: #f0fbf8;
+  border: 0;
+  border-radius: 8px;
+}
+
+.mfa-setup-panel__copy::after {
+  border: 0;
+}
+
+.mfa-setup-panel__copy-icon {
+  position: relative;
+  display: block;
+  width: 18px;
+  height: 18px;
+  color: currentColor;
+}
+
+.mfa-setup-panel__copy-back,
+.mfa-setup-panel__copy-front {
+  position: absolute;
+  width: 12px;
+  height: 14px;
+  border: 1.5px solid currentColor;
+  border-radius: 3px;
+  box-sizing: border-box;
+}
+
+.mfa-setup-panel__copy-back {
+  top: 0;
+  left: 0;
+}
+
+.mfa-setup-panel__copy-front {
+  right: 0;
+  bottom: 0;
+  background: #f0fbf8;
+}

package/src/components/MfaSetupPanel.tsx

@@ -0,0 +1,51 @@
+import { Button, Image, Text, View } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import generateQrCode from 'qrcode-generator'
+import { useMemo } from 'react'
+import { useI18n } from '../locales'
+import './MfaSetupPanel.scss'
+
+/** MFA TOTP 绑定面板属性。 */
+export interface MfaSetupPanelProps {
+  /** TOTP 绑定地址。 */
+  uri: string
+}
+
+/** 统一展示 TOTP 二维码、绑定地址和复制操作。 */
+export default function MfaSetupPanel({ uri }: MfaSetupPanelProps) {
+  const { t } = useI18n()
+  const qrDataUrl = useMemo(() => {
+    if (!uri) return ''
+    const code = generateQrCode(0, 'M')
+    code.addData(uri)
+    code.make()
+    return code.createDataURL(4, 8)
+  }, [uri])
+
+  if (!uri) return null
+
+  /** 复制 TOTP 绑定地址。 */
+  const copySetupUri = async () => {
+    await Taro.setClipboardData({ data: uri })
+    await Taro.showToast({ icon: 'none', title: t('core.login.mfa_copy_success') })
+  }
+
+  return (
+    <View className='mfa-setup-panel'>
+      {qrDataUrl ? <Image className='mfa-setup-panel__qr' src={qrDataUrl} mode='aspectFit' /> : null}
+      <View className='mfa-setup-panel__uri'>
+        <Text className='mfa-setup-panel__uri-text'>{uri}</Text>
+        <Button
+          className='mfa-setup-panel__copy'
+          aria-label={t('core.login.mfa_copy_uri')}
+          onClick={() => void copySetupUri()}
+        >
+          <View className='mfa-setup-panel__copy-icon' aria-hidden='true'>
+            <View className='mfa-setup-panel__copy-back' />
+            <View className='mfa-setup-panel__copy-front' />
+          </View>
+        </Button>
+      </View>
+    </View>
+  )
+}