验证码在基于 Angular 和 Spring 的 Web 应用程序中的实现

Question

如何在以 Java - Spring Boot 作为后端的 Angular 应用程序中实现验证码。我无法使用 Google 的 reCaptcha 库，因为托管应用程序的服务器无法访问互联网。

目前，我将验证码数字代码从 Java 后端传递到前端，并根据用户输入的代码进行匹配，但在测试中，发现这是一种不安全的方法，因为从后端发送的验证码是文本形式。

Answer 1

1. 将以下依赖项添加到您的 pom.xml

   cn.apiclub.tool 简单验证码 1.2.2

2. 在 Spring Boot 中创建一个模块并添加以下类：

   包 com.java.captcha; 导入 java.io.Serialized; 导入 javax.servlet.http.HttpServletRequest; 导入 org.springframework.web.util.WebUtils; 导入 cn.apiclub.captcha.Captcha;

   public class CaptchaDetails implements Serializable {
   
       private static final long serialVersionUID = -4326389569050611057L;
       private final String answer;
       private final Captcha captcha;
   
       public CaptchaDetails(HttpServletRequest request){
           this.answer=request.getParameter("captcha");
           this.captcha=(Captcha) WebUtils.getSessionAttribute(request, "captcha");
       }
   
       public String getAnswer() {
           return answer;
       }
   
       public Captcha getCaptcha() {
           return captcha;
       }
   }
   

---

package com.java.captcha;

import org.springframework.beans.factory.InitializingBean;

import cn.apiclub.captcha.Captcha;
import cn.apiclub.captcha.backgrounds.BackgroundProducer;
import cn.apiclub.captcha.backgrounds.TransparentBackgroundProducer;
import cn.apiclub.captcha.noise.CurvedLineNoiseProducer;
import cn.apiclub.captcha.noise.NoiseProducer;
import cn.apiclub.captcha.text.producer.DefaultTextProducer;
import cn.apiclub.captcha.text.producer.TextProducer;
import cn.apiclub.captcha.text.renderer.DefaultWordRenderer;
import cn.apiclub.captcha.text.renderer.WordRenderer;

public class CaptchaGenerator implements InitializingBean {
    
    private BackgroundProducer backgroundProducer==new TransparentBackgroundProducer();
    private TextProducer textProducer=new DefaultTextProducer();
    private WordRenderer wordRenderer=new DefaultWordRenderer();
    private NoiseProducer noiseProducer=new CurvedLineNoiseProducer();
    
    public Captcha createCaptcha(int width, int height){
        return new Captcha.Builder(width, height)
                .addBackground(backgroundProducer)
                .addText(textProducer,wordRenderer)
                .addNoise(noiseProducer).build();
    }

    @Override
    public void afterPropertiesSet() throws Exception {
        if(this.backgroundProducer==null){
            this.backgroundProducer=new TransparentBackgroundProducer();
        }
        if(this.textProducer==null){
            this.textProducer=new DefaultTextProducer();
        }
        if(this.wordRenderer==null){
            this.wordRenderer= new DefaultWordRenderer();
        }
        if(this.noiseProducer==null){
            this.noiseProducer=new CurvedLineNoiseProducer();
        }

    }

}

---

package com.java.captcha;

import java.io.ByteArrayOutputStream;
import java.io.IOException;

import javax.imageio.ImageIO;
import javax.xml.bind.DatatypeConverter;

import cn.apiclub.captcha.Captcha;

public abstract class CaptchaUtils {
    public static String encodeBase64(Captcha captcha){
        try {
            ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
            ImageIO.write(captcha.getImage(), "png", outputStream);
            return DatatypeConverter.printBase64Binary(outputStream.toByteArray());
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return null;
    }
}

---

完成后，您将转到 dataprovider 类并编写如下代码：

import java.util.HashMap;
import java.util.Map;

import javax.servlet.http.HttpSession;

import com.java.captcha.CaptchaGenerator;
import com.java.captcha.CaptchaUtils;

import cn.apiclub.captcha.Captcha;
import oracle.jdbc.logging.annotations.Logging;

public class XYZDataprovider{
    public Map<String, ?> getData(String dpMethod, HttpSession session, Map<?,?>allRequestParams, Object masterData,  
    Logging logging){
    Map<String, Object>responseHashMap = new HashMap<String,Object>();
    Map<String,Object>dataHashMap = new HashMap<String,Object>();
    if(dpMethod.equals("getCaptchaDet")){
    try {
                    CaptchaGenerator captchaGenerator = new CaptchaGenerator();
                    Captcha captcha = captchaGenerator.createCaptcha(200, 50);
                    dataHashMap.put("captchaAns", captcha.getAnswer());
                    dataHashMap.put("captchaCode", CaptchaUtils.encodeBase64(captcha));
                    responseHashMap.put("responseData", dataHashMap);
                    responseHashMap.put(SUCCESS, true);
                } catch (Exception e) {
                        e.printStackTrace();      
                }
    }
 }
}


 

Answer 2

是否可以更改验证码文本的默认大小，例如目前我只获得 5 位数字，但我希望它是 6 位或更多。