vue+springboot 로그 인 인증 코드 구현

본 논문 의 사례 는 vue+springboot 가 로그 인 인증 코드 를 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
효과 도 를 먼저 보다

login 페이지 에 인증 코드 html 추가

백 엔 드 pom 파일 에 kaptcha 의존 도 를 추가 합 니 다.

<dependency>
     <groupId>com.github.penggle</groupId>
     <artifactId>kaptcha</artifactId>
     <version>2.3.2</version>
</dependency>

KaptchaConfig 도구 클래스 만 들 기

package com.brilliance.module.system.controller.util;
 
import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
 
import java.util.Properties;
 
@Configuration
public class KaptchaConfig {
    @Bean
    public DefaultKaptcha getDefaultKaptcha() {
        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
        Properties properties = new Properties();
        //    
        properties.setProperty("kaptcha.image.width", "180");
        //    
        properties.setProperty("kaptcha.image.height", "50");
        //     
        properties.setProperty("kaptcha.border", "yes");
        //     
        properties.setProperty("kaptcha.border.color", "105,179,90");
        //     
        properties.setProperty("kaptcha.textproducer.font.color", "blue");
        //     
        properties.setProperty("kaptcha.textproducer.font.size", "40");
        // session key
        properties.setProperty("kaptcha.session.key", "code");
        //      
        properties.setProperty("kaptcha.textproducer.char.length", "4");
        //   
        properties.setProperty("kaptcha.textproducer.font.names", "  ,  ,    ");
        Config config = new Config(properties);
        defaultKaptcha.setConfig(config);
        return defaultKaptcha;
    }
}

Controller 에서 생 성 된 인증 코드 는 redis 에 저장 되 어 있 으 며,나중에 검사 할 때 사용 합 니 다(redis 의 설정 및 자체 바 이 두 에 의존 합 니 다).

@RestController
@RequestMapping("/api/user")
@Api(tags = "      ")
public class SysUserController extends AbstractController{
 @Autowired
 private SysUserService sysUserService;
 @Autowired
 private DefaultKaptcha defaultKaptcha;
 
 @Autowired
 RedisTemplate redisTemplate;
 
 @GetMapping("/createImageCode")
 public void createImageCode(HttpServletRequest request, HttpServletResponse response) throws IOException {
  response.setHeader("Cache-Control", "no-store, no-cache");
  response.setContentType("image/jpeg");
  //        
  String text = defaultKaptcha.createText();
  //        
  BufferedImage image = defaultKaptcha.createImage(text);
  //       redis       ，        60 
  redisTemplate.opsForValue().set("imageCode",text,60, TimeUnit.SECONDS);
  ServletOutputStream out = response.getOutputStream();
  ImageIO.write(image, "jpg", out);
  out.flush();
  out.close();
 }

생 성 후 로그 인 인터페이스 에 인증 코드 를 입력 하려 면 입력 이 정확 한 지 확인 해 야 합 니 다.

로그 인 단추 에 요청 판단 을 한 번 추가 하여 입력 한 인증 코드 가 정확 한 지 검증 하고 반환 값 에 따라 오류 정 보 를 알려 줍 니 다.

@PostMapping("/compareCode")
public RESULT compareCode(@RequestBody String verificationCode) {
    if(!redisTemplate.hasKey("imageCode")) {
  return RESULT.error(500,"      ");
 }
 String code = redisTemplate.opsForValue().get("imageCode").toString();
 if(StringUtils.equals(verificationCode,code)) {
  return RESULT.ok();
 } else {
  return RESULT.error(500,"       ");
 }
}

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.