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

Question

我如何在具有 Java 的 Angular 应用程序中实现验证码 - spring boot 作为后端。我无法使用 Google 的 reCaptcha 库，因为托管应用程序的服务器无法访问 Internet。

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

标签： angularspring-bootspring-mvcrecaptchacaptcha

Answer 1

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

   cn.apiclub.tool simplecaptcha 1.2.2

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

   包 com.java.captcha; 导入 java.io.Serializable；导入 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();      
                }
    }
 }
}