easy-captcha ialah perpustakaan kelas Java yang menjana kod pengesahan grafik. Ia menyokong jenis gif, Cina, aritmetik dan boleh digunakan dalam Java Web, JavaSE dan projek lain.
<guava.version>20.0</guava.version> <captcha.version>1.6.2</captcha.version> <dependency> <groupId>com.google.guava</groupId> <artifactId>guava</artifactId> <version>${guava.version}</version> </dependency> <dependency> <groupId>com.github.whvcse</groupId> <artifactId>easy-captcha</artifactId> <version>${captcha.version}</version> </dependency>
@Service public class CaptchaServiceImpl implements CaptchaService { /** * Local Cache 5分钟过期 */ Cache<String, String> localCache = CacheBuilder.newBuilder().maximumSize(1000).expireAfterAccess(5, TimeUnit.MINUTES).build(); @Override public void create(HttpServletResponse response, String uuid) throws IOException { response.setContentType("image/gif"); response.setHeader("Pragma", "No-cache"); response.setHeader("Cache-Control", "no-cache"); response.setDateHeader("Expires", 0); //生成验证码 SpecCaptcha captcha = new SpecCaptcha(150, 40); captcha.setLen(5); captcha.setCharType(Captcha.TYPE_DEFAULT); captcha.out(response.getOutputStream()); //保存到缓存 setCache(uuid, captcha.text()); } @Override public boolean validate(String uuid, String code) { //获取验证码 String captcha = getCache(uuid); //效验成功 if(code.equalsIgnoreCase(captcha)){ return true; } return false; } private void setCache(String key, String value){ localCache.put(key, value); } private String getCache(String key){ String captcha = localCache.getIfPresent(key); //删除验证码 if(captcha != null){ localCache.invalidate(key); } return captcha; } }
@Controller @AllArgsConstructor public class CaptchaController { private CaptchaService captchaService; @GetMapping("/captcha") public void captcha(HttpServletResponse response, String uuid)throws IOException { //uuid不能为空 AssertUtils.isBlank(uuid, ErrorCode.IDENTIFIER_NOT_NULL); //生成验证码 captchaService.create(response, uuid); } }
5. Front-end vue menambah cara kod memaparkan kod pengesahan yang dijana
<Motion :delay="200"> <el-form-item prop="verifyCode"> <el-input clearable v-model="ruleForm.verifyCode" placeholder="验证码" :prefix-icon="useRenderIcon(Line)" > <template v-slot:append> <img style=" vertical-align: middle; height: 40px; width: 100px; cursor: pointer; " :src="captchaUrl" @click="onRefreshCode" alt="" /> </template> </el-input> </el-form-item> </Motion>
<script setup lang="ts"> import Motion from "./utils/motion"; import { useRouter } from "vue-router"; import { message } from "@/utils/message"; import { loginRules } from "./utils/rule"; import { useNav } from "@/layout/hooks/useNav"; import type { FormInstance } from "element-plus"; import { useLayout } from "@/layout/hooks/useLayout"; import { useUserStoreHook } from "@/store/modules/user"; import { bg, avatar, illustration } from "./utils/static"; import { useRenderIcon } from "@/components/ReIcon/src/hooks"; import { ref, reactive, toRaw, onMounted, onBeforeUnmount } from "vue"; import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange"; import { initRouter } from "@/router/utils"; import { getUuid } from "@/utils/utils"; import dayIcon from "@/assets/svg/day.svg?component"; import darkIcon from "@/assets/svg/dark.svg?component"; import Lock from "@iconify-icons/ri/lock-fill"; import User from "@iconify-icons/ri/user-3-fill"; import Line from "@iconify-icons/ri/shield-keyhole-line"; import { getConfig } from "@/config"; defineOptions({ name: "Login" }); const router = useRouter(); const loading = ref(false); const ruleFormRef = ref<FormInstance>(); const captchaUrl = ref(""); const { Api } = getConfig(); const { initStorage } = useLayout(); initStorage(); const { dataTheme, dataThemeChange } = useDataThemeChange(); dataThemeChange(); const { title } = useNav(); const ruleForm = reactive({ username: "admin", password: "admin123", verifyCode: "", uuid: "" }); const onLogin = async (formEl: FormInstance | undefined) => { loading.value = true; if (!formEl) return; await formEl.validate((valid, fields) => { if (valid) { useUserStoreHook() .loginByUsername({ username: ruleForm.username, password: "admin123" }) .then(res => { if (res.code == 200) { // 获取后端路由 initRouter().then(() => { router.push("/"); message("登录成功", { type: "success" }); }); } }); } else { loading.value = false; return fields; } }); }; /** 使用公共函数,避免`removeEventListener`失效 */ function onkeypress({ code }: KeyboardEvent) { if (code === "Enter") { onLogin(ruleFormRef.value); } } function getCaptchaUrl() { ruleForm.uuid = getUuid(); captchaUrl.value = `${Api}/captcha?uuid=${ruleForm.uuid}`; } function onRefreshCode() { getCaptchaUrl(); } onMounted(() => { window.document.addEventListener("keypress", onkeypress); getCaptchaUrl(); }); onBeforeUnmount(() => { window.document.removeEventListener("keypress", onkeypress); }); </script> <template> <div class="select-none"> <img :src="bg" class="wave" / alt="Bagaimana springboot menyepadukan captcha mudah untuk merealisasikan paparan dan log masuk kod pengesahan imej" > <div class="flex-c absolute right-5 top-3"> <!-- 主题 --> <el-switch v-model="dataTheme" inline-prompt :active-icon="dayIcon" :inactive-icon="darkIcon" @change="dataThemeChange" /> </div> <div class="login-container"> <div class="img"> <component :is="toRaw(illustration)" /> </div> <div class="login-box"> <div class="login-form"> <avatar class="avatar" /> <Motion> <h3 class="outline-none">{{ title }}</h3> </Motion> <el-form ref="ruleFormRef" :model="ruleForm" :rules="loginRules" size="large" > <Motion :delay="100"> <el-form-item :rules="[ { required: true, message: '请输入账号', trigger: 'blur' } ]" prop="username" > <el-input clearable v-model="ruleForm.username" placeholder="账号" :prefix-icon="useRenderIcon(User)" /> </el-form-item> </Motion> <Motion :delay="150"> <el-form-item prop="password"> <el-input clearable show-password v-model="ruleForm.password" placeholder="密码" :prefix-icon="useRenderIcon(Lock)" /> </el-form-item> </Motion> <Motion :delay="200"> <el-form-item prop="verifyCode"> <el-input clearable v-model="ruleForm.verifyCode" placeholder="验证码" :prefix-icon="useRenderIcon(Line)" > <template v-slot:append> <img style=" vertical-align: middle; height: 40px; width: 100px; cursor: pointer; " :src="captchaUrl" @click="onRefreshCode" alt="" /> </template> </el-input> </el-form-item> </Motion> <Motion :delay="250"> <el-button class="w-full mt-4" size="default" type="primary" :loading="loading" @click="onLogin(ruleFormRef)" > 登录 </el-button> </Motion> </el-form> </div> </div> </div> </div> </template> <style scoped> @import url("@/style/login.css"); </style> <style lang="scss" scoped> :deep(.el-input-group__append, .el-input-group__prepend) { padding: 0; } </style>
Kompil Jalankan bahagian belakang, dan rakan sekerja menjalankan bahagian hadapan dan anda boleh melihat halaman log masuk.
Atas ialah kandungan terperinci Bagaimana springboot menyepadukan captcha mudah untuk merealisasikan paparan dan log masuk kod pengesahan imej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!