07 前后端接入阿里云盾

前端集成

准备工作

// 先引入链接
<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("认证失败");
}
}
}