驗證碼作用

• 防止廣告機(jī)注冊等操作
• 防止暴力破解

Kaptcha驗證碼

• 引入第三方庫

<!--kaptcha 驗證碼 -->
<dependency>
    <groupId>com.github.penggle</groupId>
    <artifactId>kaptcha</artifactId>
    <version>2.3.2</version>
</dependency>

• 配置文件

/**
 * @Author Bertram.wang
 * @Date 2019年5月12日 下午10:48:58
 * @sign KaptchaConfig.java
 */
@Configuration
public class KaptchaConfig {
    @Bean
    public DefaultKaptcha defaultKaptcha() {
        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
        Properties properties = new Properties();
        // 字體
        properties.setProperty(Constants.KAPTCHA_TEXTPRODUCER_FONT_NAMES, "宋體,楷體,微軟雅黑");
        properties.setProperty(Constants.KAPTCHA_BORDER, "no");
        
        Config config = new Config(properties);
        defaultKaptcha.setConfig(config);
        return defaultKaptcha;
    } 
}

配置參數(shù)：

package com.google.code.kaptcha;

public class Constants
{
    
    public final static String KAPTCHA_SESSION_KEY = "KAPTCHA_SESSION_KEY";

    public final static String KAPTCHA_SESSION_DATE = "KAPTCHA_SESSION_DATE";

    public final static String KAPTCHA_SESSION_CONFIG_KEY = "kaptcha.session.key";

    public final static String KAPTCHA_SESSION_CONFIG_DATE = "kaptcha.session.date";
    // 圖片邊框，合法值：yes , no
    public final static String KAPTCHA_BORDER = "kaptcha.border";
    // 邊框顏色，合法值： rgb (and optional alpha) 或者 white,black,blue.
    public final static String KAPTCHA_BORDER_COLOR = "kaptcha.border.color";
    // 邊框厚度，合法值：>0
    public final static String KAPTCHA_BORDER_THICKNESS = "kaptcha.border.thickness";
    // 干擾顏色，合法值： r,g,b 或者 white,black,blue.
    public final static String KAPTCHA_NOISE_COLOR = "kaptcha.noise.color";
    // 干擾實現(xiàn)類
    public final static String KAPTCHA_NOISE_IMPL = "kaptcha.noise.impl";
    // 圖片樣式：
    // 水紋com.google.code.kaptcha.impl.WaterRipple
    // 魚眼com.google.code.kaptcha.impl.FishEyeGimpy
    // 陰影com.google.code.kaptcha.impl.ShadowGimpy
    public final static String KAPTCHA_OBSCURIFICATOR_IMPL = "kaptcha.obscurificator.impl";
    // 背景實現(xiàn)類
    public final static String KAPTCHA_PRODUCER_IMPL = "kaptcha.producer.impl";
    // 文本實現(xiàn)類
    public final static String KAPTCHA_TEXTPRODUCER_IMPL = "kaptcha.textproducer.impl";
    // 文本集合，驗證碼值從此集合中獲取
    public final static String KAPTCHA_TEXTPRODUCER_CHAR_STRING = "kaptcha.textproducer.char.string";
    // 驗證碼長度
    public final static String KAPTCHA_TEXTPRODUCER_CHAR_LENGTH = "kaptcha.textproducer.char.length";
    // 字體
    public final static String KAPTCHA_TEXTPRODUCER_FONT_NAMES = "kaptcha.textproducer.font.names";
    // 字體顏色，合法值： r,g,b  或者 white,black,blue.
    public final static String KAPTCHA_TEXTPRODUCER_FONT_COLOR = "kaptcha.textproducer.font.color";
    // 字體大小
    public final static String KAPTCHA_TEXTPRODUCER_FONT_SIZE = "kaptcha.textproducer.font.size";
    // 文字間隔
    public final static String KAPTCHA_TEXTPRODUCER_CHAR_SPACE = "kaptcha.textproducer.char.space";
    // 文字渲染器    
    public final static String KAPTCHA_WORDRENDERER_IMPL = "kaptcha.word.impl";
    // 背景實現(xiàn)類
    public final static String KAPTCHA_BACKGROUND_IMPL = "kaptcha.background.impl";
    // 背景顏色漸變，開始顏色
    public static final String KAPTCHA_BACKGROUND_CLR_FROM = "kaptcha.background.clear.from";
    // 背景顏色漸變，結(jié)束顏色
    public static final String KAPTCHA_BACKGROUND_CLR_TO = "kaptcha.background.clear.to";
    // 圖片寬
    public static final String KAPTCHA_IMAGE_WIDTH = "kaptcha.image.width";
    // 圖片高
    public static final String KAPTCHA_IMAGE_HEIGHT = "kaptcha.image.height";
}

• controller控制器

/**
 * @Author Bertram.wang
 * @Date 2019年5月12日 下午10:51:59
 * @sign KaptchaController.java
 */
@Controller
public class KaptchaController {
    @Autowired
    private DefaultKaptcha defaultKaptcha;
    @Autowired
    private RedisRepository redisRepository;
    /**
     * 驗證碼生成
     */
    @RequestMapping("/captcha.jpg")
    public void captcha(HttpServletResponse response) throws IOException {
        response.setHeader("Cache-Control", "no-store, no-cache");
        response.setContentType("image/jpeg");

        // 生成文字驗證碼
        String text = defaultKaptcha.createText();
        // 生成圖片驗證碼
        BufferedImage image = defaultKaptcha.createImage(text);
        // 保存到shiro session
        redisRepository.set(RedisKey.kaptchaCode(text), text);

        ServletOutputStream out = response.getOutputStream();
        ImageIO.write(image, "jpg", out);
        out.flush();
    }

}

• 登錄頁面Login.vue

    <template>
        <el-form :model="user" ref="loginForm" :rules="rules" class="login-container" label-position="left" label-width="0px" v-loading="loading">
            <h3 class="login_title">系統(tǒng)登錄</h3>
            <el-form-item prop="phone">
                <el-input type="text" v-model="user.name" auto-complete="off" placeholder="賬號"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="user.password" auto-complete="off" placeholder="密碼"></el-input>
            </el-form-item>
            <el-form-item prop="kaptcha">
                <el-input type="text" v-model="user.kaptcha" auto-complete="off" placeholder="驗證碼"></el-input>
            </el-form-item>
            <el-form-item style="width: 100%" class="login_remember">
                   <!--驗證碼-->
                <el-image :src="kaptcha" @click="refreshCode" alt="加載失敗" >
                    <div slot="placeholder" class="image-slot">
                        <i class="el-icon-loading"></i>
                    </div>
                </el-image>
                <el-link class="rele_code" type="primary" @click="refreshCode">刷新</el-link>
                <el-button class="login_button" type="primary" @click="submitClick">登錄</el-button>
            </el-form-item>
        </el-form>
    </template>

    <script lang="ts">
        import { Component, Prop, Vue } from 'vue-property-decorator';
        import {User} from "@/entity/User"; 
        @Component({})
        export default class Login extends Vue {
            @Prop() private msg!: string;
            public user:User = new User("","","");
            rules:object = {
                name: [{required: true, message: '請輸入用戶名', trigger: 'blur'}],
                password: [{required: true, message: '請輸入密碼', trigger: 'blur'}],
                kaptcha: [{required: true, message: '請輸入驗證碼', trigger: 'blur'}],
            }
            loading:boolean = false;

            kaptcha: string = "http://localhost/vueweb/captcha.jpg?t=" + new Date().getTime();

            refreshCode(): void {
                this.kaptcha = "http://localhost/vueweb/captcha.jpg?t=" + new Date().getTime();
            }
        }
    </script>

驗證碼集成使用完成。
注： mybatis-plus使用細(xì)節(jié)-菜單角色等維護(hù)。