SpringBoot は単純なログイン確認コードを実装します

いくつかの情報を参考にしてこの検証コードの機能を完成させたので、その機能の実装過程を記録します。

1.エフェクト描画

2. 実施原則

認証コードの画像はバックグラウンドで生成され、フロントデスクに送信されます。
確認コードの内容はバックグラウンドでセッションに保存されます。
フロントデスクで認証コードを入力すると、バックエンドに送信され、セッション中に保存されている認証コードが取り出されて認証されます。

3. コード

1. 構成を作成する

KaptchaConfig という名前の構成を作成しました

コードは以下のように表示されます。

ここでは、認証コードの背景にフチの有無、文字色を設定し、認証コードを生成する。

package com.example.demo.config;

import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import java.util.Properties;

@Configuration
public class KaptchaConfig {
    @Value("${kaptcha.border}")
    private String border;

    @Value("${kaptcha.textproducer.font.color}")
    private String fontColor;

    // 其他配置项

    @Bean
    public DefaultKaptcha captchaProducer() {
        Properties properties = new Properties();
        properties.setProperty("kaptcha.border", border);
        properties.setProperty("kaptcha.textproducer.font.color", fontColor);
        // 配置其他属性

        DefaultKaptcha kaptcha = new DefaultKaptcha();
        Config config = new Config(properties);
        kaptcha.setConfig(config);
        return kaptcha;
    }
}

上記の @value(${}) のデータは application.yml で構成されます

kaptcha:
  border: "no"
  textproducer:
    font:
      color: pink

2. 認証コードをフロントエンドに返します

まずコントローラーに 2 つのクラスをインポートします

@Autowired
    private DefaultKaptcha captchaProducer;

    @Autowired
    private HttpServletRequest request;

次に、コントローラー内で検証コードを Base64 エンコードに変換し、フロントエンドに返します。

このステップにより、生成された検証コード テキストがセッションに保存されました。

 
@GetMapping("/captcha")
    public void captcha(HttpServletResponse response) throws IOException {
        // 生成验证码文本
        String captchaText = captchaProducer.createText();

        // 将验证码文本存储在Session中
        HttpSession session = request.getSession();
        session.setAttribute("captcha", captchaText);

        // 生成验证码图片
        BufferedImage captchaImage = captchaProducer.createImage(captchaText);
        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        ImageIO.write(captchaImage, "jpg", baos);
        byte[] captchaBytes = baos.toByteArray();

// 将字节数组转换为Base64编码
        String base64Captcha = Base64.getEncoder().encodeToString(captchaBytes);

// 返回响应
        response.setContentType("image/jpeg");
        response.setCharacterEncoding("UTF-8");
        PrintWriter writer = response.getWriter();
        writer.write(base64Captcha);
        writer.flush();
    }

フロントエンドは、受信時にこの Base64 エンコーディングを変換する必要があります。

const yzm = async () => {
  let ff = await yzmAPI();
  // 解码图片数据
  const decodedData = atob(ff.toString());

// 创建一个Uint8Array来存储解码后的二进制数据
  const arrayBuffer = new Uint8Array(decodedData.length);
  for (let i = 0; i < decodedData.length; i++) {
    arrayBuffer[i] = decodedData.charCodeAt(i);
  }

// 创建一个Blob对象
  const blob = new Blob([arrayBuffer], { type: 'image/jpeg' });

// 创建一个URL对象
  const imageUrl = URL.createObjectURL(blob);
  imgs.value = imageUrl;
}

最後に、ログイン プロセスで、フロントエンドによって渡された検証コードと保存されている検証コードを比較できます。

 HttpSession session = request.getSession();
        String captcha = (String) session.getAttribute("captcha");
        if (!captcha.toString().equals(inputCaptcha.toString())) {
           //写自己的处理方式
        }

以上で認証コードによるログインは完了です