フロントエンド-「キャプチャが簡単な確認コードの使用

インターネットで非常に便利な検証コードプラグイン、easy-captchaを見ました。効果は以下のとおりです。

使用手順：

1.依存関係をインポートします

<!--图形验证码-->
    <dependency>
      <groupId>com.github.whvcse</groupId>
      <artifactId>easy-captcha</artifactId>
      <version>1.6.2</version>
    </dependency>

2.バックエンドは検証コードを生成し、それをフロントエンドに出力します（このインターフェイスはフロントエンドがロードされたときに要求されます）

@ApiOperation(value = "获取验证码")
    @RequestMapping("v1/captcha")
    public void captcha(javax.servlet.http.HttpServletRequest request, HttpServletResponse response) throws Exception {

        // 设置请求头为输出图片类型
        response.setContentType("image/gif");
        response.setHeader("Pragma", "No-cache");
        response.setHeader("Cache-Control", "no-cache");
        response.setDateHeader("Expires", 0);

        //字母类型
        //SpecCaptcha captcha = new SpecCaptcha(130, 48, 4);

        // 中文gif类型
        //ChineseGifCaptcha captcha = new ChineseGifCaptcha(130, 48);

        // 中文类型
        //ChineseCaptcha captcha = new ChineseCaptcha(130, 48);

        // 算术类型
        ArithmeticCaptcha captcha = new ArithmeticCaptcha(130, 48); // 图片的宽高
        captcha.setLen(2);  // 几位数运算，默认是两位
        captcha.getArithmeticString();  // 获取运算的公式：3+2=?
        captcha.text();  // 获取运算的结果：5

        //验证码存入session或存入redis
        //存redis通过UUID.randomUUID()生成key，specCaptcha.text().toLowerCase()生成value，存入redis并将key返回给前端，在登录时从redis中获取并验证
        //存session则如下，
        request.getSession().setAttribute("captcha", captcha.text().toLowerCase());
        // 输出图片流
        captcha.out(response.getOutputStream());
    }

デフォルトで使用する算術型検証コード。また、インターフェースにはJWTトークン検証がありますが、検証コードインターフェースはトークン検証を必要としないため、検証コードを生成するインターフェースのインターセプトを削除しました。

springboot構成ファイルを追加します。

jwtp.exclude-path=/v1/captcha

3.フロントエンドは確認コードを受け取ります

<div class="layui-inline">
     <div class="layui-input-inline">
          <input name="verCode" class="layui-input" lay-verify="required" placeholder="验证码" type="text">
     </div>
     <div class="layui-input-inline">
          <img src="/v1/captcha" id="verCodeImg" width="120px" height="48px"/>
     </div>
</div>

確認コードの画像をクリックして、確認コードのjsを更新します

//刷新验证码
$('#verCodeImg').click(function flushVerCode() {
   this.src = this.src + "?" + Math.random();
});

ログインをクリックすると、確認コードに関連するコード、

function doLogin(field) {
            layer.load(2);
            admin.req('login', field, function (res) {
                layer.closeAll('loading');
                if(res.message=="验证码错误"){
                    /*-------关键代码------start*/
                    layer.msg(res.message, {icon: 5});
                    /*刷新验证码*/
                    var verCodeImg = $('#verCodeImg');
                    var src = verCodeImg.prop('src');
                    verCodeImg.prop('src', src + "?" + Math.random());
                    return false;
                    /*-------关键代码------end*/
                }else{
                    /*登录成功则做其他操作*/
                }
            }, 'POST');
        }

4.バックエンド検証コードの検証

import com.fasterxml.jackson.databind.ObjectMapper;
import com.wf.captcha.utils.CaptchaUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.util.StringUtils;
import org.springframework.web.filter.OncePerRequestFilter;

import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

/**
 * 请求过滤类
 **/
@Component
public class ValidateCodeFilter extends OncePerRequestFilter {

    @Autowired
    private ObjectMapper objectMapper;

    @Override
    protected void doFilterInternal(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, FilterChain filterChain) throws ServletException, IOException {
        /*如果请求的url是登录的接口，则进行验证码校验*/
        if (StringUtils.pathEquals("/v1/login", httpServletRequest.getRequestURI())) {
            String verCode = httpServletRequest.getParameter("verCode");
            if (!CaptchaUtil.ver(verCode, httpServletRequest)) {
                Map<String, Object> map = new HashMap<>();
                map.put("message", "验证码错误");
                httpServletResponse.setContentType("application/json;charset=UTF-8");
                httpServletResponse.getWriter().write(objectMapper.writeValueAsString(map));
                return;
            }
        }
        filterChain.doFilter(httpServletRequest, httpServletResponse);
    }
}

これまでのところ、この確認コードの使用は終了しており、より便利です。

フロントエンド-「キャプチャが簡単な確認コードの使用

おすすめ