Apollo配置中心登陆页面添加验证码

原创

已于 2025-05-15 16:21:42 修改 · 1.1k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#Apollo登陆页面添加验证码 #Apollo配置中心添加验证码 #登陆页面添加验证码 #使用hutool-all工具 #hutool工具包生成验证码 #apollo二次开发

于 2025-04-03 18:22:13 首次发布

效果图

软件环境

apollo配置中心，官方下载地址： https://github.com/apolloconfig/apollo

apollo配置中心，官方文档：Apollo

验证码工具：hutool-all 5.8.36 官方网址：https://github.com/chinabugotech/hutool

说明：

1、hutool的验证码实现不兼容毕昇jdk，需要换实现

2、20250410作者针对此问题更新了文章，添加了Kaptcha实现方案的代码

需求说明

1、登陆页面添加验证码支持

2、验证码正确才能登陆成功

3、验证码为空或不正确需在登陆页面提示出来

4、不能影响现有功能和性能

5、验证码获取与校验需要在0.5s内完成

登陆页面添加验证码

二开login.html

<!--  在密码表单的div后面添加如下代码    -->
<div class="form-group">
    <input type="text" name="captcha" tabindex="3"
           class="form-control" placeholder="Enter Captcha">
    <img src="/createCaptcha" alt="Captcha" />
</div>

maven配置

pom.xml

说明：

不做表单密码加密传输的不需要升级bcprov，表单密码加密传输见作者另一篇文章

Apollo配置中心登陆页面表单密码加密提交-优快云博客

<!-- 工具包，包含验证码、加解密（无底层实现） -->
<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>5.8.36</version>
</dependency>

<!-- 加解密（底层实现），低版本的可能需要升级 -->
<dependency>
	<groupId>org.bouncycastle</groupId>
	<artifactId>bcprov-jdk18on</artifactId>
	<version>1.80</version>
</dependency>

小知识：

一般bcprov包并非直接引用，升级自带加解密包时可从对应依赖中先排除，然后添加新版本pom依赖。

二开Filter

二开或添加新的Filter皆可

public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
    HttpServletRequest httpRequest = (HttpServletRequest) request;
    HttpServletResponse httpResponse = (HttpServletResponse) response;

    ....... // 其他代码
    
    // 验证码支持
    if(isLoginRequest2(httpRequest, httpResponse)){

        String captchaCode1 = obtainCaptchaCode1(httpRequest );
        String captcha = obtainCaptchaCode( httpRequest );
        if(StringUtil.isEmpty(captcha)){
            httpResponse.sendRedirect("signin#/error");
            return;
        }
        if(!captcha.equalsIgnoreCase(captchaCode1)){
            httpResponse.sendRedirect("signin#/error");
            return;
        }
    }

    ....... // 其他代码
     
    chain.doFilter(request, response);
}

/**
 * 判断是否登陆请求
 * 
 * @param request
 * @param response
 * @return
 */
private boolean isLoginRequest2(HttpSe