鸿蒙Next开发中发送短信前如何实现图片验证码功能

在鸿蒙Next开发中，实现图片验证码功能可以按照以下步骤进行：

1. 后端生成验证码图片

首先，后端需要生成包含随机字符的图片验证码，并将验证码文本存储到Session或缓存中（如Redis），以便后续验证。

示例代码（Java Spring Boot）：

[@RestController](/user/RestController)
public class CaptchaController {
    @GetMapping("/captcha")
    public void generateCaptcha(HttpServletRequest request, HttpServletResponse response) throws IOException {
        // 生成随机验证码文本
        String captchaText = generateRandomText(4); // 例如4位随机字符
        
        // 将验证码文本存入Session
        request.getSession().setAttribute("captcha", captchaText);
        
        // 生成图片
        BufferedImage image = generateImage(captchaText);
        
        // 设置响应类型为图片
        response.setContentType("image/png");
        // 输出图片到响应流
        ImageIO.write(image, "PNG", response.getOutputStream());
    }
    
    private String generateRandomText(int length) {
        // 生成随机字母数字组合
        String chars = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789";
        StringBuilder sb = new StringBuilder();
        Random random = new Random();
        for (int i = 0; i < length; i++) {
            sb.append(chars.charAt(random.nextInt(chars.length())));
        }
        return sb.toString();
    }
    
    private BufferedImage generateImage(String text) {
        // 创建图片并绘制文本
        int width = 100, height = 40;
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        Graphics2D g = image.createGraphics();
        g.setColor(Color.WHITE);
        g.fillRect(0, 0, width, height);
        g.setColor(Color.BLACK);
        g.setFont(new Font("Arial", Font.BOLD, 20));
        g.drawString(text, 10, 25);
        g.dispose();
        return image;
    }
}

2. 前端显示验证码图片

在鸿蒙应用的UI中，使用Image组件加载验证码图片，并添加点击刷新功能。

示例代码（ArkTS）：

[@Entry](/user/Entry)
[@Component](/user/Component)
struct CaptchaPage {
  @State captchaUrl: string = 'http://your-backend/captcha?t=' + Date.now(); // 加时间戳避免缓存

  build() {
    Column() {
      // 显示验证码图片
      Image(this.captchaUrl)
        .width(100)
        .height(40)
        .onClick(() => {
          // 点击刷新验证码
          this.refreshCaptcha();
        })

      // 输入框用于填写验证码
      TextInput({ placeholder: '请输入验证码' })
        .width('80%')
        .margin({ top: 20 })

      // 提交按钮
      Button('发送短信')
        .onClick(() => {
          // 调用验证接口
          this.verifyAndSendSms();
        })
    }
  }

  // 刷新验证码
  refreshCaptcha() {
    this.captchaUrl = 'http://your-backend/captcha?t=' + Date.now();
  }

  // 验证并发送短信
  async verifyAndSendSms() {
    // 获取输入的验证码
    let userInput = ...; // 从TextInput获取输入

    // 调用后端验证接口
    let result = await httpRequest.post('/verify-captcha', { captcha: userInput });
    if (result.success) {
      // 验证通过，调用发送短信接口
      await httpRequest.post('/send-sms', { phone: '手机号' });
    } else {
      // 验证失败，提示用户
      promptAction.showToast({ message: '验证码错误' });
    }
  }
}

3. 后端验证验证码

用户提交验证码后，后端需要验证输入是否与Session中存储的一致。

示例代码（Java）：

[@PostMapping](/user/PostMapping)("/verify-captcha")
public ResponseEntity<?> verifyCaptcha([@RequestBody](/user/RequestBody) Map<String, String> data, HttpServletRequest request) {
    String userInput = data.get("captcha");
    String sessionCaptcha = (String) request.getSession().getAttribute("captcha");
    
    if (userInput != null && userInput.equalsIgnoreCase(sessionCaptcha)) {
        // 验证成功，清除Session中的验证码（防止重复使用）
        request.getSession().removeAttribute("captcha");
        return ResponseEntity.ok().body(Map.of("success", true));
    } else {
        return ResponseEntity.badRequest().body(Map.of("success", false, "message", "验证码错误"));
    }
}

注意事项：

• 安全性：验证码应设置有效期（如2分钟），并防止暴力破解（如限制尝试次数）。
• 用户体验：提供验证码刷新功能，避免用户看不清时无法操作。
• 网络请求：在鸿蒙应用中，使用@ohos.net.http模块进行HTTP通信。

通过以上步骤，你可以在发送短信前集成图片验证码功能，有效防止恶意请求。