captcha.html
2.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
<style>
html {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0 16px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
}
#nc .nc_wrapper {
margin: auto;
}
</style>
</head>
<body>
<div id="nc"></div>
<script>
// 实例化nc
AWSC.use("nc", function (state, module) {
// 初始化
window.nc = module.init({
// 应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
appkey: "FFFF0N0000000000AD45",
//使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。
scene: "nc_register_h5",
// 声明滑动验证需要渲染的目标ID。
renderTo: "nc",
//前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。
success: function (data) {
if (window.webkit && ('onVerifySuccess' in window.webkit)) {
window.webkit.onVerifySuccess(data.sessionId, data.sig, data.token);
}
},
// 滑动验证失败时触发该回调参数。
fail: function (failCode) {
if (window.webkit && ('onVerifyFail' in window.webkit)) {
window.webkit.onVerifyFail(failCode);
}
},
// 验证码加载出现异常时触发该回调参数。
error: function (errorCode) {
if (window.webkit && ('onVerifyError' in window.webkit)) {
window.webkit.onVerifyError(errorCode);
}
}
});
});
</script>
</body>
</html>