@liujitcn/kratos-taro-app-core 0.0.1

package/src/utils/passwordCrypto.ts

@@ -0,0 +1,257 @@
+import Taro from '@tarojs/taro'
+import * as miniCrypto from 'asmcrypto.js'
+import { defLoginService } from '../api/base/login'
+import { PasswordCryptoScene } from '../rpc/common/v1/enum'
+import type { PasswordCrypto } from '../rpc/common/v1/types'
+
+type MiniCrypto = typeof import('asmcrypto.js')
+
+export const PASSWORD_CRYPTO_SCENE = PasswordCryptoScene
+export type { PasswordCryptoScene }
+
+/** 将 PEM 公钥转换为二进制 DER 数据。 */
+function pemToArrayBuffer(pem: string) {
+  const base64 = pem
+    .replace(/-----BEGIN PUBLIC KEY-----/g, '')
+    .replace(/-----END PUBLIC KEY-----/g, '')
+    .replace(/\s/g, '')
+  const decode = globalThis.atob
+  if (!decode) {
+    throw new Error('当前环境不支持 Base64 解码')
+  }
+  const binary = decode(base64)
+  const buffer = new Uint8Array(binary.length)
+  for (let i = 0; i < binary.length; i += 1) {
+    buffer[i] = binary.charCodeAt(i)
+  }
+  return buffer.buffer
+}
+
+/** 将二进制数据编码为 base64 字符串。 */
+function arrayBufferToBase64(buffer: ArrayBuffer) {
+  const bytes = new Uint8Array(buffer)
+  let binary = ''
+  for (let i = 0; i < bytes.byteLength; i += 1) {
+    binary += String.fromCharCode(bytes[i])
+  }
+  const encode = globalThis.btoa
+  if (!encode) {
+    throw new Error('当前环境不支持 Base64 编码')
+  }
+  return encode(binary)
+}
+
+/** 生成纯 JavaScript 密码加密所需的随机字节。 */
+function getRandomBytes(length: number) {
+  const cryptoApi = globalThis.crypto
+  if (cryptoApi?.getRandomValues) {
+    return Promise.resolve(cryptoApi.getRandomValues(new Uint8Array(length)).buffer)
+  }
+  return Taro.getRandomValues({ length }).then(({ randomValues }) => randomValues)
+}
+
+type DerNode = {
+  tag: number
+  value: Uint8Array
+  next: number
+}
+
+/** 读取 DER 编码节点，用于解析 RSA SubjectPublicKeyInfo。 */
+function readDerNode(data: Uint8Array, offset: number): DerNode {
+  if (offset + 2 > data.length) {
+    throw new Error('公钥格式无效')
+  }
+  const tag = data[offset]
+  const firstLengthByte = data[offset + 1]
+  let length = firstLengthByte
+  let valueOffset = offset + 2
+  if (firstLengthByte & 0x80) {
+    const lengthByteCount = firstLengthByte & 0x7f
+    if (lengthByteCount === 0 || valueOffset + lengthByteCount > data.length) {
+      throw new Error('公钥格式无效')
+    }
+    length = 0
+    for (let index = 0; index < lengthByteCount; index += 1) {
+      length = length * 256 + data[valueOffset + index]
+    }
+    valueOffset += lengthByteCount
+  }
+  const end = valueOffset + length
+  if (end > data.length) {
+    throw new Error('公钥格式无效')
+  }
+  return {
+    tag,
+    value: data.subarray(valueOffset, end),
+    next: end,
+  }
+}
+
+/** 去除 DER 正整数前导零字节。 */
+function trimDerInteger(value: Uint8Array) {
+  let offset = 0
+  while (offset < value.length - 1 && value[offset] === 0) {
+    offset += 1
+  }
+  return value.subarray(offset)
+}
+
+/** 从 PEM SubjectPublicKeyInfo 中提取 RSA 模数和指数。 */
+function parseMiniRsaPublicKey(publicKey: string): [Uint8Array, Uint8Array] {
+  const base64 = publicKey
+    .replace(/-----BEGIN PUBLIC KEY-----/g, '')
+    .replace(/-----END PUBLIC KEY-----/g, '')
+    .replace(/\s/g, '')
+  const der = new Uint8Array(Taro.base64ToArrayBuffer(base64))
+  const subjectPublicKeyInfo = readDerNode(der, 0)
+  const algorithm = readDerNode(subjectPublicKeyInfo.value, 0)
+  const bitString = readDerNode(subjectPublicKeyInfo.value, algorithm.next)
+  if (bitString.tag !== 0x03 || bitString.value[0] !== 0) {
+    throw new Error('公钥格式无效')
+  }
+  const rsaPublicKey = readDerNode(bitString.value, 1)
+  const modulus = readDerNode(rsaPublicKey.value, 0)
+  const exponent = readDerNode(rsaPublicKey.value, modulus.next)
+  if (modulus.tag !== 0x02 || exponent.tag !== 0x02) {
+    throw new Error('公钥格式无效')
+  }
+  return [trimDerInteger(modulus.value), trimDerInteger(exponent.value)]
+}
+
+/** 计算 RSA-OAEP 所需的 MGF1 掩码。 */
+function generateMgf1Mask(crypto: MiniCrypto, seed: Uint8Array, length: number) {
+  const mask = new Uint8Array(length)
+  const counter = new Uint8Array(4)
+  const hash = new crypto.Sha256()
+  const blockCount = Math.ceil(length / hash.HASH_SIZE)
+  for (let index = 0; index < blockCount; index += 1) {
+    counter[0] = index >>> 24
+    counter[1] = index >>> 16
+    counter[2] = index >>> 8
+    counter[3] = index
+    let block = hash.reset().process(seed).process(counter).finish().result
+    if (!block) {
+      throw new Error('密码加密失败')
+    }
+    const target = mask.subarray(index * hash.HASH_SIZE)
+    if (block.length > target.length) {
+      block = block.subarray(0, target.length)
+    }
+    target.set(block)
+  }
+  return mask
+}
+
+/** 将字节数组编码为当前运行端可提交的 Base64。 */
+function miniBytesToBase64(value: Uint8Array) {
+  const buffer = value.slice().buffer
+  return process.env.TARO_ENV === 'h5'
+    ? arrayBufferToBase64(buffer)
+    : Taro.arrayBufferToBase64(buffer)
+}
+
+/** 使用纯 JavaScript 实现兼容缺少 WebCrypto 的运行时。 */
+async function encryptPortablePassword(
+  crypto: MiniCrypto,
+  password: string,
+  publicKeyResponse: {
+    key_id: string
+    public_key: string
+    algorithm: string
+    nonce: string
+  },
+): Promise<PasswordCrypto> {
+  const aesKey = new Uint8Array(await getRandomBytes(32))
+  const iv = new Uint8Array(await getRandomBytes(12))
+  const plaintext = crypto.string_to_bytes(password, true)
+  const [modulus, exponent] = parseMiniRsaPublicKey(publicKeyResponse.public_key)
+  const hash = new crypto.Sha256()
+  const keySize = Math.ceil(new crypto.BigNumber(modulus).bitLength / 8)
+  const seed = new Uint8Array(await getRandomBytes(hash.HASH_SIZE))
+  const dataBlockLength = keySize - hash.HASH_SIZE - 1
+  const paddingLength = dataBlockLength - aesKey.length - hash.HASH_SIZE - 1
+  if (paddingLength < 0) {
+    throw new Error('密码长度超出限制')
+  }
+  const encodedMessage = new Uint8Array(keySize)
+  const maskedSeed = encodedMessage.subarray(1, hash.HASH_SIZE + 1)
+  const dataBlock = encodedMessage.subarray(hash.HASH_SIZE + 1)
+  const labelHash = hash.reset().process(new Uint8Array()).finish().result
+  if (!labelHash) {
+    throw new Error('密码加密失败')
+  }
+  dataBlock.set(labelHash, 0)
+  dataBlock.set(aesKey, hash.HASH_SIZE + paddingLength + 1)
+  dataBlock[hash.HASH_SIZE + paddingLength] = 1
+  const dataBlockMask = generateMgf1Mask(crypto, seed, dataBlock.length)
+  for (let index = 0; index < dataBlock.length; index += 1) {
+    dataBlock[index] ^= dataBlockMask[index]
+  }
+  const seedMask = generateMgf1Mask(crypto, dataBlock, maskedSeed.length)
+  maskedSeed.set(seed)
+  for (let index = 0; index < maskedSeed.length; index += 1) {
+    maskedSeed[index] ^= seedMask[index]
+  }
+  const encryptedKey = new crypto.RSA([modulus, exponent]).encrypt(
+    new crypto.BigNumber(encodedMessage),
+  ).result
+  if (!encryptedKey) {
+    throw new Error('密码加密失败')
+  }
+  const ciphertext = crypto.AES_GCM.encrypt(plaintext, aesKey, iv)
+  return {
+    key_id: publicKeyResponse.key_id,
+    nonce: publicKeyResponse.nonce,
+    algorithm: publicKeyResponse.algorithm,
+    encrypted_key: miniBytesToBase64(encryptedKey),
+    iv: miniBytesToBase64(iv),
+    ciphertext: miniBytesToBase64(ciphertext),
+  }
+}
+
+/** 加密单个密码字段，返回后端可解析的密码密文。 */
+export async function encryptPassword(
+  password: string,
+  scene: PasswordCryptoScene,
+): Promise<PasswordCrypto> {
+  const plainPassword = password.trim()
+  if (!plainPassword) {
+    throw new Error('密码不能为空')
+  }
+
+  const publicKeyResponse = await defLoginService.PasswordPublicKey({ scene })
+
+  const cryptoApi = globalThis.crypto
+  // 微信小程序和局域网 HTTP 页面没有 WebCrypto，使用纯 JavaScript 实现保持协议一致。
+  if (process.env.TARO_ENV === 'weapp' || !cryptoApi?.subtle) {
+    return encryptPortablePassword(miniCrypto, plainPassword, publicKeyResponse)
+  }
+
+  const publicKey = await cryptoApi.subtle.importKey(
+    'spki',
+    pemToArrayBuffer(publicKeyResponse.public_key),
+    { name: 'RSA-OAEP', hash: 'SHA-256' },
+    false,
+    ['encrypt'],
+  )
+  const aesKey = await cryptoApi.subtle.generateKey({ name: 'AES-GCM', length: 256 }, true, [
+    'encrypt',
+  ])
+  const rawAesKey = await cryptoApi.subtle.exportKey('raw', aesKey)
+  const iv = cryptoApi.getRandomValues(new Uint8Array(12))
+  const ciphertext = await cryptoApi.subtle.encrypt(
+    { name: 'AES-GCM', iv },
+    aesKey,
+    new TextEncoder().encode(plainPassword),
+  )
+  const encryptedKey = await cryptoApi.subtle.encrypt({ name: 'RSA-OAEP' }, publicKey, rawAesKey)
+
+  return {
+    key_id: publicKeyResponse.key_id,
+    nonce: publicKeyResponse.nonce,
+    algorithm: publicKeyResponse.algorithm,
+    encrypted_key: arrayBufferToBase64(encryptedKey),
+    iv: arrayBufferToBase64(iv.buffer),
+    ciphertext: arrayBufferToBase64(ciphertext),
+  }
+}

package/src/views/pages/index/index.scss

@@ -0,0 +1,137 @@
+.home-page {
+  min-height: 100vh;
+  padding: 44px 28px 156px;
+  box-sizing: border-box;
+  background-color: #f7f7f8;
+}
+
+.home-page--weapp {
+  padding-top: calc(44px + 44PX);
+}
+
+.home-hero {
+  display: flex;
+  align-items: center;
+  padding: 34px 28px;
+  border-radius: 12px;
+  background-color: #27ba9b;
+  box-shadow: 0 8px 18px rgba(39, 186, 155, 0.18);
+}
+
+.home-logo {
+  flex: 0 0 auto;
+  width: 92px;
+  height: 92px;
+  border-radius: 20px;
+  background-color: #fff;
+}
+
+.home-hero__copy {
+  min-width: 0;
+  margin-left: 22px;
+}
+
+.home-title,
+.home-subtitle {
+  display: block;
+}
+
+.home-title {
+  color: #fff;
+  font-size: 40px;
+  font-weight: 600;
+}
+
+.home-subtitle {
+  margin-top: 10px;
+  color: rgba(255, 255, 255, 0.86);
+  font-size: 24px;
+}
+
+.home-section {
+  margin-top: 24px;
+}
+
+.home-section__title {
+  display: block;
+  margin: 0 8px 14px;
+  color: #26332f;
+  font-size: 28px;
+  font-weight: 600;
+}
+
+.home-info-list,
+.home-demo-list {
+  overflow: hidden;
+  border-radius: 10px;
+  background-color: #fff;
+}
+
+.home-info-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 26px 24px;
+  border-bottom: 1px solid #edf1ef;
+
+  &:last-child {
+    border-bottom: 0;
+  }
+}
+
+.home-info-label {
+  color: #66736f;
+  font-size: 26px;
+}
+
+.home-info-value {
+  color: #26332f;
+  font-size: 26px;
+  font-weight: 500;
+}
+
+.home-demo-item {
+  display: flex;
+  align-items: flex-start;
+  padding: 26px 24px;
+  border-bottom: 1px solid #edf1ef;
+
+  &:last-child {
+    border-bottom: 0;
+  }
+}
+
+.home-demo-dot {
+  flex: 0 0 auto;
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  background-color: #e8f8f4;
+  color: #16806d;
+  font-size: 24px;
+  line-height: 42px;
+  text-align: center;
+}
+
+.home-demo-copy {
+  min-width: 0;
+  margin-left: 18px;
+}
+
+.home-demo-title,
+.home-demo-desc {
+  display: block;
+}
+
+.home-demo-title {
+  color: #26332f;
+  font-size: 28px;
+  font-weight: 500;
+}
+
+.home-demo-desc {
+  margin-top: 8px;
+  color: #8a9691;
+  font-size: 24px;
+  line-height: 1.5;
+}

package/src/views/pages/index/index.tsx

@@ -0,0 +1,74 @@
+import { Image, Text, View } from '@tarojs/components'
+import { useLoad } from '@tarojs/taro'
+import { resolveBundledAsset } from '../../../module'
+import { useSettingStore } from '../../../stores'
+import './index.scss'
+
+const defaultLogo = resolveBundledAsset('static/images/logo_icon.png')
+
+/** 应用首页。 */
+export default function HomePage() {
+  const settings = useSettingStore((state) => state.data)
+  const loadData = useSettingStore((state) => state.loadData)
+  const mainTitle = settings?.get('mainTitle') || '应用框架示例'
+  const subTitle = settings?.get('subTitle') || '保留通用导航与个人中心体验'
+  const appLogo = settings?.get('appLogo') || defaultLogo
+  useLoad(() => {
+    void loadData().catch(() => undefined)
+  })
+
+  const stack = [
+    ['应用框架', 'Taro + React 18'],
+    ['开发语言', 'TypeScript'],
+    ['状态管理', 'Zustand'],
+    ['样式方案', 'Sass + px'],
+  ]
+  const demos = [
+    ['跨端页面', '同一套页面代码适配 H5 和微信小程序'],
+    ['账户能力', '个人资料、应用设置与智能助手入口已保留'],
+    ['静态首页', '当前首页用于展示框架信息，不依赖业务接口'],
+  ]
+
+  return (
+    <View className={`home-page${process.env.TARO_ENV === 'weapp' ? ' home-page--weapp' : ''}`}>
+      <View className='home-hero'>
+        <Image
+          className='home-logo'
+          src={appLogo}
+          mode='aspectFit'
+        />
+        <View className='home-hero__copy'>
+          <Text className='home-title'>{mainTitle}</Text>
+          <Text className='home-subtitle'>{subTitle}</Text>
+        </View>
+      </View>
+
+      <View className='home-section'>
+        <Text className='home-section__title'>当前技术栈</Text>
+        <View className='home-info-list'>
+          {stack.map(([label, value]) => (
+            <View className='home-info-row' key={label}>
+              <Text className='home-info-label'>{label}</Text>
+              <Text className='home-info-value'>{value}</Text>
+            </View>
+          ))}
+        </View>
+      </View>
+
+      <View className='home-section'>
+        <Text className='home-section__title'>演示范围</Text>
+        <View className='home-demo-list'>
+          {demos.map(([title, description], index) => (
+            <View className='home-demo-item' key={title}>
+              <View className='home-demo-dot'>{index + 1}</View>
+              <View className='home-demo-copy'>
+                <Text className='home-demo-title'>{title}</Text>
+                <Text className='home-demo-desc'>{description}</Text>
+              </View>
+            </View>
+          ))}
+        </View>
+      </View>
+    </View>
+  )
+}

package/src/views/pages/login/components/BehaviorCaptcha.h5.tsx

@@ -0,0 +1,46 @@
+import GoCaptcha from 'go-captcha-react'
+import 'go-captcha-react/dist/go-captcha-react.cjs.development.css'
+import type { BehaviorCaptchaProps } from './types'
+
+/** H5 行为验证码适配器。 */
+export default function BehaviorCaptcha({
+  type,
+  data,
+  config,
+  onConfirm,
+  onRefresh,
+  onClose,
+}: BehaviorCaptchaProps) {
+  const events = { confirm: onConfirm, refresh: onRefresh, close: onClose }
+  if (type === 'click') {
+    return <GoCaptcha.Click data={{ image: data.image, thumb: data.thumb }} config={config} events={events} />
+  }
+  if (type === 'rotate') {
+    return (
+      <GoCaptcha.Rotate
+        data={{
+          image: data.image,
+          thumb: data.thumb,
+          thumbSize: data.thumbSize ?? 150,
+          angle: data.angle,
+        }}
+        config={config}
+        events={events}
+      />
+    )
+  }
+  return (
+    <GoCaptcha.Slide
+      data={{
+        image: data.image,
+        thumb: data.thumb,
+        thumbX: data.thumbX ?? 0,
+        thumbY: data.thumbY ?? 0,
+        thumbWidth: data.thumbWidth ?? 60,
+        thumbHeight: data.thumbHeight ?? 60,
+      }}
+      config={config}
+      events={events}
+    />
+  )
+}

package/src/views/pages/login/components/BehaviorCaptcha.tsx

@@ -0,0 +1,6 @@
+import type { BehaviorCaptchaProps } from './types'
+
+/** 非 H5 平台不渲染浏览器行为验证码。 */
+export default function BehaviorCaptcha(_props: BehaviorCaptchaProps) {
+  return null
+}

package/src/views/pages/login/components/BehaviorCaptcha.weapp.tsx

@@ -0,0 +1,6 @@
+import type { BehaviorCaptchaProps } from './types'
+
+/** 微信端不渲染 H5 行为验证码。 */
+export default function BehaviorCaptcha(_props: BehaviorCaptchaProps) {
+  return null
+}

package/src/views/pages/login/components/types.ts

@@ -0,0 +1,32 @@
+/** 行为验证码展示数据。 */
+export interface BehaviorCaptchaData {
+  image: string
+  thumb: string
+  thumbX?: number
+  thumbY?: number
+  thumbWidth?: number
+  thumbHeight?: number
+  thumbSize?: number
+  angle?: number
+}
+
+/** 行为验证码点位。 */
+export interface BehaviorCaptchaPoint {
+  x: number
+  y: number
+  key?: number
+  index?: number
+}
+
+/** 行为验证码组件参数。 */
+export interface BehaviorCaptchaProps {
+  type: string
+  data: BehaviorCaptchaData
+  config: Record<string, string | number | boolean>
+  onConfirm: (
+    value: BehaviorCaptchaPoint | BehaviorCaptchaPoint[] | number,
+    reset: () => void,
+  ) => void
+  onRefresh: () => void
+  onClose: () => void
+}