Vue+SpringBoot整合阿里云滑动验证

阿里云官方文档地址：点击链接进入
1.Vue前端代码
注：@/utils/noCaptcha引入的为JS，直接Copy过来使用，因为我引入外部CDN无效，不清楚原因可能我太菜

<script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>

<template>
    <div id="nc" style="margin-left:auto;margin-right:auto;">
    </div>
</template>
<script>
import axios from "axios";
import noCaptcha from "@/utils/noCaptcha";
export default {
  name: "captcha",
  data() {
    return {
      nc: null
    };
  },
  methods: {
    refreshNC() {
      this.nc.reset();
    }
  },
  mounted() {
    var nc_token = [
      "FFFF0N00000000009240",
      new Date().getTime(),
      Math.random()
    ].join(":");
    var scene = "nc_activity_h5";
    var nc = NoCaptcha.init({
      renderTo: "#nc",
      appkey: "FFFF0N00000000009240",
      scene: scene,
      token: nc_token,
      elementID: ["usernameID"],
      is_Opt: 0,
      language: "cn",
      timeout: 1000,
      retryTimes: 1,
      errorTimes: 1,
      inline: false,
      apimap: {
        // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
        // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
      },
      bannerHidden: false,
      initHidden: false,
      callback: function(data) {
        var params = {
          sign: data.sig,
          sessionid: data.csessionid,
          token: nc_token,
          scene: scene
        };
        axios.post("api/sys/afsCheck", params).then(response => {
          console.info(response.data);
        });
      },
      error: function(e) {}
    });
    NoCaptcha.setEnabled(true);
    nc.reset(); //请务必确保这里调用一次reset()方法
    NoCaptcha.upLang("cn", {
      'LOADING':"加载中...",//加载
      'SLIDER_LABEL': "请向右滑动验证",//等待滑动
      'CHECK_Y':"验证通过",//通过
      'ERROR_TITLE':"非常抱歉，这出错了...",//拦截
      'CHECK_N':"验证未通过", //准备唤醒二次验证
      'OVERLAY_INFORM':"经检测你当前操作环境存在风险，请输入验证码",//二次验证
      'TIPS_TITLE':"验证码错误，请重新输入"//验证码输错时的提示
    });
    this.nc = nc;
  }
};
</script>
<style>
/* 滑动条高度、边框、背景色等 */
._nc .stage1 .slider {
  height: 42px;
  width: 398px;
  background-color: #ddd;
  position:relative; left:-15px;
}

/* 滑动条 */
._nc .stage1 .track div, ._nc .stage1 .label {
  color: #fff;
  line-height: 42px;
  height: 42px;
}

/* 滑动条背景色-正常 */
._nc .stage1 .bg-green {
  background-color: #78c430;
}

/* 滑动条背景色-失败 */
._nc .stage1 .bg-red {
  background-color: #ff5500;
}

/* 刷新链接 */
._nc .stage3 .menu.refresh {
  left: 50%;
  transform: translateX(-50%);
}

._nc .stage3 {
    height: 70px;
}

._nc .stage3 .menu.feedback {
  display: none;
}

._nc .stage3 .menu.nc-sep {
  display: none;
}

._nc .stage1 .button {
    height: 42px;
}
</style>

2.SpringBoot后端代码

⑴阿里云人机验证参数定义

import io.swagger.annotations.ApiModel;
import lombok.Data;

/**
 * @Description: 阿里云人机验证
 * @author: QinQinSmile
 * @date: 2020年6月4日 上午10:54:54
 */
@Data
@ApiModel(value ="阿里云人机验证")
public class IsValid {
	
	public static final String app_key = "FFFF0N00000000009240";
	
	private String sign;
	
	private String sessionid;
	
	private String token;
	
	private String scene;
	
}

⑵阿里云人机验证配置信息

//.yml配置
aliyun: 
  accessKeyId: your AccessKeyId
  accessKeySecret: your AccessKeySecret
  regionid: cn-hangzhou
  product: afs
  domain: afs.aliyuncs.com
  
———————————————————————————————————————————————————————————————————————————————

import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;

import lombok.Data;

/**
 * @Description: 阿里云人机验证配置信息
 * @author: lzh
 * @date: 2020年6月4日 上午11:20:40
 */
@Component
@Data
public class AliAfsInfo {
	
	@Value("${aliyun.regionid}")
    private String RegionID;
	
    @Value("${aliyun.accessKeyId}")
    private String AccessKeyId;
    
    @Value("${aliyun.accessKeySecret}")
    private String AccessKeySecret;
    
    @Value("${aliyun.product}")
    private String Product;
    
    @Value("${aliyun.domain}")
    private String Domain;
    
}

⑶业务实现代码

import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Map;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;

import org.apache.commons.io.IOUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.IAcsClient;
import com.aliyuncs.afs.model.v20180112.AuthenticateSigRequest;
import com.aliyuncs.afs.model.v20180112.AuthenticateSigResponse;
import com.aliyuncs.profile.DefaultProfile;
import com.aliyuncs.profile.IClientProfile;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiImplicitParam;
import io.swagger.annotations.ApiImplicitParams;
import io.swagger.annotations.ApiOperation;

@Api("验证")
@RequestMapping("/sys/")
@RestController
public class SysLoginController{
	@Autowired
	private AliAfsInfo aliAfs;
	
	@PostMapping("/afsCheck")
	@ApiOperation(value = "滑动验证", notes = "滑动验证")
	public boolean afsCheck(@RequestBody IsValid valid, HttpServletRequest httpRequest) throws Exception {
		IClientProfile profile= DefaultProfile.getProfile(aliAfs.getRegionID(), aliAfs.getAccessKeyId(), aliAfs.getAccessKeySecret());
		IAcsClient client = new DefaultAcsClient(profile);
		DefaultProfile.addEndpoint(aliAfs.getRegionID(), aliAfs.getProduct(), aliAfs.getDomain());
        AuthenticateSigRequest request = new AuthenticateSigRequest();
        request.setSessionId(valid.getSessionid());// 会话ID。必填参数，从前端获取，不可更改。
        request.setSig(valid.getSign());// 签名串。必填参数，从前端获取，不可更改。
        request.setToken(valid.getToken());// 请求唯一标识。必填参数，从前端获取，不可更改。
        request.setScene(valid.getScene());// 场景标识。必填参数，从前端获取，不可更改。
        request.setAppKey(IsValid.app_key);// 应用类型标识。必填参数，后端填写。
        request.setRemoteIp(自己搞);// 客户端IP。必填参数，后端填写。
        AuthenticateSigResponse response = client.getAcsResponse(request);
        if(ToolUtil.isNotEmpty(response) && response.getCode().equals(100)) {
            return true;
    	}
        return false;
	}
}