Base64 Captcha with SpringBoot: Serve to Vue and Cache in Redis for 2 Minutes

Scenario: A Vue login page needs a captcha image. The frontend sends a request to a SpringBoot API, which generates the image, encodes it in Base64, and returns it for display.

Implementation steps:

Generate a random 4‑character string using VerifyCodeUtils.generateVerifyCode(4).

Create a unique identifier (UUID) with IdUtils.simpleUUID() and build a Redis key by concatenating a constant prefix.

Store the captcha text in Redis with a two‑minute TTL using

redisCache.setCacheObject(verifyKey, verifyCode, Constants.CAPTCHA_EXPIRATION, TimeUnit.MINUTES)

.

Render the image (width 111, height 36) into a ByteArrayOutputStream via VerifyCodeUtils.outputImage(w, h, stream, verifyCode).

Encode the byte array to a Base64 string and place it in the JSON response together with the UUID.

SpringBoot controller code:

<code><span>@GetMapping("/captchaImage")</span>
<span>public AjaxResult getCode(HttpServletResponse response) throws IOException {</span>
    <span>// generate random string</span>
    String verifyCode = VerifyCodeUtils.generateVerifyCode(4);
    <span>// unique identifier</span>
    String uuid = IdUtils.simpleUUID();
    String verifyKey = Constants.CAPTCHA_CODE_KEY + uuid;
    redisCache.setCacheObject(verifyKey, verifyCode, Constants.CAPTCHA_EXPIRATION, TimeUnit.MINUTES);
    <span>// generate image</span>
    int w = 111, h = 36;
    ByteArrayOutputStream stream = new ByteArrayOutputStream();
    VerifyCodeUtils.outputImage(w, h, stream, verifyCode);
    try {
        AjaxResult ajax = AjaxResult.success();
        ajax.put("uuid", uuid);
        ajax.put("img", Base64.encode(stream.toByteArray()));
        return ajax;
    } catch (Exception e) {
        e.printStackTrace();
        return AjaxResult.error(e.getMessage());
    } finally {
        stream.close();
    }
}</code>

On the Vue side, the returned image string is displayed using the data‑URL format: data:image/gif;base64,{{ img }} During login, the frontend submits the UUID and the user‑entered code; the backend checks whether the UUID exists in Redis and whether the stored code matches, thereby confirming the captcha’s validity within the two‑minute window.

For the full implementation, see the linked CSDN blog post.