前后端接入阿里云盾人机验证

前端集成

准备工作

// 先引入链接
<script src="//g.alicdn.com/sd/nch5/index.js?t=2015052012"></script>

// 预设 DOM
<div id="__nc">
  <div id="nc"></div>
</div>

集成滑动验证

const NoCaptcha = window.NoCaptcha
const nc_appkey = 'FFFFXXXXX666888000'
const nc_token = [nc_appkey, new Date().getTime(), Math.random()].join(':')
const scene = 'nc_login_h5'
const nc = NoCaptcha.init({
  renderTo: '#nc',
  appkey: nc_appkey,
  scene,
  token: nc_token,
  is_Opt: 0,
  language: 'cn',
  timeout: 10000,
  retryTimes: 5,
  errorTimes: 5,
  inline: false,
  bannerHidden: false,
  initHidden: false,
  callback: async (data) => {
    window.console && console.log(nc_token)
    window.console && console.log(data.csessionid)
    window.console && console.log(data.sig)
    // 发起后端校验
    const res = await request({
      url: '/afs/auth',
      method: 'POST',
      data: {
        sessionId: data.csessionid,
        sig: data.sig,
        token: nc_token,
        scene,
      },
    })
    if (res.status === 200) {
      this.$toast.fail('验证成功')
    } else {
      this.$toast.fail('验证失败')
    }
  },
  error: () => {
    this.$toast.fail('验证失败')
  },
})
NoCaptcha.setEnabled(true)
nc.reset()
NoCaptcha.upLang('cn', {
  LOADING: '加载中...',
  SLIDER_LABEL: '请向右滑动验证',
  CHECK_Y: '验证通过',
  ERROR_TITLE: '非常抱歉，这出错了...',
  CHECK_N: '验证未通过',
  OVERLAY_INFORM: '经检测你当前操作环境存在风险，请输入验证码',
  TIPS_TITLE: '验证码错误，请重新输入',
})

后端集成

Maven 引入依赖

<!-- 阿里验证 -->
<dependency>
    <groupId>com.aliyun</groupId>
    <artifactId>aliyun-java-sdk-core</artifactId>
    <version>4.5.2</version>
</dependency>
<dependency>
    <groupId>com.aliyun</groupId>
    <artifactId>aliyun-java-sdk-afs</artifactId>
    <version>1.0.1</version>
</dependency>

后端校验

@Slf4j
@RestController
@RequestMapping("/afs")
@RequiredArgsConstructor(onConstructor = @__(@Autowired))
@Api(value = "人机认证Controller", tags = {"人机认证Controller"})
public class AfsController {

    private final HttpServletRequest servletRequest;

    @Value("${nc.regionId}")
    private String regionId;

    @Value("${nc.accessKeyId}")
    private String accessKeyId;

    @Value("${nc.accessKeySecret}")
    private String accessKeySecret;

    @Value("${nc.appKey}")
    private String appKey;

    private IAcsClient iAcsClient;

    @PostConstruct
    private void init() {
        IClientProfile profile = DefaultProfile.getProfile(regionId, accessKeyId, accessKeySecret);
        iAcsClient = new DefaultAcsClient(profile);
        try {
            DefaultProfile.addEndpoint("cn-hangzhou", "cn-hangzhou", "afs", "afs.aliyuncs.com");
        } catch (ClientException e) {
            e.printStackTrace();
        }
    }

    @PostMapping("/auth")
    @ApiOperation(value = "人机验证", notes = "人机验证")
    public CommJSONResult auth(@RequestBody AuthParams params) throws Exception {
        String ip = IpUtil.getIpAddr(this.servletRequest);
        AuthenticateSigRequest request = new AuthenticateSigRequest();
        request.setSessionId(params.getSessionId());
        request.setSig(params.getSig());
        request.setToken(params.getToken());
        request.setScene(params.getScene());
        request.setAppKey(appKey);
        request.setRemoteIp(ip);
        AuthenticateSigResponse response = iAcsClient.getAcsResponse(request);
        if (response.getCode() == 100) {
            return CommJSONResult.ok("OK");
        } else {
            return CommJSONResult.errorMsg("认证失败");
        }
    }

}