Bagaimana springboot menyepadukan captcha mudah untuk merealisasikan paparan dan log masuk kod pengesahan imej

1. Pengenalan kepada easy-captcha

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.

2. Tambahkan kebergantungan

<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>

3 Tulis kod lapisan perkhidmatan

@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;
    }
}

4 >Buat LoginController dan sediakan kaedah untuk menjana kod pengesahan

@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 src="/static/imghwm/default1.png"  data-src="captchaUrl"  class="lazy" 
          style="
            vertical-align: middle;
            height: 40px;
            width: 100px;
            cursor: pointer;
          "
          :
          @click="onRefreshCode"
          alt=""
        />
      </template>
    </el-input>
  </el-form-item>
</Motion>

Kod halaman log masuk yang lengkap adalah seperti berikut

<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  class="wave lazy"  src="/static/imghwm/default1.png"  data-src="bg"  :  / 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 id="nbsp-title-nbsp">{{ title }}</h3>
          </Motion>

          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="loginRules"
            size="large"
          >
            <Motion :delay="100">
              <el-form-item
                :rules="[
                  {
                    required: true,
                    message: &#39;请输入账号&#39;,
                    trigger: &#39;blur&#39;
                  }
                ]"
                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 src="/static/imghwm/default1.png"  data-src="captchaUrl"  class="lazy" 
                      style="
                        vertical-align: middle;
                        height: 40px;
                        width: 100px;
                        cursor: pointer;
                      "
                      :
                      @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!