SpringBoot使用Captcha生成验证码

下面是SpringBoot使用Captcha生成验证码的完整攻略。

1. 引入依赖

在pom.xml文件中引入Captcha依赖：

<dependency>
    <groupId>com.github.yingzhuo</groupId>
    <artifactId>captcha</artifactId>
    <version>0.5.0</version>
</dependency>

2. 生成验证码

在Controller里编写如下代码来生成验证码：

@GetMapping("/captcha")
public void captcha(HttpServletRequest request, HttpServletResponse response) throws IOException {
    // 设置响应头信息
    response.setContentType("image/png");
    response.setHeader("Cache-Control", "no-cache");

    // 获取验证码
    Captcha captcha = new Captcha.Builder(200, 50) // 设置图片大小
            .addText() // 添加文字验证码
            .addNoise(new StraightLineNoiseProducer()) // 添加干扰线
            .addNoise(new CircleNoiseProducer(Color.WHITE)) // 添加干扰噪音
            .addBackground(new GradiatedBackgroundProducer()) // 添加背景
            .build(); 

    // 将验证码保存到Session中
    request.getSession().setAttribute("captcha", captcha.getAnswer());

    // 将生成图片输出到响应流中
    ImageIO.write(captcha.getImage(), "png", response.getOutputStream());
}

3. 校验验证码

用户填写完成后，需要对验证码进行校验，校验代码如下：

@PostMapping("/login")
public String login(@RequestParam String username, @RequestParam String password, 
        @RequestParam String verifyCode, HttpSession session) {
    if (!session.getAttribute("captcha").toString().equalsIgnoreCase(verifyCode)) {
        // 验证码输入错误
        return "redirect:/login?error";
    }
    // 验证码输入正确，进行登录校验
    ...
}

示例一：使用Thymeleaf模板

假设我们现在需要在登录页面上面加入验证码输入框，代码如下：

<form th:action="@{/login}" th:method="POST">
    <div>
        <label>用户名：</label>
        <input type="text" name="username">
    </div>
    <div>
        <label>密码：</label>
        <input type="password" name="password">
    </div>
    <div>
        <label>验证码：</label>
        <input type="text" name="verifyCode">
        <img id="captcha_img" src="/captcha" alt="验证码">
        <a href="javascript:;" onclick="changeImg()">看不清，换一张</a>
    </div>
    <button type="submit">登录</button>
</form>

其中，/captcha为生成验证码的请求地址。

为了使“看不清，换一张”功能正常使用，我们添加了一个JavaScript函数，用于动态改变验证码的图片。

function changeImg() {
    var imgNode = document.getElementById("captcha_img");
    imgNode.src = "/captcha?t=" + new Date().getTime();
}

这个函数会更改/captcha请求后面的时间戳，从而使浏览器重新请求验证码。

示例二：使用Angular框架

代码如下：

<div ng-controller="LoginController">
    <form ng-submit="login()">
        <div>
            <label>用户名：</label>
            <input type="text" ng-model="username">
        </div>
        <div>
            <label>密码：</label>
            <input type="password" ng-model="password">
        </div>
        <div>
            <label>验证码：</label>
            <input type="text" ng-model="verifyCode">
            <img ng-src="{{captchaUrl}}">
            <a href="javascript:;" ng-click="refreshCaptcha()">看不清，换一张</a>
        </div>
        <button type="submit">登录</button>
    </form>
</div>

其中，LoginController的代码如下：

app.controller("LoginController", function($scope, $http) {
    $scope.login = function() {
        $http.post("/login", {
            username: $scope.username,
            password: $scope.password,
            verifyCode: $scope.verifyCode
        }).then(function(response) {
            console.log(response.data);
        });
    };

    $scope.refreshCaptcha = function() {
        var time = new Date().getTime();
        $scope.captchaUrl = "/captcha?t=" + time;
    };

    $scope.refreshCaptcha();
});

其中，$http用于向后台发送POST请求。refreshCaptcha函数用于更改图片的URL，从而使浏览器重新请求验证码。

以上就是SpringBoot使用Captcha生成验证码的完整攻略，希望对你有所帮助。