springboot uniapp 验证码滑块

 java

  private final Map sliderPositions = new HashMap();
    @GetMapping("/captcha")
    public ResponseEntity getCaptcha() {
        try {
            // Width of the slider
            int sliderWidth = 50;
            // Total captcha width
//            int imageWidth = 200;
            int imageWidth = 300;
            // Total captcha height
            int imageHeight = 100;
            int sliderPosition = ThreadLocalRandom.current().nextInt(10, imageWidth - sliderWidth - 10);
            BufferedImage image = new BufferedImage(imageWidth, imageHeight, BufferedImage.TYPE_INT_RGB);
            Graphics2D graphics = image.createGraphics();
            // Background
            graphics.setColor(Color.LIGHT_GRAY);
            graphics.fillRect(0, 0, imageWidth, imageHeight);
            // Slider area
            graphics.setColor(Color.RED);
            graphics.fillRect(sliderPosition, 0, sliderWidth, imageHeight);
            graphics.dispose();
            ByteArrayOutputStream baos = new ByteArrayOutputStream();
            ImageIO.write(image, "png", baos);
            // Store the slider position for validation
            String sessionId = "user-session-id"; // This should be unique per user/session
            sliderPositions.put(sessionId, sliderPosition);
            return ResponseEntity.ok().contentType(MediaType.IMAGE_PNG).body(baos.toByteArray());
        } catch (Exception e) {
            e.printStackTrace();
            return new ResponseEntity(HttpStatus.INTERNAL_SERVER_ERROR);
        }
    }
    @PostMapping("/verify")
    public ResponseEntity verifyCaptcha(@RequestBody VerifyRequest request) {
        String sessionId = "user-session-id"; // This should match the session used in getCaptcha
        if (!sliderPositions.containsKey(sessionId)) {
            return ResponseEntity.status(HttpStatus.NOT_FOUND).body("Session not found");
        }
        int correctPosition = sliderPositions.get(sessionId);
        if (Math.abs(request.getSlideDistance() - correctPosition) 
     {
          if (res.statusCode === 200) {
            uni.showToast({ title: '验证成功', icon: 'success' });
          } else {
            uni.showToast({ title: '验证失败', icon: 'none' });
          }
          this.fetchCaptcha(); // 重新加载验证码
        },
      });
    },
  },
};


/* .container {
  position: relative;
  width: 200px; 
  height: 100px; 
  margin: 0 auto;
}
.captcha {
  width: 100%;
}
.slider {
  position: absolute;
  top: 0;
  width: 50px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: center;
  line-height: 100px; 
} */
.container {
  position: relative;
  width: 300px; 
  height: 100px; 
  /* margin: 0 auto; */
}
.captcha {
  height: 100px;
}
.slider {
  position: absolute;
  top: 0;
  width: 50px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: center;
  line-height: 100px; 
}

CaptchaPopup.vue

	
		
		
		
		
		
		
			
				
			
		
		打开
	


	import SliderCaptcha from '@/components/SliderCaptcha.vue';
	// import Popup from '@/components/uni-popup/uni-popup.vue'; // 确保路径正确
	export default {
		components: {
			SliderCaptcha
			// Popup
		},
		data() {
			return {
				show: false,
			};
		},
	};