OpenHarmony验证码怎么开发

在 OpenHarmony（HarmonyOS NEXT / 标准系统）里，“验证码”通常分两类：

1. 图形验证码（滑块 / 字符）
2. 短信 / 邮箱验证码（后端下发）

下面分别说明前端（ArkTS）怎么开发，以及常见实现思路。

一、短信 / 邮箱验证码（最常见）

1️⃣ 前端（ArkTS）流程

// 发送验证码
Button('获取验证码')
  .onClick(() => {
    sendCode('13800000000')
  })

// 输入框
TextInput({ placeholder: '请输入验证码' })
  .onChange((val) => {
    code = val
  })

// 登录
Button('登录')
  .onClick(() => {
    verifyCode('13800000000', code)
  })

2️⃣ 调用后端接口（HTTP）

import http from '@ohos.net.http'

async function sendCode(phone: string) {
  const req = http.createHttp()
  await req.request(
    'https://your-api.com/sendCode',
    {
      method: http.RequestMethod.POST,
      extraData: { phone }
    }
  )
}

⚠️ 验证码逻辑 必须在后端实现
前端不能生成或校验验证码

二、图形验证码（前端生成）

方式一：Canvas 自己画（推荐学习）

// 生成 4 位随机字符
function genCode(): string {
  const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'
  let code = ''
  for (let i = 0; i < 4; i++) {
    code += chars[Math.floor(Math.random() * chars.length)]
  }
  return code
}

在 Canvas 上绘制：

Canvas(this.context)
  .onReady(() => {
    this.context.fillText(code, 20, 40)
  })

方式二：后端返回图片（更安全）

Image('https://your-api.com/captcha')

点击刷新：

Image(this.captchaUrl)
  .onClick(() => {
    this.captchaUrl = 'https://your-api.com/captcha?t=' + Date.now()
  })

三、倒计时功能（获取验证码）

@State count: number = 60

startCountdown() {
  const timer = setInterval(() => {
    this.count--
    if (this.count === 0) clearInterval(timer)
  }, 1000)
}

Button(this.count > 0 ? `${this.count}s` : '获取验证码')
  .enabled(this.count === 0)

四、安全建议（重要）

✅ 验证码必须 后端校验
✅ 短信验证码要 限流（60s 一次）
✅ 图形验证码要 带 session / token
✅ 不要在前端写死正确验证码

五、你可以告诉我

为了给你更精准的代码，我需要知道：

1. 你是 OpenHarmony 标准系统 还是 HarmonyOS NEXT
2. 验证码类型：短信 / 图形 / 滑块
3. 是否有后端（Node / Java / Spring）

我可以直接给你 完整 Demo 代码。